• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressの記事に目次を挿入する方法

WordPressの記事に目次を挿入する方法

最終更新日:2021年10月6日

この記事では、WordPressの記事の目次を挿入する方法を解説していきます。

目次を挿入する方法としては、主に次の2つの方法があります。

  1. 目次となるHTMLを自身で書く
  2. プラグインで挿入する
TIPS
他にもJQueryを使って、挿入する方法などあります。
目次 非表示
1 HTMLを書いて目次を挿入する
1.1 メリット・デメリット
1.2 この方法がおすすめのサイト
1.3 HTMLを書いて目次を作る方法
2 プラグインで目次を挿入する
2.1 メリット・デメリット
2.2 この方法がおすすめのサイト
2.3 プラグインで目次を挿入する方法

HTMLを書いて目次を挿入する

HTMLを書いて目次を挿入するためには、HTMLとCSSの知識が必要となります。

メリット・デメリット

メリット

  • 表示する項目を自由に選べる
  • 縦に並ぶ目次以外にも、横並びの目次など様々なレイアウトを実現しやすい

デメリット

  • ページ数が多くなると、目次の管理が大変になる

この方法がおすすめのサイト

  1. 少数ページのサイト
  2. デザインにこだわりたいサイト
チェック
記事数が多くなるブログでは、管理が大変になるのでプラグインを使用して挿入数方法をおすすめします。

HTMLを書いて目次を作る方法

ここでは、目次の項目をクリックすると該当の見出しまで移動する目次の作り方をご紹介します。

  1. 目次となるHTMLを書く
  2. 見出しに対応するidタグを追加する

目次となるHTMLを書く

<div class="toc">
<div>目次</div>
<ol>
<li><a href="#i-1">大見出し①</a></li>
<li><a href="#i-2">大見出し②</a>
<ol>
<li><a href="#i-3">中身出し②-1</a></li>
</ol>
</li>
</ol>
</div>

見出しに対応するidタグを追加する

<h2 id="i-1">大見出し①</h2>

<h2 id="i-2">大見出し②</h2>

<h3 id="i-3">中身出し②-1</h3>

他にも次のような記載も可能です。

<h2><span id="i-1">大見出し①</span></h2>

<h2><span id="i-2">大見出し②</span></h2>

<h3><span id="i-3">中身出し②-1</span></h3>
注意
見出しのidに含める値には、hrefプロパティに記載した値から「#」を除きます。

プラグインで目次を挿入する

WordPressには、目次の挿入を可能とするプラグインがあります。

代表的なプラグインは、次の3つです。

  • Table of Contents Plus
  • Easy Table of Contents
  • LuckyWP Table of Contents

いずれのプラグインも使いやすいものです。

当サイトで使用しているプラグイン
2020年4月時点、当サイトでは、「LuckyWP Table of Contents」を使用しています。投稿ごとのカスタマイズや使えるフィルターが便利です。LuckyWP Table of Contentsの解説記事はこちら

メリット・デメリット

メリット

  • 自動挿入が可能なので、目次を作成する手間が省ける
  • 記事内だけでなく、サイドバー(ウィジェット)にも目次を配置できる

デメリット

  • デザインは基本的にシンプル

この方法がおすすめのサイト

  1. ページ数が多くなるブログ

プラグインで目次を挿入する方法

プラグインごとに使い方が異なります。

カテゴリー:WordPress

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « WordPressでECサイトを始めよう!作り方を初心者でもわかるように徹底解説
Next Post: WordPressでブログが検索結果に表示されない時にすべき対処法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.