2020/02/10ブログに目次は必要か検討している方へブログの記事には、見出しを設置した方がいいのかな?簡単にできる見出しの作り方も含めて教えて欲しいな。本記事では、このような疑問に答えます。ブログ歴10年のブロガーです。今回は、ブログの記事でナビゲーション機能を果たす目次の作り方を解説します。目次の表示を確認する効果的な目次を作るためのコツ記事は見出しから作る目次は長すぎないように目次は常に開いておくまとめブログに目次を設置する効果とは?ブログの目次とは、記事の見出しをリンク化して、リスト形式にまとめたものです。目次は記事のナビゲーションとしての役割を持っていて、次のような効果があります。記事の概要がすぐにわかる読みたい場所に移動できるそれぞれの効果を確認していきましょう。記事の概要がすぐにわかる読者は、冒頭にある目次を確認するだけで、記事の概要がすぐにわかります。通常、検索結果からブログに訪れる読者は、短時間で情報収集したいと考えています。目次により求めている情報が記事に書かれているかを、本文を読む前に把握できるので、迷うことなく読み進めることが可能です。読みたい場所に移動できる読者は、目次の気になる項目をクリックすることで、読みたい場所に移動できます。記事を最初から全て読んでもらえればベストですが、実際は必要な情報だけを知りたいというような人も多くいます。上記の画像は、ヒートマップを使って目次のクリック状況を調べたもので、想像以上に利用されていることが確認できます。ブログの目次の作り方【WordPress】この章では、ブログの目次の作り方を具体的な手順で説明していきます。WordPressを利用している場合は、プラグインを入れるだけで簡単に目次が作れます。プラグインを追加するプラグインを設定する目次の表示を確認する各手順のやり方を確認しましょう。WordPressとは、自由にカスタマイズが可能で高機能なブログシステムです。Contentsをインストールします。Contentsは、記事の見出しから目次を自動生成してくれるプラグインで、設定も簡単なので非常に使いやすいです。管理画面の「プラグイン→新規追加」か「下記リンクからダウンロード」して、インストールしてください。Contentsの初期設定をしていきましょう。WordPressの管理画面で「設定→目次」の順にクリックしてください。一例ですが、おすすめの設定例を紹介します。目次を有効にする投稿形式を選択します。「投稿」にチェックを入れましょう。自動挿入サポート有効化した投稿形式から、目次を自動挿入するものを選択します。こちらも「投稿」にチェックを入れておけばOKです。目次を挿入する位置を設定します。デフォルトの「最初の見出しの前」で大丈夫です。目次を挿入する条件を設定します。「2〜3件」くらいにしておきましょう。目次の最上部に見出しを表示するか選択します。チェックを入れたままでOKです。見出しラベル目次の最上部に表示する見出しの文言を入力できます。わかりやすいように、「クリックできる目次」と変更しています。目次を折りたたみ(非表示)にできるかを選択します。チェックなしが推奨です。目次の初期状態を折りたたみ(非表示)にするか選択します。チェックなしが推奨です。見出しの階層ごとに字下げ表示するかを選択します。チェックを入れたままが推奨です。目次の各項目の先頭につける数字などを選択します。好みで変えてみてください。「ユーザー定義」を選んでください。目次の表示幅を入力します。「95%」と入力してください。回り込み目次に回り込みを設定するかを選択できます。「なし」のままでOKです。タイトル文字サイズ最上部に表示する見出しのサイズを入力できます。好みで変えてみてください。タイトル文字の太さ最上部に表示する見出しの太さを選択します。「Medium」か「Bold」がおすすめです。テーマ目次の背景色などを変更できます。好みのテーマを選択してみてください。カスタムテーマデフォルト色ではなく自由に色を変更したい場合は、こちらで設定できます。目次の各項目に割り当てられるURLを小文字にするかどうかを選択できます。ハイフネーション目次の各項目に割り当てられるURLで「_」ではなく「-」を使用することが可能です。ホームページブログのトップページでも目次を表示できます。通常は、チェック不要です。CSS目次のデザインにオリジナルCSSを使いたい場合は、チェックを入れてください。見出し目次にどの階層の見出しまで表示するかを設定します。通常は、「見出し2」と「見出し3」にチェックを入れましょう。除外する見出し目次に表示したくない見出しタイトルがある場合に、設定できます。スムーズスクロールのオフセットブログで固定表示している領域がある場合に、クリックした際の見出しへの移動時に、その分をオフセットできます。モバイルのスムーズスクロールのオフセット見出しへの移動時のオフセットをスマホ表示用にも設定できます。特定のパス(URL)で目次を非表示にする場合に、設定が可能です。目次の各項目に割り当てられるURLの接頭辞を変更できます。Contentsを導入すると、記事の見出しから目次が自動生成されます。実際に記事を開いてみて、目次の表示を確認してみましょう。各項目をクリックすると、その見出しに移動することもできます。目次がイメージと異なっている場合は、設定画面で目次の表示を調整してみてください。効果的な目次を作るためのコツここからは、効果的な目次を作るための3つのコツについて解説します。目次はプラグインの導入だけで完成というわけではなく、使いやすくなるよう調整していくことが利便性を高めます。記事は見出しから作る目次は長すぎないように目次は常に開いておく目次のコツを1つずつ深掘りしていきます。記事は見出しから作る記事を書く際は、見出しから先に書いて、最初に話の展開を固めましょう。わかりやすい構成の見出しを作ることが、効果的な目次を作ることに直結します。見出しにも、「階層構造を正しく」「1行以内に収める」というコツがあるので、以下の関連記事も併せて読んでみてください。続きを見る目次は長すぎないように目次は記事の概要を手軽に把握するものなので、長くなりすぎないようにするべきです。スマホ表示で注意が必要です。スクロールしても延々と目次が続くような記事だと、正直読む気がなくなります。大まかな目安として、スマホの1画面には収まるような目次の分量に仕上げましょう。目次は常に開いておく目次はデフォルトで折りたたみ表示にもできるのですが、常に開いておきましょう。ブログの読者は目次をかなり見ていますし、クリックもしてくれるので、折りたたみ表示にするのはもったいないです。Contentsの設定画面で「折りたたみ表示」と「初期状態」のチェックを外せばOKです。まとめ今回はブログの目次について、設置する効果や実際の作り方を解説しました。記事のポイントをまとめます。Contentsを導入するだけでOKですわかりやすい目次を作るには、わかりやすい見出しを作ることが重要です目次はかなりクリックされるので、最初から開いておくようにしましょうブログの目次は、記事内でのユーザーの利便性を高めるために必須の要素です。WordPressでは他にも便利な機能を追加できるので、高機能テーマを確認しましょう。続きを見る以上、「ブログの記事での目次の作り方」でした。@kashiwamichi3ブログと投資で人生をレベルアップさせた副業サラリーマンです。ブログアフィリエイト、米国株投資が持ちネタ。サラリーマンとして働きながら、人生を充実させるノウハウを発信しています。