そんなお悩みを解決します。
AFFINGER6で、目次を作る方法は全部で3つあります。
この記事では、3種類すべての目次の作り方を画像付きで解説しますので、あなたにピッタリな目次を設置していきましょう。
本記事ではそれぞれの違いに加え、作成手順まで解説しますので、読みながら設定することでオシャレな目次も簡単に作れますよ。
ではさっそく本題に移ります。
＼ SEOに優れたWordPressテーマ ／
※ 5,000円相当のプラグイン付き！
AFFINGER6で目次を作る3つの方法
AFFINGER6で目次を作る方法は、以下の3つです。
順に解説します。
AFFINGER6で目次を作る方法 １すごいもくじLITEを使う
1つ目はAFFINGER6無料プラグイン「すごいもくじ」を使う方法です。
- AFFINGER6専用ツールのため相性抜群！
- 目次を自動で挿入してくれる
- 設定が簡単
- 好きなデザインに変更可能
- 目次にする見出しを選べる
- プラグインを導入する必要がある
すごいもくじLITEは、AFFINGER6の誕生に合わせて登場した無料プラグインです。
「すごいもくじPro」もありますが、そちらは有料なので間違えないようにしましょう。
期間限定配布ですが、AFFINGER6ユーザーであればすごいもくじLITEを使っておけば間違いありません。
AFFINGER6で目次を作る方法 ２TOC+で目次を作る
TOC+とは、AFFINGER6が推奨している無料プラグイン「Table of Contents Plus」の略称です。
すごいもくじLITEの特典が受け取れなかったり、使えない状況の方はこちらの設定を利用されてください。
- AFFINGER6推奨プラグインなので安心して使える
- 目次を自動で挿入してくれる
- 設定が簡単
- プラグインを導入する必要がある
すごいもくじLITEと同じく、初期設定が完了したあとは自動で目次を作成してくれます。
1つ1つの記事に、手作業で目次を追加する手間はかかりません。
AFFINGER6で目次を作る方法 ３ AFFINGER6の目次機能を使う
最後は、AFFINGER6内の機能を使って目次を作る方法です。
- プラグインを使わないため、ブログ表示速度に影響しない
- 手動で目次を作る必要がある
- HTMLを触る必要がある
- 目次を作る作業が難しい
この方法は唯一プラグインを使わないため、ブログ表示速度を下げたくない方に向いています。
しかし設定方法が難しいため、難易度は高め。
以上、AFFINGER6で目次を設定する3つの方法でした！
AFFINGER6で目次を作る方法 3種類の手順を解説
ここまで、AFFINGER6で設定できる目次の種類をご紹介しました。
ここからは、実際に目次を作る時の手順について解説していきます。
順に解説しますね。
AFFINGER6の機能を使って目次を作る手順
AFFINGER6の機能を使って目次を設定する手順は以下のとおりです。
１：まずWordPress記事作成画面を開いて「＋」→「クラシック版の段落」をクリックします。
２：「タグ」→「その他のパーツ」→「目次（カスタム）」と進み、クリックします。
以下のような見出しが表示されたら、次はHTMLを編集していきます。
３：右上の「点々マーク」をクリックし「コードエディター」をクリックします。
<li><a href="#">メニュー1</a></li>
コードの中のメニュー名は表示させたい目次に変更します。
合わせてa href="#">の#のあともわかりやすいものに変更しましょう。
<li><a href="#midashi01">表示させたい目次1</a></li>
<li><a href="#midashi02">表示させたい目次1</a></li>
<li><a href="#midashi03">表示させたい目次1</a></li>
４：次に「目次のHTMLコード」を追加します。
コードは以下のとおりです。
<h2><a id="midashi01"></a>表示させたい目次1</h2>
<h2><a id="midashi02"></a>表示させたい目次2</h2>
<h2><a id="midashi03"></a>表示させたい目次3</h2>
見出しで指定したhref=""と同じid=""にジャンプします。
そうすると、以下のように反映されます。
あとは見出しの数だけ、数を調整すれば完成です。
目次をサクッと作るなら、以下2つの方法がおすすめです。
TOC+で目次を作る手順
次はAFFINGER6推奨無料プラグイン「TOC+」を使って目次を作る方法を解説します。
１：まず、プラグインをインストールするためにWordPress管理画面から「プラグイン」→「新規追加」へ進みます。
２：検索バーに「Table of Contents Plus」と入力し、「今すぐインストール」をクリック。
３：そのあと「有効化」すればプラグインインストール完了です。
続いてTOC+の設定を行います。
１：WordPress管理画面から「設定」→「TOC+」へ進みます。
２：目次の基本設定が表示されるので、必要に応じて変更していきましょう。
| 設定項目 | 内容 |
|---|---|
| 位置 | 見出しを表示させる場所。デフォルトでOK |
| 表示条件 | いくつ見出しがある場合に目次を表示させるか 「2」に変更がおすすめ |
| 以下のコンテンツタイプを自動挿入 | どのブログ記事に目次を表示させるか postは投稿記事でpageは固定ページのこと |
| 見出しテキスト | 目次のタイトル コンテンツ・目次・ページコンテンツなど、お好みに合わせて入力 |
| 階層表示 | 目次に段落を表示してくれる |
| 番号振り | 見出しに番号を振るかどうか。お好みでチェック |
| スムーズ・スクロール効果を有効化 | クリックしたときに一瞬でジャンプするか、スクロールで移動するかの違い |
| 横幅 | デフォルトでOK |
| 回り込み | なし（デフォルト）でOK |
| 文字サイズ | お好みで変更 |
| プレゼンテーション | 好きなデザインを選びます。ブログデザインに合ったものを選ぶと◎ |
３：さいごに「設定を更新」をクリックし、保存したら完了です。
TOC+のカスタマイズ方法
補足として、TOC+で作成した目次のカスタマイズ方法も少しだけご紹介しますね。
１：WordPress管理画面から「外観」→「カスタマイズ」へ進みます。
２：「オプション（その他）」→「目次プラグイン(すごいもくじ)」に移動します。
表示は「目次プラグイン(すごいもくじ)」のメニューですが、ここでTOC+で作成した目次のカスタマイズができます。
すごいもくじLITEで目次を作る手順
最後に、すごいもくじLITEで目次を作る手順を解説します。
まず、プラグインをWordPressで使えるよう設定していきます。
１：WordPress管理画面から「プラグイン」→「新規追加」→「プラグインのアップロード」へ進みます。
２：「ファイルを選択」をクリック、すごいもくじLITEのファイルをアップロードし「有効化」したら完了です。
続いて、初期設定方法の解説です。
３：WordPress管理画面にある「目次」をクリックします。
４：SUGOI MOKUJI（すごいもくじ）[LITE] 管理画面が表示されるので、お好みで設定をカスタマイズすれば完成です。
| 項目 | 内容 |
|---|---|
| 位置 | 見出を表示させる位置 |
| 表示条件 | 見出しがいくつある時に目次を生成するか 「2」がおすすめ |
| 以下の投稿タイプに自動挿入 | 「post」投稿記事 「page」固定記事 |
| 見出しテキスト | 目次の上にタイトルを表示させるかどうか |
| 階層表示 | 目次に段落を表示してくれる |
| スムーズ・スクロール | クリックした時にスクロールして移動するかどうか |
| フォントサイズ | お好みで文字サイズを調整できる |
| JS | 表示の際のタイムラグを軽減 |
| 見出しレベル | チェックした見出しが目次に表示される |
最後に目次の色とデザインの変更方法を解説します。
１：WordPress管理画面から「外観」→「カスタマイズ」へ進みます。
２：「オプション（その他）」→「目次プラグイン（すごいもくじ）」へ進みます。
３：色や目次デザインの変更が表示されるので、好きなものに変えたら「公開」をクリックすると完了です。
AFFINGER6の目次上下に空白を開ける方法
ここからは設定項目にない、すごいもくじLITEとTOC+で設定した目次下に空白を開ける方法についてご紹介します。
通常であれば、以下のように見出しが表示される仕様となっています。
実は、追加CSSにコード入力するだけで簡単に解決します。
実際に余白をとると、以下のように表示されます。
少し間隔がある方がいいかも！という方は以下を参考にされてください。
順番に手順を解説しますね。
１：まず、WordPress管理画面から「外観」→「カスタマイズ」へ進みます。
２：「追加CSS」内に、以下目次別コードをコピペ →「公開」をクリック。
【TOC+コード】
#toc_container {
margin: 2.5em auto 3.0em;
}
【すごいもくじLITEコード】
#st_toc_container {
margin: 2.5em auto 3.0em;
}
以上で完成です。
数字部分を変更することで、間隔を微調整できます。
AFFINGER6で目次の設置ができたら、他の設定も一緒にしよう！
ここまで、AFFINGER6で目次を作る手順について解説しました。
他にもAFFINGER6設定関連の記事は、以下をご覧ください。
今回は以上です。
