Blogger ではデフォルトのテンプレートを使っていると、hタグで囲っても記事中の見出しとしてあまり目立たないというか、ただ文字の大きさが変わるだけなので、もう少し見やすく修正するためのメモ。
見出しを変更するにはまずhタグがどう使われているかを調べ、その後、hタグの CSS を修正する。
hタグがどう使われているかを調べる
テンプレートによってhタグの使われ方が違うようなので、まずはそれを調べる。
下記に調べ方がまとめられている(CSS の修正についても書かれている)。
また、下記に今自分が使っている Blogger のテンプレートのhタグについてまとめられていた。
h1タグ ブログタイトル
h2タグ 日付、ガジェットタイトル
h3タグ 投稿タイトル
h4タグ コメント関係
h1~h3までは使わないほうが良さげ。
h4タグはコメントに使われているけど、これとh5を修正してみることにする。
CSS を修正する
hタグの CSS の記述内容については、同じく上記1つ目のリンクが参考になった。
Blogger でどうやって CSS を修正するかについても書かれている。
Blogger のデフォルトのテンプレートを使っている場合は、テンプレートデザイナーの「上級者向け」→「 CSS を追加 」から変更できるので簡単に試せる。(場所の表記は環境によるかもしれない。)
上記を参考に見出しの設定を行ったところ、やっぱりコメント欄にも見出しの設定が反映されてしまったけど、見づらくはないのでこれでいいことにする。
また、CSS の記述内容については下記も参考になった。
上記を見ると、記事中のhタグのみに CSS の設定を反映できるようだけど、テンプレートによるみたいなのでまた今度試すことにする。
追記:
記事タイトルの文字が少し小さくて目立たないので、h3タグも少し修正することにした。
h3タグの場合、「h3.post-title」としないとフォントの大きさが反映されなかった(それでもフォントの色は反映されなかった)。
本当は枠線の色で塗りつぶして、文字を白っぽくしたかったけど、現状でも見やすくなった気がするのでひとまずこれでいいことにする。