見出しタグの記述方法とCSSを使ってカスタマイズする方法

  • LINEで送る

ブログで記事を作成するときに使う「h」タグ。h1~h6まであり、見出し部分に使われます。

数字が小さくなるほど重要な部分に使用され、検索エンジンに文章を強調して伝えることができます。また、記事が読みやすくなるというメリットがあります。

ほとんどのブログでは

  • h1・・・ブログタイトル
  • h2・・・記事タイトル
  • h3~h6・・・記事内の見出し

というようにhタグが使い分けられていると思います。よく使われるのはh4タグまででしょうか。

hタグの記述方法

hタグはこのよう記述して使います。

<h3>当サイトの文章をh3タグで囲むとこんな感じに表示されます。</h3>
<h4>当サイトの文章をh4タグで囲むとこんな感じに表示されます。</h4>

実際にブログに表示されるとこんな感じになります。

当サイトの文章をh3タグで囲むとこんな感じに表示されます。

当サイトの文章をh4タグで囲むとこんな感じに表示されます。

hタグは数字の小さなものから順につかいましょう。

<!--良い例-->
<h3>〇〇〇</h3>
<h3>〇〇〇</h3>
<h4>△△△</h4>
<h5>◇◇◇</h5>
<h3>〇〇〇</h3>
<!--悪い例-->
<h3>〇〇〇</h3>
<h3>〇〇〇</h3>
<h5>◇◇◇</h5>
<h4>△△△</h4>
<h3>〇〇〇</h3>

見出しをCSSで修飾する方法

私がFC2ブログで使用しているテンプレートはh3以降のCSSが指定されていないので、ちょっと寂しい感じです。

見出しのCSS設定1

下記のCSSを追加して、見出しの表示形式を整えてみたいと思います。

/* ▼ h3~h5見出し ▼ */

h3{ 
    font-size:10pt;                           /* 文字サイズ */
    background-color:#ffffff;                 /* 背景色     */
    border-top:   #999999 0px solid;          /* 枠(上)     */
    border-left:  #999999 4px solid;          /* 枠(左)     */
    border-right: #999999 0px solid;          /* 枠(右)     */
    border-bottom:#999999 1px solid;          /* 枠(下)     */
    padding:5px 10px; 
}


h4{ 
    font-size:10pt;                           /* 文字サイズ */
    background-color:#ffffff;                 /* 背景色     */
    border-top:   #e0e0e0 0px solid;          /* 枠(上)     */
    border-left:  #e0e0e0 3px solid;          /* 枠(左)     */
    border-right: #e0e0e0 0px solid;          /* 枠(右)     */
    border-bottom:#e0e0e0 1px solid;          /* 枠(下)     */
    padding:5px 10px; 
    margin:0px 5px; 
}

h5{ 
    font-size:10pt;                           /* 文字サイズ */
    background-color:#ffffff;                 /* 背景色     */
    border-top:   #e0e0e0 0px solid;          /* 枠(上)     */
    border-left:  #e0e0e0 0px solid;          /* 枠(左)     */
    border-right: #e0e0e0 0px solid;          /* 枠(右)     */
    border-bottom:#e0e0e0 1px solid;          /* 枠(下)     */
    padding:5px 10px; 
    margin:0px 10px; 
}

/* ▲ h3~h5見出し ▲ */

#以降の6桁の英数字(カラーコード)で色を、pxの前の数字で枠線の太さを指定しています。

見出しが整えられて見やすくなりました♪

見出しのCSS設定2

同じようにh3以降のCSSが指定されていないテンプレートをお使いの方は、よろしかったら上記のCSSをコピペしてお使いくださいね。そのまま使っても、お好きなように変更していただいてもOKです。シンプルなので、カスタマイズしやすいと思います。

「カラーコード」で検索すると、カラーコードをまとめたWebサイトがたくさん見つかりますよ♪
【参考】サイトカラーの調べ方

FC2ブログをお使いの方はCSSの編集ページでCSSの一番下に貼り付けるだけです。
記事を書くときは広告を設置する方法を参考にHTMLソースの記述が反映される状態にしてhタグを記述してくださいね。

line

  • LINEで送る