目次を作成するメリットと作成方法(HTML)
「目次を作成したいけれど、作り方が分からない。」
「目次を作成したほうが良いと聞くけど、どうして？」
そのような方に向けて、目次を作成するメリットと、目次の作成方法についてお伝えします。
目次を作成するメリット
アナタのブログにとって目次はガイドツアーでもあり、営業も兼ねます。
どういう意味か、順を追って説明します。
【特化記事なら】目次はブログのガイドツアー
例えば、「東京駅から東京スカイツリーまでの行き方を教えて」と聞かれたらどうしますか？
まずはゴールであるスカイツリーを検索し、スカイツリーの最寄り駅、そして最寄り駅からスカイツリーまでの行き方を調べると思います。
次に、スカイツリーの最寄り駅が「押上駅」か「とうきょうスカイツリー駅」と分かったら、次は乗換検索サイトで、東京駅から「押上駅」か「とうきょうスカイツリー駅」までの乗り換えを検索するでしょう。
その行動がブログにとっての目次に当たります。
東京駅から東京スカイツリーまでの行き方
【東京メトロ丸ノ内線】東京→大手町
【東京メトロ半蔵門線】大手町→押上
【徒歩３分】押上→東京スカイツリー
こう書くだけで、東京スカイツリーまでの行き方は分かりますよね？
目次はこのようにゴールまでの道のりを分かりやすくしてくれます。
目次を書くことでもう一つメリットがあります。
アナタのブログを見ている人にとって、東京駅からではなく、押上駅から東京スカイツリーまでの行き先だけを知りたい人がいます。
検索する人は自分が欲しい情報をすぐに知りたいので、そのガイドとしても目次は役に立ちます。
【雑記記事なら】目次はブログの営業担当
1つの記事で様々な内容を紹介する記事があると思います。
例えばおすすめゲームを紹介する記事にしてもRPGやシミュレーションといったジャンルを分けて紹介する記事などです。
「おすすめ ゲーム」で検索して来た人はたくさんいても、好きなゲームのジャンルは人それぞれです。
「アナタのブログは何を紹介しているの？」という質問に対して、「目次」は「私のブログではこういう記事を扱っています。」と言った営業担当にもなります。
目次の作成方法(HTMLベースで作成する場合)
では「目次をどのように作成したら良いの？」について、私なりに心がけている事をお伝えします。
見出しを決めよう
アナタがスカイツリーを紹介したいとして、どのような情報をおすすめしたいかジャンル分けをします。
「スカイツリーの歴史について」、「スカイツリーの入場方法について」など、いくつか書きだしたらそれらを見出しにします。
この時に注意したいのが、「見出しのランクが揃っているか」です。
例えば下記を目次にすると違和感を感じませんか？
東京スカイツリーについて
- 東京スカイツリーの歴史について
- 押上駅からスカイツリーまでの行き方
- 東京スカイツリーの入場方法について
- 東京スカイツリー周辺のおすすめ施設について
唐突に「押上駅」が出てきましたが、東京スカイツリーを知らない人にとっては「押上駅」が何なのかすら分かりません。
ここの見出しは「東京スカイツリーのアクセス」とした上で、その項目の中で「押上駅」からの道順を伝えるべきです。
見出しにidを付けよう
見出しを決めたら、見出しにidを設定します。
ブログやWebページを作成するために必要な「HTML」では見出しの定義は決められており、「h」タグを使用します。
種類はh1～h6まであって、数字が小さいほど大きな見出しになります。
<h1>見出し</h1> と書くとこのように大きな見出しになります。
見出し
このようにして見出しを作成したら、見出しにidを付けていきます。
id名は好きなように付けられるので、分かりやすいid名を設定します。
id名の付け方は見出しタグ「h〇」の後に id = "id名"を付けます。
例として、見出し「東京スカイツリーの歴史について」をh3の見出しで、id名を「skyTreeHistory」とします。
- 見出しタイトル「東京スカイツリーの歴史について」
- 見出しのレベルはh3
- id名は「skyTreeHisory」
<h3 id="skyTreeHistory">東京スカイツリーの歴史について</h3>
と表せます。これらを見出し毎に異なるid名で設定していきます。
目次を作成しよう
各見出しにid名を付けたら、最後に目次を作成します。
目次の作成方法はいくつかありますが、「HTML」でリスト形式を表現する「UL」タグ、
もしくは「OL」タグを使った目次の作成方法について説明します。
「UL」タグは「Unordered List」の略で、箇条書きなどの順序のないリストに使用し、
「OL」タグは「Ordered List」の略で、料理のレシピなど順序のあるリストで使用します。
「ul」タグで順序のないリスト全体を囲み、項目はList itemを表す「li」タグで囲みます。
そして、それらをクリックしたらその目次へ飛ばしてあげたいので、Anchorを表す「a」タグで飛び先を指定してあげます。
この飛び先が先ほど見出しで設定したid名となり、id名に飛ばしてあげたいときには先頭に「#」を付けます。
このようにして、目次の作成と各見出しへのリンクが可能になりました。
これだけだと目次が質素なので、目次を装飾したいのであれば、リンクの装飾についてまとめた記事がありますので、宜しければこちらも見てください。
また、Webページやブログを記述するHTMLや装飾する「CSS」について詳しく知りたい方は「HTML5&CSS3レッスンブック」がおススメです。
ブログに目次を作成して、より分かりやすく、より親切なブログライフを！
