ブログ記事内の見出しに背景色や線を付けて読みやすくする。

ブログを見やすくするために、記事内の見出しの文字を装飾して目立たせ、読みやすくしたいと思います。
見出しと、文章がわかりやすく区別できるとメリハリがついて、記事が読みやすくなると思います。

やりたいこと

下の４つを対応してみたいと思います。

• １．見出しの背景に色を付ける
• ２．見出しの下に線を入れる
• ３．見出しの左横に縦線を入れる
• ４．縦線と見出し文字をずらす

前提

• 過去やこれから書く記事すべてに同じように反映されます。
• ブログの見出しの文字列はh2タグ(※)が設定されている前提です。このh2タグで囲まれている文字が全部同じように装飾されるように対応します。
  （※）たとえば「文字の装飾」という文字を見出しとすると<h2>文字の装飾</h2>のように記載していることを前提にしています。
  FCブログでは、h2タグを入れるには、「本文の編集」で「Ｗ」を押していない状態でできます。「Ｗ」が押されている状態だとうまく反映されません。※押されている状態で、さらに「ソース」ボタンが押されている場合はできます。
• すでにh2タグなどの装飾がされている場合ではうまくいかないときがあります。※装飾されている内容を削除すればできるようになります。

装飾をするための修正箇所

CSSに追記します。FCブログでは、左メニューにある「テンプレートの設定」のリンクをクリックすると右側の下部に表示される「スタイルシート編集」の部分に追記します。

PCとスマホとでレイアウトを分けている人は、PCとスマホそれぞれで追記が必要になります。※PCだけに対応する場合は、PCだけでも大丈夫です。

CSSは、タグなどに装飾（sytle）の定義を記載することができるものです。HTML上のタグへ直接記載することもできますが、全記事で読み込まれる共通のCSSファイルに記載することで、全部の記事に同じように反映されるようになります。※管理画面の「スタイルシート編集」で編集すると、全記事で読み込まれる共通のCSSに反映されます。

事前準備

まずは、背景色を決めます。
ただ、色はブラウザがわかる色を指定する必要があります。下のサイトから使用したい色の名前（英語）、もしくは、色の番号（#000000のような#と6桁の数字）を取得します。
サイト：見本とカラーコード変換
※記載のサイトを開いて、画面上部に表示されている色の箱から設定したい色をクリックすると、該当する色番号が左側に#000000のような感じで表示れますので、控えておきます。もしくは、画面の下部に色の名前（aliceblueなど）が書かれていますので、その名前を控えてください。
もし、サイトがなくなっている場合は、googleで「色 カラーコード」などの文言で検索して確認してください。

「テンプレートの設定」の「スタイルシート編集」の一番下に下記の文字を入力します。
h2 {
}
※この{}内に装飾の設定を記載していきます。

h2タグの装飾

では実際にCSSへ設定を追加していきます。

１．見出しの背景に色を付ける

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
}
背景（background）の色です。
#e6f8ffが背景色です。この値を変えると色が変わります。

２．見出しの下に線を入れる

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
}
下（bottom）の線（border）を指定しています。
#00A2b6が線の色です。この値を変えると色が変わります。ここに色の名前（aliceblueなど）を記載することもできます。
pxは線の太さです。数字を小さくすると細く、大きくすると太くなります。
solidは１本の実線を表しています。doubleだと２本の実線、dottedだと点線、dashedだと破線になります。

３．見出しの左横に縦線を入れる

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
※青文字を追加します。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
border-left: solid 5px #77d2d9;
}
左（left）の線（border）を指定しています。
※設定値は下線と同じです。

４．縦線と見出し文字をずらす

「テンプレートの設定」の「スタイルシート編集」に追加したh2の設定の箇所が下記のようになるようにします。
これを入れないと、左横の線と文字がくっついて表示され見にくいです。
h2 {
background: #e6f8ff;
border-bottom: solid 3px #00A2b6;
border-left: solid 5px #77d2d9;
padding-left: 0.5em;
}
左側（left）にスペースを入れる（padding）します。
0.5emの値を大きくすると、大きくずれます。

最後に保存してもらうと反映されます。

参考

たとえば、下線がいらない場合は、border-bottomの行を書かなければ表示されません。
自分が好きなように装飾をしてみてくださいね！

今回はh2タグでの記載をしましたが、h3タグや他のタグも同じように設定ができますので、気が向いたら設定してみてくださいね。