ワードプレスの見出しタグの付け方、文字の装飾まとめ

スポンサーリンク

今回はワードプレスで見出しタグ(h1,h2,h3,h4,h5,h6)の付け方をご紹介させていただきます。と、その前に見出しタグとは何のことをさすのでしょうか。見出しタグとは、文書構造をわかりやすく伝えるために使用するタグのことを指し、ウェブブラウザで表示した際に見出しタグはテキストが大きくなり太字で表示され、閲覧者に見出しであることがわかりやすく表示される、といった特徴があります。

SEO観点でもサイト内、ページ内の階層構造は特に重視されており、押さえておきたい重要ポイントの一つです。

ビジュアルモードで見出しタグの設定

話がそれましたが、ワードプレスの見出しタグの設定に話を戻すと、まずは、プラグイン(Tiny MCE Advanced)のインストールから始めます。

インストール後→有効化して、設定⇒エディターの設定を行います。そして、段落ボタンを左端に追加。

ワードプレスの見出しタグの付け方、文字の装飾まとめ

これで初期設定は完了です。

文章の執筆途中でタグを入れたいな、と思ったときは、見出しの対象にしたい文字をドラッグして、上部の段落ボタンをプルダウンして見出しに設定します。

見出し1に設定したい場合はプルダウンして、見出し1に、見出し2に設定したい場合はプルダウンして、見出し2に、といった具合です。

ワードプレスの見出しタグの付け方、文字の装飾まとめ

見出しタグの順序に関しまして

見出しタグはh1→h2→h3・・・h6の順序で使います。しかしタイトルタグはh1タグであるため、事実上h2タグから本文中はスタートすることになります。

つまり、タイトルがh1タグの設定であることを前提に、

○h1タグ(タイトル)

○h2(見出し)

○h3(小見出し)

○h3(小見出し)

○h2(見出し)

○h3(小見出し)

○h3(小見出し)

○h2(見出し)

○h3(小見出し)

○h3(小見出し)

このような順序になることが想定されます。

(代替手段)テキストモードからタグで囲む

テキストモードからタグで囲む

これはビジュアルモードでの作業、所謂初めてワードプレスに触る方にお勧めの手法ですが、テキストモードからタグで囲む方法もございます。

まずはビジュアルモードからテキストモードへ移行します。

そして、見出しタグh1であるならば、文字があった時に、<h1>見出し1</h1>と囲みます。h2~h4も同様に設定ができます。

しかし、h1タグには注意が必要です。

h1タグ

h1タグは通称タイトルタグと呼ばれ、タイトルに含まれております。そのため、本文中に使うことは少ないです。

SEOの観点でもあまり良くないとされますので、ご注意を!

h2~h6タグに関しまして

基本的に見出しタグは順番が少ない方が強いタグとなります。そのため優劣をつけるならば、h2>h3>h4>h5>h6となります。

実用的な見出しタグ一覧

下線をつける見出しのCSS

h1 {
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}

上記のsolidが下線、3pxは下線の太さ、blackが黒色ということになります。これを応用すると、solid⇒dashedにすれば点線、doubleにすれば上下線になりますし、色をwhiteにすれば白色になります。色指定は、#6594e0のようにカラー番号を指定しても良いです。

背景色をつける見出しのCSS

h1 {
background: #c2edff;/*背景色*/
padding: 0.5em;/*文字まわり(上下左右)の余白*/
}

背景色をつけて、さらに淵に色をつけたい場合は、

border: solid 3px #364e96;/*線色*/

を入れます。さらに、淵を丸くしたい場合は、

border-radius: 0.5em;/*角丸*/

とします。

これらを覚えておけば基本的な見出しタグを作ることは容易でしょう。

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク