筋トレ

簡単!WordPressのブログで目次の作り方を解説【読まれる記事】

投稿日:2019年7月9日 更新日:

整理された机の画像

こんにちは、とも<@Tomo_AIA>です。

今日はブログ記事の目次の作り方の解説をしていきたいと思います。

WordPressで目次の作り方がわからない。
よく目次が付いている記事を見るけどどうやって作るんだろ?と思っている方。
長文のブログ記事をより読みやすくしたい方。

この記事では簡単に目次を作成する方法を解説しますので是非チェックしてください。

この記事を読むと

  • 簡単に記事に目次を作れるようになる。
  • 目次をカスタマイズ方法がわかる。
Sponsored Link

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%」のままにしています。

テーマ

目次の色を表します。「カスタム」を選択すると次に説明しますが、目次に独自性を出すことができます。

Sponsored Link

カスタマイズ設定と高度な設定

テーマを「カスタム」にチェックすると目次を独自に設定することができます。
それぞれの説明と僕の設定を紹介します。

カスタマイズ設定

背景色

目次の背景色を表します。
僕は初期値のままです。

枠線色

目次の枠線の色を表します。
僕は少し濃いめのグレー「#a5a5a5」にしています。

タイトル色

目次タイトル文字の色を表します。
僕は黒「#000000」にしています。

リンク色

目次自体の文字の色を表します。
僕は初期値のままです。

ホバー時のリンク色

マウスが目次の上に重なった時の文字の色を表します。
僕は初期値のままです。

訪問済みリンク色

クリックした目次の文字の色を表します。
僕は初期値のままです。

高度な設定

見出し設定画像

見出しのどのレベルまでを目次として表示するかを設定します。
僕はあまり階層が深く細かくなるのが嫌なので見出し2(h2)、見出し3(h3)にチェックを入れています。

その他の高度な設定は特に変更する必要はありません。

僕のカスタマイズ設定後の目次の画像です。

カスタマイズ後の目次

投稿毎の設定

投稿毎の設定画像

最後に投稿毎の設定を説明します。

Easy Table of Contentsのいいところは投稿毎に目次の有無や階層レベルが設定できるところです。

自動挿入

自動挿入の画像

「目次の自動挿入を無効にします」にチェックを入れると見出しが少なかったりして目次が不要な場合に消すことができます。

いかがでしたでしょうか。プラグインを入れるだけで簡単に目次が作れることがわかりましたでしょうか。

これであなたのブログも一段階レベルが上がります。
是非、試してみてください。

Sponsored Link

-筋トレ

執筆者:

関連記事

ダンベルと果物

どのくらい飲めばいいの?プロテインの最適な摂取量とタイミング【最新科学】

こんにちは、とも<Tomo_AIA>です。 前回のエピソードではプロテインの最適な摂取時間を解説しましたが今回はプロテインの1日の最適な摂取量を解説していきたいと思います。 前回のエピソー …

チキンとブロッコリー

筋トレに最適なプロテインは?プロテインの用途と種類【裏ワザも紹介】

こんにちは、とも<Tomo_AIA>です。 前回、前々回のエピソードでは筋トレで効率良くかっこいい体になっていくためには、プロテインを活用すべきだということを解説しました。 今日は、世の中 …

【筋トレ】セット間の最も効果的な休憩時間(インターバル)【最新科学】

こんにちは、とも<Tomo_AIA>です。 今回は筋トレにおけるセットとセットの間の休憩時間(以下、インターバル)はどのぐらい取ったらいいかを解説したいと思います。 これまでは、筋トレのイ …

自宅で簡単!ウエストが細いまま筋肉をつける方法!【モテ筋メニュー】

こんにちは、とも<Tomo_AIA>です。 今回も僕が日常で自宅でやっている筋トレメニューを紹介したいと思います。 皆さんエロ筋てご存じですか?男性の絞れたウエストのVシェイプのことです! …

方腕立て伏せ

【筋トレ】筋トレを始める初心者が自宅で最初にやるべきメニューは?【これ一択】

こんにちは、とも<Tomo_AIA>です。 今回は、筋トレを始めようと思っている方、やろうと思っているけどなかなかやる気になれない方、何をやっていいかわからない方、筋トレはやりたいけどジム …

【とも】

ITコンサルタント/お笑い大好き

経歴:同支社大学→新卒で某大手不動産会社の営業→コンサル会社に営業として転職→ITエンジニアを希望し転属→ITコンサルタント→サラリーマンとして生きることに限界を感じ大手ネットワークビジネス、ア〇ウェイをやるも挫折→PC1台で自由に生きられるインターネットビジネスを学ぶ→自由で超健康に生きられる人を増やす活動を展開中→夢はハワイにワイキキビーチを臨む別荘とホームジムを持つこと

プロフィールの詳細>

Twitter>