ブログ運営

目次を作成するメリットと作成方法(HTML)

 

目次を作成するメリットと作成方法(HTML)

 

「目次を作成したいけれど、作り方が分からない。」
「目次を作成したほうが良いと聞くけど、どうして?」
そのような方に向けて、目次を作成するメリットと、目次の作成方法についてお伝えします。

目次を作成するメリット

アナタのブログにとって目次はガイドツアーでもあり、営業も兼ねます。
どういう意味か、順を追って説明します。

【特化記事なら】目次はブログのガイドツアー

例えば、「東京駅から東京スカイツリーまでの行き方を教えて」と聞かれたらどうしますか?
まずはゴールであるスカイツリーを検索し、スカイツリーの最寄り駅、そして最寄り駅からスカイツリーまでの行き方を調べると思います。

次に、スカイツリーの最寄り駅が「押上駅」か「とうきょうスカイツリー駅」と分かったら、次は乗換検索サイトで、東京駅から「押上駅」か「とうきょうスカイツリー駅」までの乗り換えを検索するでしょう。
その行動がブログにとっての目次に当たります。

東京駅から東京スカイツリーまでの行き方
【東京メトロ丸ノ内線】東京→大手町
【東京メトロ半蔵門線】大手町→押上
【徒歩3分】押上→東京スカイツリー

こう書くだけで、東京スカイツリーまでの行き方は分かりますよね?
目次はこのようにゴールまでの道のりを分かりやすくしてくれます。

目次を書くことでもう一つメリットがあります。
アナタのブログを見ている人にとって、東京駅からではなく、押上駅から東京スカイツリーまでの行き先だけを知りたい人がいます。
検索する人は自分が欲しい情報をすぐに知りたいので、そのガイドとしても目次は役に立ちます。

【雑記記事なら】目次はブログの営業担当

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レッスンブック」がおススメです。

ブログに目次を作成して、より分かりやすく、より親切なブログライフを!

 







人気の記事

1

サンダー直流(DC)と交流(AC)の違いって分かりますか? かみなりん家庭用のコンセントは交流(AC)だよね。乾電池はなんとなくDC(直流)というイメージです。 サンダー改めて聞かれると、交流と直流の ...

【オペアンプ】 反転増幅回路の回路図アイキャッチ 2

かみなりんオペアンプの反転増幅回路ってどういう特徴があるの? サンダー反転増幅回路は文字通り、入力電圧の符号を反転、増幅する回路になります。 かみなりん反転して、増幅するから反転増幅回路なんだね。じゃ ...

アノードコモンとカソードコモン 3

サンダー「アノードコモン」と「カソードコモン」の違い分かりますか? かみなりんえーっと、アノードがプラス側、カソードがマイナス側で・・・コモンってなんだっけ? サンダー改めて聞かれると、どっちがどうだ ...

4

かみなりんアフィリエイトで成果が発生しない!? という問題が起きているようですね。 アフィリエイトが発生しないというのは死活問題ですね。   原因はどうやら、アンカーリンク内のtarget= ...

旅行やアルバイト等の 紹介にバリューコマースの『MyLinkBox』が超便利!! 5

サンダーバリューコマースから2019年6月5日に『MyLinkBox』がリリースされました! かみなりんその『MyLinkBox』ってなに? サンダー『カエレバ』や『Rinker』はご存知でしょうか? ...

miMind使いかたアイキャッチ 6

サンダーマインドマップはご存知ですか?   放射状に枝が伸びていくアレですよね?   頭の整理をするのに良く使います   私もよく情報を整理するためにマインドマップを作成 ...

Web(ウェブ)開発の学習にオススメなUdemyコース3選 7

サンダー世界最大級のオンライン学習プラットフォームの【Udemy】はご存知ですか? アメリカのシリコンバレー発のオンライン学習サイトで、日本ではベネッセが運営しています。 私自身もWeb開発やPyth ...

ブレッドボード の使い方のアイキャッチ 8

サンダーブレッドボードって知ってる? かみなりん電子工作でハンダ付けせずに、手軽に電子回路が組めるボードだよね? サンダーそう、今回はそのブレッドボードの使い方を紹介します。ブレッドボードを使ってLE ...

箇条書きタグ自動追加ツール 9

【このツールの目的】 箇条書きタグ(ulタグもしくはolタグ)を自動で追加するツールです。 listタグも自動で追加します。 【箇条書きの種類選択】 数字無し箇条書き(ul) ・箇条書き数字有り箇条書 ...

LED抵抗計算機 10

LED抵抗自動計算機 下図のように、LED1個をつなぐとき、LEDに流したい電流から抵抗値を求める計算機です。   LED抵抗計算機 ↓電源電圧【例】5(V) ↓LEDの電圧降下【例】2(V ...

-ブログ運営
-,