今回はWordPressでブログを作成しているかた向け、ブログの記事を見やすくすために必須の『目次』機能の設定に関してまとめていきます
WordPressの無料テーマCocoonユーザーであれば簡単に目次の設定ができます。もしCocoonユーザーでなくてもWordPressであればプラグインを使うことで簡単に設定することができますので参考にしてみてください
特にWordPressを使っている初心者の方に関しては目次の設定方法がわからない場合もあるかと思いますので
是非参考にしていただきたいと思います！
※本記事で紹介している情報は執筆時点のもので、閲覧時点では変更になっている場合がございます。
ご利用の環境（ブラウザ、サーバー、プラグイン、テーマ、またはそのバージョンや設定、WordPress本体のバージョンや設定など）によっては本記事の通りに動作しない場合がございます。
あらかじめご理解いただければ幸いです。
目次の役割
WordPressでの目次の役割とは『ブログの内容を示した順序だった見出し一覧』の事です。
ブログの目次も同様、記事の上部に設置される見出し一覧のことを指しています。
目次があるのと目次がないのではクリック率にも差が出てきます。運営するサイトによっては目次の設定をする事をお勧めします。
それでは『なぜWordPressで目次の設定が必要か』について触れていきたいと思います
目次の必要性【3ポイント】
運営しているサイトによってはと記述しましたが、WordPressでブログサイトを運営している場合は目次は必須で設置すべきだと考えています。
備忘録的なブログの場合ですと目次の設定は必要ないかもしれません。
しかし読者に有益な情報を読者目線で記事にしたい場合、読者は最短で必要な情報が知りたいと思うのは当然ですよね？
記事の全体像を示す事ができる
検索エンジンで『ブログ 目次 役割』と検索したとします
検索された『ブログ 目次 役割』というワードを含む記事がたくさん出てくると思います。
しかし読者は目次の内容によっては他のサイトに移動する可能性っては多々あります
記事の読みたい部分が見せられる
読者はまず『調べたい』『知りたい』情報があるかをまず確認します。
それが一つなのか、複数なのかは読者によりますが読者自身にとって有益な情報が目次を見ることでどの程度詰まっているかの判断がつきます
記事の必要な箇所に移動できる
そして目次を設定しているほとんどのブログサイトであれば、必要な見出しが設定されている見出し部分にページを飛ばすことができます
必要な情報を知りたい読者にとってはとても都合が良い仕組みだと言えるでしょう
このような意味でもブログサイトの運営において、目次の設定は必須だと言えるでしょう
目次の設定で気を付けること【3ポイント】
目次の設定は必須とお伝えしましたが、とりあえず設定すればいいというものではありません。
ここでしっかりとポイントを掴んでいただき、目次設定をしていきましょう
実際わたしもこの記事を書きながら改めて目次の重要性について思い知りました！
見出しは短く簡潔に
読者がブログに求めているものは自分に必要な情報だけを収集することです。
読者にとって必要のない情報を読んでもらう事は難しいでしょう。
見出しのグループ(親子孫)に気を付ける
見出しグループがまとまっていなければ話になりません。
正しい例と悪い例に例えてみました。
H3要素に『好きな料理の種類』
H4要素に『好きな料理の種類の具材』とします
正しい例の場合はしっかりと順序通りに構成されています。
反対に悪い例の場合はH3『好きな料理の種類』にチーズが入っております。
チーズは本来H4要素なので、順序が逆になっています。
さんま塩焼きも同様H4ではなくH3要素なので順序が逆になっています。
特にブログ初心者の方はh4までにまとめる意識で見出しを設定すると良いと思います！
PREPを意識して見出しの順序を設定をしていけば良いと思います
PREP法を意識する
| 構成文字 | 説明モデル |
|---|---|
| Point（要点・結論） | 『結論は〇〇です』 |
| Reason（理由） | 『なぜなら〇〇という理由だからです』 |
| Example（証拠・具体例） | 『その根拠として〇〇だからです』 |
| Point（要点・結論） | 『したがって〇〇という理由から結論は〇〇です』 |
目次の設定方法
それではWordPressを使っている方向けに目次の設定方法について解説していきます。
Cocoonの場合
管理画面⇒Cocoon設定⇒Cocoon設定の順にクリックします
Cocoon設定画面で『目次』をクリックします
『目次の表示』は『目次を表示する』にを入れます
次に『表示ページ』で表示するページを選択していきます
次に『目次タイトル』ですが入れたい文字はなんでもOKです。
よく見かけるものとすれば『目次』や『Contents』が多いのではないかなと思います
以下の場所に反映されます
次に以下の3つを設定していきます
-
『目次切り替え』
- 目次の表示切替機能を有効にする⇒を入れる
- 開いた時閉じた時の表示名を記載する
- 『最初から目次内容を表示する』⇒を入れる
『表示条件』
この部分は好みですが自身のブログの見出しがどの程度あるかで設定していただくといいと思います
『表示の深さ』
この部分も好みですが、見出しが多すぎても少なすぎてもバランスが難しいところなので3つ(h3)ほどでいいと思います。
『目次ナンバーの表示』
設定項目手前の数字の表示形式を設定をします
以下形式ごとに表示パターンをまとめましたので参考にしてみてください
| 表示形式 | 表示サンプル |
|---|---|
| 表示しない |  |
| 数字(デフォルト) |  |
| 数字詳細(ex:1.1.1) |  |
| ドット(黒丸) |  |
| ドット(白丸) |  |
| 黒四角 |  |
『目次の中央表示』
目次をメインカラムの中央に表示するにを入れる
よく見るカラムの表示位置は中央部分ですね！を入れないと左側に表示されます。
『目次の表示順』
『広告の手前に目次を表示する』にチェックを入れておきましょう
『見出し内タグ』
は入れなくてOKです
プラグインを使う場合
WordPressにはとても便利な『プラグイン』というものがあります
プラグインを一言で表すと『拡張機能』のことを指します。
WebブラウザやCMSなどに機能を追加し、使いやすくするためのプログラムです。
WordPressの目次作成用プラグインの代表格と言ってもよい『Table of Contents Plus』ではないでしょうか？
今回は簡単に『Table of Contents Plus』を使った目次の設定方法を解説していきます
『Table of Contents Plus』のインストール
まずWordPress管理画面⇒プラグイン⇒キーワード欄に『Table of Contents Plus』と入力⇒『今すぐインストール』の順にクリックします
インストールが終わったら『有効化』をクリック
『Table of Contents Plus』の設定
有効化できたら再度WordPress管理画面⇒設定⇒TOC+の順にクリックします
以下順に設定していきます
【基本設定（簡易）】
設定がよくわからない方は以下の通りに設定してみてください
| 項目 | 説明 |
|---|---|
| 表示条件 | 最初の見出しの前(デフォルト)にしておきましょう |
| 位置 | Cocoonの時同様、3つ以上見出しがあるときでOK |
| 以下のコンテンツタイプを自動挿入 | はPOSTのみでOK POST投稿ページ PAGE固定ページ |
| 見出しテキスト | 目次の上にタイトルを表示に |
| 階層表示 | を入れる 見出し毎に階層をつける場合に必要です |
| 番号振り | 目次ごとに数字を入れたい場合を入れる 好みで設定ください |
| スムーズ・スクロール効果を有効化 | スクロールの有無を選択できます |
| 横幅 | 横幅を設定できます ブログのデザインに合わせて設定ください |
| 回り込み | デフォルトで中央表示 ブログのデザインに合わせて設定ください |
| 文字サイズ | デフォルトは95%です ブログのデザインに合わせて設定ください |
| プレゼンテーション | 目次のスタイルを設定できます カスタムの場合は詳細な設定が必要です |
上級者向けの設定が必要ない場合はこのまま設定を更新をクリック
『見出しレベル』
heading 4 – h4
heading 5 – h5
heading 6 – h6
のみチェックをはずしています！
目次のカスタム
この『Table of Contents Plus』を使ってみて以下の2点はデザインが気になったのでついでにCSSで簡単な装飾をしたいと思います
目次の中央寄せ
以下のCSSをstyle cssに記述していきます
#toc_container {
margin:2.4em auto;
}
目次の文字色変更
次に目次の文字色を変えていきます
#toc_container a{/*文字に対して*/
color:#505050;
}
カスタマイズ用のCSSコードを入力したら『Cocoon Child: スタイルシート (style.css)』でファイルの更新ボタンで入力情報の保存をします。
カスタマイズの確認
#toc_container#toc_container aに対してCSSが効いているか確認してみましょう
スーパーリロード⇒キャッシュクリアの順でPCを操作してみてください。
ブラウザ別スーパーリロード方法
ブラウザに残っているキャッシュをスルーして、最新ページの情報を読み込む方法です！
【Microsoft Edge】
- 『Ctrl』+『F5』
- 『Shift』+『F5』
- 『Ctrl』+『Shift』+『R』
- 『Ctrl』+『』
- 『Shift』+『』
- 『Shift』+『』
- 『Ctrl』+『R』
- 『Ctrl』+『F5』
- 『Ctrl』+『Shift』+『R』
- 『Shift』+『』
ブラウザ別キャッシュクリアの方法
ブラウザに残っているキャッシュを削除して、Webサイトのサーバーから新しいデータを取り込む方法です
- ブラウザ右上の設定メニュー（・が縦に３つ並んでいるボタン）をクリックして「設定」を選ぶ
- ページ下の方にある「詳細設定」をクリック
- 「プライバシーとセキュリティー」をクリックして、「閲覧履歴データの削除」をクリック
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「データ消去」をクリックする
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「データ消去」をクリックする
- 画面右下の・が３つ並んだアイコンをクリック
- 「設定」をクリック
- 「プライバシー、検索、サービス」をクリック
- 「クリアするデータの選択」を押す
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「今すぐクリア」を押す
カスタムは自己責任でやりましょうね！
さいごに
いかがでしたでしょうか？
ブログにおける『目次の役割と重要性』に関してご理解いただけましたでしょうか？
Cocoonでもプラグインでも設定は簡単にできますのでご自身が使いやすい方をご利用いただければと思います。
コメント