こんにちは、とも<@Tomo_AIA>です。
今日はブログ記事の目次の作り方の解説をしていきたいと思います。
WordPressで目次の作り方がわからない。
よく目次が付いている記事を見るけどどうやって作るんだろ？と思っている方。
長文のブログ記事をより読みやすくしたい方。
この記事では簡単に目次を作成する方法を解説しますので是非チェックしてください。
この記事を読むと
- 簡単に記事に目次を作れるようになる。
- 目次をカスタマイズ方法がわかる。
WordPressで作れる目次とは？
今回紹介するWordPressで作れる目次は記事内にある見出しを集め、一覧で表示したものになります。
見出しとは<h1>～<h4>タグに囲まれた文字になります。普通は<h1>タグは記事のタイトルになりますので、目次には使用しませんので、<h2>～<h4>タグを集めたものと考えていただければOKです。
目次の役割は以下の通りです。
- 記事の内容が一目でわかる。
→長文の記事でも読む前に自分に必要な記事かわかります。 - 読みたい記事だけ読むことができる。
→目次をクリックすると読みたい記事に飛ばすことができます。 - 記事がみやすくなり読まれるようになる。
目次の作り方と基本設定
目次を簡単に作ることができる『 Easy Table of Contents 』というプラグインを紹介したいと思います。
Easy Table of Contentsをインストール
①プラグイン→新規追加をクリックします。
②キーワード欄に「Easy Table of Contents」を入力します。
③今すぐインストールをクリックします。
④有効化をクリックします。
Easy Table of Contents の設定
メニューバーの設定→目次をクリックすると設定画面が表示されます。
順番に設定方法と設定するとどのように反映されるかの説明をしていきます。
サポートを有効化
今回は投稿ページにのみ入れればいいので投稿をチェックします。
自動挿入
目次を自動挿入するかを設定します。サポートを有効化した投稿にチェックしましょう。
位置
目次の表示位置を設定します。初期値の「最初の見出しの前」でいいです。
表示条件
何件見出しがある場合に目次を表示するかを設定します。初期値は4件ですが、僕は3件にしています。
見出しラベルを表示
画像の赤枠部分の目次のタイトルを表示するかどうかを設定します。チェックのままでいいです。
見出しラベル
見出しラベルを表示した場合、どのように表示するかを設定します。
僕は「■目次」にしています。
折りたたみ表示
画像の赤枠部分の目次を折りたたむ(非表示)か折りたたまない(表示)かを選択できるアイコンを設定します。
好みによりますが僕はチェックを入れています。
初期状態
折りたたみ表示の初期状態を表します。記事を初期表示した時に最初から目次を折りたたんだ状態で表示する場合はチェックを入れます。
僕は折りたたまない状態で表示させたいのでチェックを外しています。
ツリー表示
目次を階層構造で表示するかどうかを選択します。例えば<h2>と<h3>タグがある場合<h3>タグがスペースを空けた状態で表示されます。
ツリー表示の方が絶対に見やすいのでチェックすることをお勧めします。
カウンター
目次に自動で付けられる数字を表します。
好みですが僕は少数点表示にしています。
スクロールを滑らかにする
目次をクリックした時の見出しへの移動の仕方を表します。チェックを外すと瞬間移動します。
好みですが僕はチェックしています。
幅
目次の幅を表します。初期値の「Auto」だと見出しの文字数に合わせて自動的に幅を設定してくれます。
僕は「Auto」にしています。
カスタム幅
幅を「カスタム」にした場合の幅を表します。「Auto」の場合は設定不要です。
回り込み
目次を右側か左側に表示します。「なし(デフォルト)」で問題ありません。
タイトル文字サイズ
赤枠で囲った目次のタイトル文字の大きさを表します。初期値の「120%」では大きいと感じる場合は変更しましょう。
僕は「100%」にしています。
タイトル文字の太さ
目次タイトルの文字の太さを表します。僕は「medium」に設定しています。
文字サイズ
赤枠で囲った目次自体の文字のサイズを表します。
僕は「95%」のままにしています。
テーマ
目次の色を表します。「カスタム」を選択すると次に説明しますが、目次に独自性を出すことができます。
カスタマイズ設定と高度な設定
テーマを「カスタム」にチェックすると目次を独自に設定することができます。
それぞれの説明と僕の設定を紹介します。
カスタマイズ設定
背景色
目次の背景色を表します。
僕は初期値のままです。
枠線色
目次の枠線の色を表します。
僕は少し濃いめのグレー「#a5a5a5」にしています。
タイトル色
目次タイトル文字の色を表します。
僕は黒「#000000」にしています。
リンク色
目次自体の文字の色を表します。
僕は初期値のままです。
ホバー時のリンク色
マウスが目次の上に重なった時の文字の色を表します。
僕は初期値のままです。
訪問済みリンク色
クリックした目次の文字の色を表します。
僕は初期値のままです。
高度な設定
見出しのどのレベルまでを目次として表示するかを設定します。
僕はあまり階層が深く細かくなるのが嫌なので見出し2(h2)、見出し3(h3)にチェックを入れています。
その他の高度な設定は特に変更する必要はありません。
僕のカスタマイズ設定後の目次の画像です。
投稿毎の設定
最後に投稿毎の設定を説明します。
Easy Table of Contentsのいいところは投稿毎に目次の有無や階層レベルが設定できるところです。
自動挿入
「目次の自動挿入を無効にします」にチェックを入れると見出しが少なかったりして目次が不要な場合に消すことができます。
いかがでしたでしょうか。プラグインを入れるだけで簡単に目次が作れることがわかりましたでしょうか。
これであなたのブログも一段階レベルが上がります。
是非、試してみてください。
