文章量が大きくなればなるほど、セクションが増えれば増えるほど読者は記事内容を把握しづらくなります。
また、その文章の中でも自分が興味を惹かれた部分だけをかいつまんで読みたい方もいるはずです。
このような読者さんのためにも
「目次」を使った記事を作りましょう
というお話。
目次を入れる
まずは[(ｺﾛﾝ)contents]を入れよう
本題です。これは私のブログを開設してから４本目の記事です。まだ今回の手法での修正作業が済んでないので、例に挙げました。
画面は修正前のプレビューです。
次にエディター画面。ここで「[:contents]」を挿入します。これを打ち込むと、本文内に記述した各種見出し（大・中・小）が目次形式で展開します。その上に書いた「目次」は、私が独自にふっているものです。これはなくても大丈夫。
実際に展開した画面を見てみます。
こうなります。ズラリと展開されましたね。
※コンテンツの文字列で見出しが展開するのは、はてなブログのシステムです。
※CSSカスタマイズで見やすくなっています。デフォルトはもっと淡泊です。
普段から「目次」を使うべし
適切な目次の挿入はユーザビリティを向上させます。
記事作りのスタイルは人それぞれでしょうが、個人的には目次があって整っている方が見やすい印象を受けます。
もちろん過去記事修正時でも適切な見出しをつけて記事を見やすくすることも可能です。今からでも遅くない作業ですよ。
結語
いかがでしたでしょうか、「目次を使った記事作り」。
「私は目次無しのスタイルを貫く！」ということであれば無理強いするものではないのですが、訪問者の利便性を第一に考えた場合は文章内容が多岐にわたる場合は入れておいた方が無難かなと思うのですよね。
さらに僕の場合ですが最初の見出し下に自動で広告を挿入するスクリプトを入れておりますので、記事を更新する際にはよほどのことがない限りルーチンで目次を設定せざるを得ないのですよね。
目次は文章内容を組み立てる際のアウトライン作成にも欠かせない要素です。書き出して勢いで作品を仕上げるクリエイティブな方も少なからずいらっしゃるのでしょうが、プロットを意識しながら文章を作るという少し進んだ段階のことを考えれば、目次というのは使い慣れておいて損はないって考えます(^^
Chrome拡張機能でらくらく目次挿入
ブラウザにクロームを使用している方は、こちらのはてなブログに特化した拡張機能を強くお勧めします。今回紹介した見出しもワンクリックで挿入可能、さらにはてなブログではデフォルトでh3タグになってしまう問題（関連記事参照）を解決してくれる機能など、はてなブロガーには大変ありがたい機能が満載です。是非とも導入してみてください。
はてな公式も「目次」に対応
エディターのツールバーに設置されました。
入れたい場所をポイントして、アイコンをクリックすると(contents:)が入ります。
目次のカスタマイズを公開しているサイトの紹介
レスポンシブデザイン向け、はてなブログ公式目次のデザインカスタマイズ - ばさのーと
はてなブログのカスタマイズを精力的に研究しているつばささんのサイトで、公式目次のカスタマイズを公開していますので参考にしてください。
こちらも合わせてどうぞ
