今まではあまり本文中の小見出しを使っていなかった、WordPress悪戦苦闘中のおじさんローカル・ブロガー、小梅太郎です。
記事の本文中に小見出しを設けるのは、内容を把握しやすいですし、読みやすいですし、見た目もいいですし、とにかく訪問して読んでくれている方に親切ですから、あったほうがいいですよね。
って、分かってはいるのですが、以前からあまり上手く使えてないんです。
それでは、小見出しはどうすればいいの？
ということで、読みやすさ、見た目に加えて、自分の好みを加えて、どうすればいいのか勉強がてらちょっと検討してみました。
そう、分からないと言ってばかりいないで、とりあえずやってみましょう。
h3タグで単純に小見出し化してみた
この小見出しは、単純にh3タグで囲っただけです。
（とりあえずタグはh3を使ってますが、これも正直どれがいいのかがよく分からないのですが…）
ちなみに、このブログで使用しているテーマ「TwentyTwelve」では、h3はfont-sizeが16px（1.142857143rem）で設定されているようです。
<h1>から<h6>がまとめてスタイルシートで設定されているので、元を変更するにはそちらをいじらないとダメですね。
小見出しの頭にボーダー
これは小見出しの頭にボーダー（border-left:7px solid #333333;）のみを追加したパターンですね。
ボーダーと文字がくっついているので、間隔をあけないとダメですね。
この場合はpaddingで調整する必要があるようです。
小見出しの頭のボーダーと文字に間隔を開ける
paddingで調整しました（padding: 0 0 0 0.5em;）。
これで少し見やすくなりましたね。
ちなみに、今回はこの記事中でh3タグにstyle属性で直接設定をして、検討を進めています。
class名については、この検討後に改めて決めて、最終的にはスタイルシート（style.cssファイル）で対応したいと思っています。
（自分で言っていることがよく分かってないけど、こういうことでいいのかな…）
小見出しの頭にボーダーとアンダーライン
これは、上の「小見出しの頭のボーダーと文字に間隔を開ける」のパターンにアンダーライン（border-bottom: 1px solid #333333;）を追加したものですが、この場合、もうちょっと余白やマージンの調整が必要をした方がいいかもしれませんね。
小見出しの頭にボーダーとアンダーラインで余白調整
paddingとmarginを設定して、余白と間隔を調整してみましたが、これはもうちょっと数値を検討した方がよさそうです。
ただ、やっぱりこういう小見出しが見やすくていいのでしょうね。
よく見かけるパターンです。
小見出しを帯にしてみる
小見出しを帯にしてみましたが、これはちょっとキツすぎるかな？
色の調整をすれば、いいかもしれないですね。
【まとめ】
ということで、まだどうするかは決まってないので、最後は単純にh3タグで囲っただけの小見出しにしてみましたが、色は全体のトーンも考えて、考え直さないとダメですね。
そして決まったら、class名を付けてスタイルシートに追記しておき（当ブログでは子テーマにですね）、記事本文中では、
<h3 class=”class名”>見出しの文字</h3>
と使えばいいのかな。
早く決めよっと。
※今回はこちらのサイトを参考にさせていただきました。ありがとうございました。
永無流、WordPressにおける、小見出しの作り方 – 永遠無窮の創作庫