こちらでは目次デザインの変更について扱います。
「見出しだけで十分見やすいし目次は使わなくてもいいよね」
「目次って便利だけど設置するのは大変なんでしょ？」
そう思っていませんか？
目次があるだけでブログがすごく見やすくなります！
目次の効果
まず読者は「情報がほしいだけ」「解決する方法が知りたいだけ」というのを念頭においておく必要があります。別に長々と文章を読みたいわけじゃなく、さくっと結果だけ知りたいだけなんです。
読者の心理行動について具体的にあげてみると以下になります。
- 知りたい情報を検索
- サイトにアクセス
- 知りたい情報を探す
- 目的の情報が書いてある見出しまで画面をスクロール
- 内容を確認する
この一連の行動をスムーズにさせるのが、そう、目次なんです。
目次があれば、見出しが一覧で表示されているので、記事のどこにどんな情報が書かれているか一目瞭然で分かります。
さらには目次と見出しはリンクするので、目次内の見出しをクリックするだけで対象の見出しまでジャンプすることが可能なんです。
この行動心理から目次はブログに訪れた方が必ず見る項目といって過言ではありません。
その目次のデザインが見づらかったりしたらどうでしょう。
それだけで記事を読もうという気がそれちゃいますよね。
だから目次のデザインを考えることが重要なんです。
目次の作り方
はてなブログで目次を設置するのはとても簡単です。はてなブログの標準機能でツールバーに「目次」アイコンが用意されています。
このアイコンを選択するだけで、目次の挿入が可能です。
実際に挿入してみると[comment]という時が挿入されるだけですが、実際にプレビューしてみると目次が挿入されていることが分かります。
＜Tips＞
目次の前後は改行による空行が反映されないことがあります。
その場合はその行に<ｂｒ>というhtmlタグを挿入すれば解決します。お試しあれ。
※ｂｒは小文字に変換してください。
目次のデザイン変更方法
「デザインCSS」へカスタマイズしたCSS構文を投入してください。具体的な項目はのちのち追記していきます。
目次デザインの見本
デザインの見本は以下ブログが参考になります。
kimix.hatenablog.com
まとめ
短い内容でしたが、目次を変更するメリットについては分かっていただけたかと思います。ぜひ皆さんのセンスで見やすくおしゃれな目次デザインを考えてみてください。
ではまた。
