ブログに目次は必要？
まず一番重要な疑問として、そもそもブログの目次は必要なのかということです。
この疑問に対する回答は「記事による」です。
例えば500文字程度でまとめている時事ニュースであれば目次は必要ありませんし、文字数が多くて見出しもたくさん使っている記事では目次が必要となってきます。
記事の全貌をカンタンに確認できる
記事に目次を用意することによって、今から読もうとしている記事がどのようなことがが書かれている記事なのか、簡単に読者に知らせることができます。
目次があるだけで
- 気軽に読める記事かどうか
- 知りたいことに対して詳しく解説されている記事かどうか
- 本当に知りたい情報が書かれているかどうか
ですが、その反面目次を見て知りたい内容が書いていないとわかった場合は即離脱してしまう可能性があります。
もちろんはてなブログ運営者にとって、目次の有無に関わらず最後までしっかり読んでほしいという気持ちが強いでしょう。
しかしそのことを気にしてユーザーの利便性を無視すると、SEO評価に悪影響が及ぶ可能性があります。
「読書に必要とされるコンテンツ」も重要ですが、そのコンテンツの中にユーザーの利便性(ユーザーエクスペリエンス)も含まれていると言われています。
ですので目次の影響で即離脱される可能性のことを考慮しても、ユーザーのことを考えて目次を設置してあげることは大切です。
知りたい項目だけ読ませられる
まとめ記事など1万文字を有に超えるような、ボリュームが非常に大きい記事の場合、記事の最初から最後まで全て読まれることはそう多くありません。
ほとんどの人は途中で集中力が切れて流し読みしてしまうほか、本当に知りたい事が書いてある場所がどこだかわからないという問題が起きてしまいます。
例えば「はてなブログの評判が知りたい人」が「はてなブログのあらゆることがまとめられていて、後半に評判もまとめられている数万文字の記事」にアクセスしたとしましょう。
この場合において読者が一番知りたいことははてなブログの評判ですが、目次がないとどこに評判がまとめられているのかわからない、ひたすらスクロールして無駄な時間をつかわせてしまいます。
しかし目次があればどこに評判に関することが書かれてあるかわかるほか、目次に当てられているリンクをクリック・タップするだけで評判が書かれている場所に移動できます。
リッチスニペットに反映される可能性がある
これにより他の検索結果と比較して差別化することができるため、若干ではありますが優位に立てる可能性があります。
ただし目標設定したら絶対に立地する別で反映されるのかと言うとそうではありません。検索キーワードによっては全く表示されないことも多く、Googleアルゴリズムが目次の一部を表示すべきではないと判断した場合は、他のページのディスクリプションには目次が含まれていたとしても自分のページ(記事)には表示されないことがあります。
検索結果に反映されないことは多いものの、目次がない場合は表示されるチャンスが回ってくることが絶対にないので、ユーザーに対する配慮・SEOどちらの観点でも目次をを設置しておくことは大切です。
はてなブログの目次の作り方
はてなブログに目次を設置するメリットについてある程度理解できたでしょうか？それでは早速はてなブログで目次を作る方法を解説していきます。
見出しを設定する
記事内に見出しがない場合は編集画面左上の[見出し]をクリックして見出しを追加してください。
もしくは見出しに設定してテキストを選択して[Shift+Alt+2キー]を押すことでも見出し設定が可能です。
![カーソル合わせていた場所に「[:contents]」という項目が追加](http://cdn2.aprico-media.com/production/imgs/images/000/040/290/original.png?1569222194)
記事が読み込まれた時に、「[:contents]」がある箇所に記事内の見出しに従って目次が作成されるようになります。
このようにはてなブログでは見出しさえ設定しておけば、簡単に目次が作成できるようになっています。
大見出しだけ目次にすることは基本的にできない
見出しが多いから大見出しだけ目次化したいということもあるでしょう。ですが通常の目次作成方法では大見出しだけの目次を作成することはできません。
ですがそれはあくまで通常の作成方法であり、少し変わったやり方をすれば大見出しだけの目次をはてなブログで作成することが可能です。
やり方については後述する「はてなブログの目次のデザインのカスタマイズ方法」の後半にて紹介しています。
はてなブログの目次のデザインのカスタマイズ方法
ここからは目次のデザインをカスタマイズする方法について紹介します。カスタマイズする方法は理解すれば簡単ですが、初めて触る場合はやや難しいです。
カスタマイズの際CSSという言語を使いますが、分からない場合は記事内に紹介しているCSSを丸ごとコピーするようにしてください。
1文字でも抜けると正常に動作しないので、コピー間違いにも気をつけましょう。
ブログデザインをカスタマイズする方法
目次のデザインをカスタマイズすることにおいて、CSSを編集する画面を知っておく必要があります。
![[変更を保存する]の下にあるスパナアイコンをクリック](http://cdn2.aprico-media.com/production/imgs/images/000/040/293/original.png?1569222203)
![表示された項目の中に[デザインCSS]があるので、それをクリック](http://cdn2.aprico-media.com/production/imgs/images/000/040/294/original.png?1569222205)
はじめから少し書き込まれていることがありますが、これらは削除しないようにしてください。
追加されている内容によっては既存のデザインが崩れてしまう可能性があります。
目次のカスタマイズ用CSSの紹介
それでは早速、目次の見た目を変更できるCSSを紹介します。どれもコピーペーストだけで使えるので、気に入ったものがあれば試してみてください。
外枠の角を丸くする
.table-of-contents {
padding: 15px 10px 15px 35px; /* 枠内の余白（上右下左） */
font-size: 100%; /* 文字サイズ */
border:solid 2px #7DB4EC; /* 線の種類と色 */
background:#f7f7f7; /* 背景 */
border-radius:8px;/* 数字が大きいほど丸くなる */
}
.table-of-contents:before {
content: "目次";
font-size: 110%;
font-weight:bold; /* 文字の太さ 通常はnormal */
color:#000; /* 文字の色 */
}
とてもシンプルなコードなので、色の変更方法さえわかれば自由に枠線の色や目次の背景色を変更できます。
リストアイコンを変更する
はてなブログの目次ではナンバリングされておらず、ただのリストとして表示されます。
.table-of-contents {
margin-left: 0;
padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字サイズ */
border:dotted 1px #777; /* 線の種類と色 */
background:#f7f7f7; /* 背景 */
}
.table-of-contents:before {
content: "目次";
font-size: 110%;
font-weight:bold; /* 文字の太さ 通常はnormal */
color:#000; /* 文字の色 */
}
/*大見出し*/
.table-of-contents li{
font-weight:bold; /* 通常はnormal */
list-style-type:decimal; /* マークの種類 */
}
/*中見出し*/
.table-of-contents li ul li{
margin-left:20px;
font-weight:normal;
list-style-type:disc;
}
/*小見出し*/
.table-of-contents li ul li ul li{
list-style-type:lower-latin;
}
大見出しがナンバリングされるだけで、読者が「この記事のボリュームはどれくらいあるか」を判断しやすくなるため非常におすすめのカスタマイズです。
他のどのカスタマイズよりも、最低限このカスタマイズさえしておけば、ユーザビリティは向上するでしょう。
目次をグラフィカルに目立たせる
はてなブログの目次は良くも悪くも地味です。
/*目次のデザイン変更*/
.entry-content .table-of-contents {
position:relative;
margin-left: 0;
padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字の大きさ */
font-weight:bold;
list-style-type:decimal; /*数字以外が良ければ変更 */
background:#fff;
border-top:40px solid #90caf3; /* 「この記事の目次」周りの色 */
border-left:2px solid #90caf3; /* 線の太さ */
border-right:2px solid #90caf3;
border-bottom:2px solid #90caf3;
line-height: 200%; /* 行間 */
border-radius: 3px; /* 角丸にしない場合は不要 */
color:#444; /* 数字（マーク色変更） */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
font-family: 'blogicon';
content: "\f039 この記事の目次";
display: block;
font-size: 130%;
font-weight: bold;
position: absolute;
top: -40px;/*上からの位置調整*/
left: 0px; /*左からの位置調整*/
color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
color:#444; /* 目次リスト部分のテキスト色 */
text-decoration:none; /* リンクの下線をつけたくない場合 */
}
目次部分にアイコンが付き、ちょっとした書籍の目次のようにできるため、こちらの方法もおすすめです。
大見出しだけの目次を作成する方法
はてなブログの目次は記事内にある見出し全てを使って作成されるため、目次の挿入設定で大見出しのみの目次を作ることはできません。
そもそも目次の設定が存在しないため、目次をカスタマイズしようと思うとCSSを編集するしかないのです。
もし大見出しだけの目次を作りたいなら以下のCSSをデザインのカスタマイズから追加してください。
ul.table-of-contents > li > ul {
display: none;
}
これで大見出しだけの目次が作成できます。
特定の記事だけ大見出しのみの目次を作成する方法
先ほどの方法はすべての記事の目次影響するため、一部の記事だけ小見出しを含めた目次を作成したいといった場面に対応できません。
そういう場合はデザインのカスタマイズにCSSを追加するのではなく、記事ごとにCSSを追加します。
![投稿編集画面の[HTML編集]を選択](http://cdn2.aprico-media.com/production/imgs/images/000/040/298/original.png?1569222224)
次にテキスト部分の末尾に以下のCSSを追加してください。
<style><!--
ul.table-of-contents > li > ul {
display: none;
}
--></style>
このように記事ごとにCSSを個別設定することもできるため、特定の記事だけ大見出しのみの目次を作成するということが可能です。
こちらの方法を使う場合は、デザインのカスタマイズCSSから、大見出しのみの目次を作成するコードは削除しておいてください。
目次のデザインをカスタマイズする際の注意点
おしゃれな目次にできた！でもやっぱりかっこいい見出しに変えたいというときがあるでしょう。
こういう時は必ず以前追加した目次のCSSを削除してから新しいCSSを追加するようにしてください。
そうしないと複数のCSSが競合してしまい、デザインが崩れてしまう可能性があります。
CSSに関して知識があるなら自力で解決できますが、すでに出来上がったものをコピーペーストしているだけで書き方がわかっていない人なら、自力で修正することはまず不可能でしょう。
ですので最低限自分だけでもわかるように、どこからどこまでが目次のCSSなのかわかるようにしておいてください。
- 改行を増やして分かりやすくする
- コメントを入れる
コメントを入れる場合は<!--と-->の間にテキストを入れることでコメント化できます
<!--これはコメントです-->
以前挿入したCSSを削除することは大事とわかっていても、削除してはいけない他のシリーズを削除してしまっては元も子もないので、事故が起こらないように対策しておきましょう。
まとめ
ブログにおいての目次は「なくて困ることはないが、あると便利」というかゆいところに手が届くコンテンツのひとつです。
はてなブログでは1記事1記事目次を設定する必要があるので、すでに公開している記事に目次を付ける場合は少し大変です。
ですがそういった小さな取り組みがユーザーにとって役に立つことがあるので、記事には見出しを設定して目次を設定すると良いでしょう。
目次の使い方や設置の仕方次第では平均滞在時間が上がるなど変化が起きる可能性もあるので、アクセス解析をしながら目次効果を検証することをおすすめします。