こんにちは。
前回の続きで、私がこのブログでカスタマイズしたものをお伝えします。今回は見出しと目次について。
すべてＣＳＳを載せていますので、気に入ったものがあれば是非使ってください！
見出しのカスタマイズ
最近知ったのですが、見出しを使うときは順番に気をつけないといけないみたいです。記事を２０本ぐらい書いてから気づいてしまうとはショックです・・・
見出しの順番に注意
見出しは見たまま編集から見ていただくと分かるのですが、はてなブログのサイトから記事を書くと、見出しはこのように選択することができます。
これをＨＴＭＬ編集から見ると「大見出し」はh3、「中見出し」はh4、「小見出し」はh5となっています。
しかし、本来見出しはh2からh6まで順番に数字が大きくなっていくものなので、記事の一番最初の「大見出し」はh2から始めないといけないのです。
つまり、最終的にはＨＴＭL編集から順番にh2→h3→h4になるように変更する必要があります。例えば、h3から始めたり大見出しがh2で中見出しがh5と適当に設定したりするとダメだということです。
これが検索等のＳＥＯ的に良くないのです！
ちなみに「Open Live Writer」なら見出し２（h2）～見出し６(h6)までワンクリックで挿入できるので、非常に便利です。
こんな機能がありながら私は無視をしていて「今日は大見出しがh3で、中見出しはh5でいいか」みたいなその日の気分に合わせて適当にやっていました・・・反省です。
これから時間があるときに少しずつ変更していこうと思っています。はてなブログのサイトから記事を書いている人は注意が必要ですね。
それでは、私がカスタマイズしたh2～h4の見出しをどうぞ！
私がカスタマイズした３つの見出し
見出しはすごく気になってしまうので、何度も変更を繰り返しました。
やっぱりWord Pressのブログの見出しがきれいで分かりやすいので、それに似たような見出しに落ち着きました。
私が主に使っている見出しは３つです。
では、それぞれのコードをご紹介します。
大きな見出し
css
中ぐらいの見出し
css
小さな見出し
css
h5とh6もカスタマイズしていてどれも気に入っていますが、基本的には大見出しと中見出しのみを使うことがほとんどです。
目次の変更
目次は緑色の枠に、リストは赤い文字に変更しました。
まずは、目次全体のカスタマイズからどうぞ。
目次全体のカスタマイズ
全体を緑色にして、目次の手前にアイコンをつけました。アイコンに関しては「font-awesome」のサイトから使わせていただいています。
こちらのサイトにはたくさんのアイコンがあって、私もブログの中でいくつか使っています。無料版と有料版がありますが、無料版でもたくさんのアイコンを使うことができますので、是非使ってみてください。
使うと言っても登録等はなく、その代わりはてなブログの「設定」→「詳細設定」→「headに要素を追加」の部分に以下のコードを貼り付けておく必要があります。ここでは詳細は省略しますので、気になる方は「font-awesome」で検索してみてください。
これを貼った状態で、目次のカスタマイズは以下のコードになります。
css
目次の見出しリストのカスタマイズ
目次に大見出しや中見出しがある状態で表示されるとき、デフォルトでは次のようになります。
中見出しや小見出しの前に自動的に数字が打たれてしまうのですが、これが数字だらけで見にくいなと思って変更しました。
まず、見出しの前の数字を消して、それを「－」にし、色も赤色にしました。こんな感じです。
こちらのコードは以下のようになります。
css
まとめ
見出しと目次のカスタマイズいかがでしたでしょうか？
変更すると少しおしゃれな形になると思います。カスタマイズはやり始めるときりがないので疲れますね。
今はこのデザインが気に入っていますが、またお気に入りが見つかれば変更してみるかもしれません。
結構みなさんのブログを拝見させていただいて、気に入ったものがあればチェックしています！
また遊びに行かせていただきますので、その時はよろしくお願いします。
最後まで読んでいただき、ありがとうございました。
