• メニュー
  • メニュー

【簡単挿入】ワードプレスの 目次の作り方 おすすめプラグインはこれ

WordPress(ワードプレス)で目次の作り方について、おすすめのプラグインを用いて挿入する方法です。今回はTable of Content plusやEasy Table of Contentsではない別の簡単なやり方をご紹介します。

使い慣れたらめっちゃ便利なGutenbergを用いた方法です。何個もプラグインを入れずに済みますのでおすすめです。

ワードプレスの目次の作り方

テーマによっては標準で目次を挿入する機能がついている場合がありますが、自分で目次を入れないといけない場合はプラグインの利用が簡単です。

有名なプラグインはこの2つです。

あまりにも有名なこのプラグインの利用ではない別な方法で今回は目次を挿入したいと思います。

Gutenbergのプラグインを使う!

Gutenberg使ってますか?

Gutenberg使ってますか?クラシックエディターもサポート期限が決まってるので早いところGutenbergに慣れましょう。

こちらの記事も読んでみてください。

Gutenbergのおすすめのプラグインに「Ultimate Addons for Gutenberg」があります。このプラグインはページを劇的におしゃれにしてくれる機能が付いています。

タイムライン風の表示だったり、記事のグリッドレイアウト、口コミ表示、価格表の表示など多機能です。

ワードプレスの 目次の作り方  プラグイン

このプラグインの機能の一つに「Table of Content」があります。

このページの目次を表示するとこんな形になります。この記事は見出しが少なめなので物足りない感じですみませんが・・・。

ちょっとダサいですね。。。。これじゃちょっとと思ったでしょう。

これをもう少しおしゃれにデザインしてみます。デフォルトよりはましでしょう。これくらいのデザインであればGutenbergの標準装飾機能で簡単にできます。

目次の装飾方法

Gutenbergのブロックエディタを使い慣れていたら簡単に装飾が可能です。

目次のブロックを選択すると、右側に細かい設定が表示されます(ピンクの枠)。

ワードプレスの 目次の作り方  プラグイン

設定できる項目は以下の通りです。

  • 表示する見出しの選択⇒H1, H2などオンオフできます
  • スクロール設定⇒目次をクリックするとスクロールします
  • スクロールトップボタン⇒ページ下にボタンが追加されてクリックするとトップに移動
  • 内容⇒目次の見出しの空白、見出しの文字色、リンク色、リストの行間、見出しを閉じれるか(非表示)の設定
  • Style⇒目次の背景色、目次のマージンやパディング設定
  • Border⇒目次の枠線の色や種類、丸角の設定

いろいろいじってるとあなたのサイトに合った目次ができるでしょう。

細かい設定をしてると毎回こんなことやらないといけないの?!と思いますよね。

ここでGutenbergの最強機能、「再利用ブロックに追加」を利用します。この機能を使うと、別の記事で呼び出すと同じものを追加することができます。

例えば、毎回同じ文言を記事冒頭に表示するとか、記事末尾に同じ広告を表示したいとか、そのような場合に威力を発揮する機能です。

やり方は、ブロックを選択して、縦点3つの詳細設定をクリックして「再利用ブロックに追加」を選びます。これで追加完了です。

呼び出す場合は、「再利用」タブから呼び出すことができます。再利用に追加された「Table of Content」を呼び出すと以下のようになります。

おっとっと!!英文で「Add a header to begin generating the table of contents」と表示されます。

これだと使えませんので、またここで詳細設定から、Gutenbergの再利用の最強補助機能である「通常ブロックへ変換」を選びます。すると上の目次が下の目次に切り替わります。

この「通常ブロックへ変換」がブロックエディタの再利用を制するためには必須のスキルです!!

記事作成の時短には、再利用ブロックに追加と通常ブロックへ変換の2つをマスターすると記事作成時間がめっちゃ短縮になります!!

まとめ:ワードプレスの目次の作り方

あまり紹介されない方法を今回紹介してみました。

サイトによっては「Ultimate Addons for Gutenberg(UAG)」の機能は1個も使わないよ~~という場合は、ひょっとしたら、「Table of Content plus」や「Easy Table of Contents」のプラグイン利用がBetterかもしれません。

ただ1個でもUAGの機能を使う場合はほかに目次プラグインを入れずに、同じプラグインの目次機能を利用するようにしてみてください。

この記事のようにH2見出しが2個くらいの場合はあえて目次は必要ありません。H2タイトルが4つ以上、そしてH3タイトルが同等数ある場合は目次を表示させてあげても良いと思います。

Googleも目次表示はSEO対策として推奨しているものになります。親切ってことですね!!


有益情報も流しているのでツイッターもぜひフォローお願いします。


参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 が付いている欄は必須項目です