下準備
見出しに背景色を付けたり下線を引くためにはCSSを使います。
Bloggerの場合は、テーマ→カスタマイズ→上級者向け→CSSを追加 の順で進んでください。
そうすると、カスタマイズCSSを追加が表示されるので、これから説明するCSSを入力してください。
コードの変更OKなところ
見出しタグはh2にしています。他のタグ(h3・h4)を使用時は変えてください。
背景の色・下線の色はシアン(#00ffff)にしています。他の色にしたいときは、#の後ろの英数字を変更してください。
font-size:20pxは文字の大きさを表しています。自由に数字を変えてください。なくても、問題はないのですが、見出しの文字が小さくなる可能性があります。
他の変更OKなところはコード毎に説明します。
見出しの背景に色を付ける(コピペOK)
背景に色を付けるときは、background-colorを使います。
background-colorで背景色を！
- h2{background-color: #00ffff;font-size:20px;}
背景の色が文字の上下左右がギリギリだと感じた時は、paddingを使って余裕があるようにします。
padding:5px;の数字は、自分のブログの様子を見ながら変えてください。
background-colorとpaddingで背景色に余裕を！
- h2{background-color: #00ffff;font-size:20px;padding:5px;}
見出しに下線を付ける(コピペOK)
下線を付けるときは、border-bottomを使います。:の後ろには、スタイルの値・線の太さ・線の色の順です。
線の太さ・線の色は変更OKです。
線を太くしたければ数字を大きく、細くしたければ数字を小さくしてください。
色は、カラーコードを調べてください。
border-bottom:solidは1本線。
- h2{border-bottom:solid 5px #00ffff;font-size:20px;}
border-bottom:doubleは2本線。
- h2{border-bottom:double 5px #00ffff;font-size:20px;}
border-bottom:dashedは破線。
- h2{border-bottom:dashed 5px #00ffff;font-size:20px;}
border-bottom:dottedは点線。
- h2{border-bottom:dotted 5px #00ffff;font-size:20px;}
