ブログの見出しの修正

Blogger ではデフォルトのテンプレートを使っていると、hタグで囲っても記事中の見出しとしてあまり目立たないというか、ただ文字の大きさが変わるだけなので、もう少し見やすく修正するためのメモ。
見出しを変更するにはまずhタグがどう使われているかを調べ、その後、hタグの CSS を修正する。

hタグがどう使われているかを調べる

テンプレートによってhタグの使われ方が違うようなので、まずはそれを調べる。
下記に調べ方がまとめられている（CSS の修正についても書かれている）。

• Bloggerの本文見出しをカスタマイズする - デジタル小噺

また、下記に今自分が使っている Blogger のテンプレートのhタグについてまとめられていた。

• Blogger：見出し設定(5)どのHタグの見出しを変更するか？

h1タグ　ブログタイトル
h2タグ　日付、ガジェットタイトル
h3タグ　投稿タイトル
h4タグ　コメント関係

h1～h3までは使わないほうが良さげ。
h4タグはコメントに使われているけど、これとh5を修正してみることにする。

CSS を修正する

hタグの CSS の記述内容については、同じく上記1つ目のリンクが参考になった。
Blogger でどうやって CSS を修正するかについても書かれている。

• Bloggerの本文見出しをカスタマイズする - デジタル小噺

Blogger のデフォルトのテンプレートを使っている場合は、テンプレートデザイナーの「上級者向け」→「 CSS を追加 」から変更できるので簡単に試せる。（場所の表記は環境によるかもしれない。）
上記を参考に見出しの設定を行ったところ、やっぱりコメント欄にも見出しの設定が反映されてしまったけど、見づらくはないのでこれでいいことにする。
また、CSS の記述内容については下記も参考になった。

• [CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方 | delaymania

上記を見ると、記事中のhタグのみに CSS の設定を反映できるようだけど、テンプレートによるみたいなのでまた今度試すことにする。

追記：
記事タイトルの文字が少し小さくて目立たないので、h3タグも少し修正することにした。
h3タグの場合、「h3.post-title」としないとフォントの大きさが反映されなかった（それでもフォントの色は反映されなかった）。
本当は枠線の色で塗りつぶして、文字を白っぽくしたかったけど、現状でも見やすくなった気がするのでひとまずこれでいいことにする。