Element Sample ★

ブログへの投稿感謝します♪
この投稿はブログでの記事作成方法をサンプルとして記述しています。

改行と段落について

投稿画面で文章を改行させる方法は2種類あります。

  1. [Shift] + [Enter] で改行
    この方法は<br>タグと同じで、行間に空白を空けずに改行する場合に使用します。
  2. [Enter] で段落
    この方法は<p>タグと同じで、行間に通常1行分程の空白を設けて改行されます。

リストについて

投稿画面でリストを表示させる方法は2種類あります。

  1. 箇条書きのリスト
    このリストは<ul>タグと同じで、のボタンで作成することができます。
  2. 番号付きのリスト
    このリストは<ol>タグと同じで、のボタンで作成することがきます。

見出し装飾について

見出しは、のボタンで設置でき、あらかじめ装飾したものが使用できます。

1番大きな見出し-<h1>

2番目に大きな見出し-<h2>タグ

3番目に大きな見出し-<h3>タグ

4番目に大きな見出し-<h4>タグ

5番目に大きな見出し-<h5>タグ
6番目に大きな見出し-<h6>タグ

見出しの設置について
一番大きな見出しは、「1つの投稿に1つだけ設置する」という記述的なルールがあり、さらに、高ランク見出しの下にそれより低ランクの見出しを配置する場合は、同じセッションの延長と見なされますが、高ランク見出しが連続して続くような場合には、新しいセッションが開始されたとみなされます。
文書全体における見出し階層を意識して見出しレベルをルール付けするのはもちろんですが、同時にセクションの概念を意識してセクションごとに見出しレベルをルール付けしてやる必要があります。

テキストカラーについて

ビジュアルエディタで文章を作成される方に関しては、ビジュアルエディタの「文字色」で簡単に変更することが可能です。
テキストエディタを使用される方の為に複数のフォントカラースタイルを用意しています。
このスタイルは既存のHTMLタグに「クラス」を付加するだけです。

  1. 文字色が「赤」です。class=”text-red” で変更できます。
  2. 文字色が「青」です。class=”text-blue” で変更できます。
  3. 文字色が「緑」です。class=”text-green” で変更できます。
  4. 文字色が「オレンジ」です。class=”text-orange” で変更できます。
  5. 文字色が「グレー」です。class=”text-gray” で変更できます。
  6. 文字色が「ライトグレー」です。class=”text-lightgray” で変更できます。
  7. 文字色が「スカーレット」です。class=”text-scarlet” で変更できます。

テキストサイズについて

ビジュアルエディタで文章を作成される方に関しては、ビジュアルエディタの「段落」等で簡単に変更することが可能です。
テキストエディタを使用される方の為に複数の代表的なフォントサイズを用意しています。
このスタイルは既存のHTMLタグに「クラス」を付加するだけです。

デフォルトのフォントサイズと比較するためにダミーテキストを掲載しています。
これは正式な文章の代わりに入れて使うダミーテキストです。
そしてこれはフォントサイズ「ラージ」です。
class=”text-large” で変更できます。

主に書籍やウェブページなどのデザインを作成する時によく使われます。
これは正式な文章の代わりに入れて使うダミーテキストです。
そしてこれはフォントサイズ「ミドル」です。
class=”text-middle” で変更できます。

デフォルトのフォントサイズと比較するためにダミーテキストを掲載しています。
これは正式な文章の代わりに入れて使うダミーテキストです。
そしてこれはフォントサイズ「ビッグ」です。
class=”text-big” で変更できます。

主に書籍やウェブページなどのデザインを作成する時によく使われます。
これは正式な文章の代わりに入れて使うダミーテキストです。
そしてこれはフォントサイズ「ミニマム」です。class=”text-minimum” で変更できます。

テキストリンクについて

テキストにリンクは、のボタンで貼ることができます。
リンクしたいテキストを反転させた状態で[リンク]ボタンをクリックすると、URLを設定する画面が出てきますが、ここで[設定]ボタンをクリックします。

設定画面では、サイト内リンクを貼ったり、リンクテキストをクリックした際に「新しいタブで開くかどうか」の設定ができます。

target=”_blank”について
新しいタブで開くかどうか「target=”_blank”」の設定について・・・サイト内リンクであれば設定する必要はありませんが、リンク先URLが外部サイトの場合には、この「target=”_blank”」にチェックを付けて下さい。
理由としては、リンクをクリックした時点で当サイトから離脱し、別のサイトへ流れることになるからです。SEO対策において、できるだけ当サイトを離脱しないまま新しいタブで外部サイトを開いて欲しいのです(^-^)

画像の貼り付けについて

投稿内に画像を貼り付ける時はのボタンを使います。

画像のアップロードがまだの場合は、画像ファイルをそのまま画面にドラック&ドロップします。

アップロードされた画像を選択した後、画面右下の詳細な設定を行った後、[投稿に挿入]ボタンをクリックします。
※リンク先項目で[メディアファイル]を選択しておくと、閲覧時に画像をクリックしてポップアップ(拡大表示)させることができます。

ボックスカラムについて

ここからは、HTMLの構造やタグの知識が無い場合、少し難しい内容になります。
ボックス<div>タグについては、ビジュアルエディタには設置してないため、設置したい場合は必然的にテキストエディタでの装飾が必要になります。

使用可能なclass
記述例:
<div class=”box-outside”>
ボックス内の文章を入力します
</div>
<div class=”box-inside”>
ボックス内の文章を入力します
</div>
<div class=”box-outside”> の中に <div class=”box-inside”> を入れ込んだboxを使用することもできます。
記述例:
<div class=”box-outside”>
<div class=”box-inside”>
ボックス内の文章を入力します
</div>
</div>

最後まで読んでくれてありがとう♪
ちなみに、上に引いたラインは「水平線<hr>」です。
これを読んで少しは投稿のお役に立てるとうれしいです。
ハイクリブログを、もっとにぎやかに!もっと濃いものに!していくためには、ハイクリメンバーの「書き込み」が重要なので、これからもハイクリBlogをどうぞよろしくお願いいたしますデス(^-^)/