Facebook Twitter RSS
ブログ記事に「目次」を付けよう!メリットや作り方をご紹介

ブログ記事に「目次」を付けよう!メリットや作り方をご紹介

この記事のタイトルとURLをコピーする
ブログ記事に「目次」を付けよう!メリットや作り方をご紹介
https://webkikaku.co.jp/blog/attract/table-of-contents/
facebook twitter hatena Pocket

目次とは

目次とはページの見出しにページ内リンクをするような形で、見出しをリスト化したものです。既に見かけたと思いますが、当サイトの目次は下図のように表示しています。

目次表示例

ブログ記事に目次を付けるメリット

ユーザーの利便性を高める

幼い頃から誰もが小説や教科書など、自然と目次を利用しているはずですので、その存在意義については言わずもがなかと思います。

しかし紙媒体では一般的でも、ブログとなると「目次」を全ての管理者が用意してくれているわけではありません。元々ブログは日記のようなものとして広まってきたという背景もあってか、もしかすると「ブログ=本」といった認識になっていないのかもしれませんね。日記にわざわざ目次を付けたりはしませんから。

しかし企業が発信するようなブログのように、ノウハウなどについて発信する場合は、テキスト量が増えることが多く、そういった際には目次があるとユーザーにとってブログを読む際の利便性がとても向上します。

Googleの検索結果に「〜に移動」と表示される

「〜に移動」

上図のような検索結果をご覧になったことはないでしょうか。実はこれ、見出しにidを付け、ページ内リンクを設定することで表示されるようになります。

なぜこのような検索結果が実装されているか、事例を挙げてご説明しますね。

弊社の発信する記事で、

「日本語Webフォントを使い倒そう!モリサワ・Adobe・フォントワークスのWebフォント使い方・価格&イケてるデザイン15選!」
https://webkikaku.co.jp/blog/webdesign/jp-webfont/

このような記事があります。

この記事では、様々なWebフォントを紹介させてもらっているのですが、例えば「モリサワは使っていないけど、フォントワークスのWebフォントの使い方が知りたい」というユーザーがいたとします。この場合、モリサワやAdobeの情報はノイズでしかありませんよね。

こういったニーズのユーザーに対し、ページ内で該当する内容を探す手間を省いてあげるべく、このような検索結果を実装しているというわけです。

目次の作り方(html)

では実際に目次を作るにはどうしたら良いのでしょうか。それにはhtmlを編集する必要があります。基本は目次と見出しのIDを一緒にし、リンクで繋ぐイメージです。

htmlの編集例

↓目次側でページ内リンクを設定
<a href=“#midashi1”>見出し1</a>
<a href=“#midashi2”>見出し2</a>
<a href=“#midashi3”>見出し3</a>

↓見出し側の設定
<h2 id=“midashi1”>見出し1<h2>

この際のID名に特に決まりはありませんので任意のID名を付けて下さい。これで目次として機能しますが、あとはユーザーが見やすいようにリストにしてCSSを付けてデザインをしてあげましょう。

WordPressなら簡単に目次を付けられる(プラグイン)

WordPressであれば、「Table of Contents Plus」というプラグインを利用することで、簡単に目次を付けることができますので、試してみて下さい。

↓記事に目次を自動作成するWordPressプラグイン「Table of Contents Plus」使い方・設定
https://webkikaku.co.jp/blog/wordpress/table-of-contents-plus/

この記事のタイトルとURLをコピーする
ブログ記事に「目次」を付けよう!メリットや作り方をご紹介
https://webkikaku.co.jp/blog/attract/table-of-contents/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したウェブマーケティング支援会社。マーケットやビジネスモデルに合わせ一社一社に合わせた集客戦略をご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ