PR AFFINGER6

【AFFINGER6】無料で目次を作る3つの方法【目次上下に空白を開ける方法も解説(コピペ可)】

【AFFINGER6】無料で目次を作る3つの方法【目次上下に空白を開ける方法も解説(コピペ可)】
AFFINGER6で目次を作る方法を教えてください。

そんなお悩みを解決します。

AFFINGER6で、目次を作る方法は全部で3つあります。

この記事では、3種類すべての目次の作り方を画像付きで解説しますので、あなたにピッタリな目次を設置していきましょう。

本記事ではそれぞれの違いに加え、作成手順まで解説しますので、読みながら設定することでオシャレな目次も簡単に作れますよ

ではさっそく本題に移ります。

SEOに優れたWordPressテーマ

AFFINGER6の詳細を見る

※ 5,000円相当のプラグイン付き

AFFINGER6で目次を作る3つの方法

AFFINGER6で目次を作る方法は、以下の3つです。

順に解説します。

AFFINGER6で目次を作る方法 1すごいもくじLITEを使う

すごいもくじライト
2021年7月〜 AFFINGER6の販売開始に合わせて登場!

1つ目はAFFINGER6無料プラグイン「すごいもくじ」を使う方法です。

 すごいもくじを使うメリット
  • AFFINGER6専用ツールのため相性抜群!
  • 目次を自動で挿入してくれる
  • 設定が簡単
  • 好きなデザインに変更可能
  • 目次にする見出しを選べる
 すごいもくじを使うデメリット
  • プラグインを導入する必要がある

すごいもくじLITEは、AFFINGER6の誕生に合わせて登場した無料プラグインです。

「すごいもくじPro」もありますが、そちらは有料なので間違えないようにしましょう。

期間限定配布ですが、AFFINGER6ユーザーであればすごいもくじLITEを使っておけば間違いありません。

AFFINGER6専用設計なので安心して使えますよ。

AFFINGER6で目次を作る方法 2TOC+で目次を作る

TOC+とは、AFFINGER6が推奨している無料プラグイン「Table of Contents Plus」の略称です。

すごいもくじLITEの特典が受け取れなかったり、使えない状況の方はこちらの設定を利用されてください。

 TOC+を使うメリット
  • AFFINGER6推奨プラグインなので安心して使える
  • 目次を自動で挿入してくれる
  • 設定が簡単
 TOC+を使うデメリット
  • プラグインを導入する必要がある

すごいもくじLITEと同じく、初期設定が完了したあとは自動で目次を作成してくれます。

1つ1つの記事に、手作業で目次を追加する手間はかかりません。

設定にはプラグインが必要ですが、簡単に自動目次をつけたい方にはピッタリです。

AFFINGER6で目次を作る方法 3 AFFINGER6の目次機能を使う

最後は、AFFINGER6内の機能を使って目次を作る方法です。

 AFFINGER6の機能を使って目次を作るメリット
  • プラグインを使わないため、ブログ表示速度に影響しない
 AFFINGER6の機能を使って目次を作るデメリット
  • 手動で目次を作る必要がある
  • HTMLを触る必要がある
  • 目次を作る作業が難しい

この方法は唯一プラグインを使わないため、ブログ表示速度を下げたくない方に向いています。

しかし設定方法が難しいため、難易度は高め。

難しくても、とにかくブログ表示速度を落としたくない方におすすめな目次の設置方法です。

以上、AFFINGER6で目次を設定する3つの方法でした!

AFFINGER6で目次を作る方法 3種類の手順を解説

ここまで、AFFINGER6で設定できる目次の種類をご紹介しました。

あなたのブログにピッタリな目次は見つかりましたか?

ここからは、実際に目次を作る時の手順について解説していきます。

順に解説しますね。

AFFINGER6の機能を使って目次を作る手順

AFFINGER6の機能を使って目次を設定する手順は以下のとおりです。

1:まずWordPress記事作成画面を開いて「」→「クラシック版の段落」をクリックします。

2:「タグ」→「その他のパーツ」→「目次(カスタム)」と進み、クリックします。

以下のような見出しが表示されたら、次はHTMLを編集していきます。

3:右上の「点々マーク」をクリックし「コードエディター」をクリックします。

<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>

4:次に「目次のHTMLコード」を追加します。

コードは以下のとおりです。

<h2><a id="midashi01"></a>表示させたい目次1</h2>
<h2><a id="midashi02"></a>表示させたい目次2</h2>
<h2><a id="midashi03"></a>表示させたい目次3</h2>

見出しで指定したhref=""と同じid=""にジャンプします。

そうすると、以下のように反映されます。

あとは見出しの数だけ、数を調整すれば完成です。

HTMLの知識があっても設定がややこしく、時間もかかるため、あまり使っている人は見かけません。

目次をサクッと作るなら、以下2つの方法がおすすめです。

TOC+で目次を作る手順

次はAFFINGER6推奨無料プラグイン「TOC+」を使って目次を作る方法を解説します。

1:まず、プラグインをインストールするためにWordPress管理画面から「プラグイン」→「新規追加」へ進みます。

2:検索バーに「Table of Contents Plus」と入力し、「今すぐインストール」をクリック。

3:そのあと「有効化」すればプラグインインストール完了です。

続いてTOC+の設定を行います。

1:WordPress管理画面から「設定」→「TOC+」へ進みます。

2:目次の基本設定が表示されるので、必要に応じて変更していきましょう。

設定項目内容
位置見出しを表示させる場所。デフォルトでOK
表示条件いくつ見出しがある場合に目次を表示させるか
「2」に変更がおすすめ
以下のコンテンツタイプを自動挿入どのブログ記事に目次を表示させるか
postは投稿記事でpageは固定ページのこと
見出しテキスト目次のタイトル
コンテンツ・目次・ページコンテンツなど、お好みに合わせて入力
階層表示目次に段落を表示してくれる
番号振り見出しに番号を振るかどうか。お好みでチェック
スムーズ・スクロール効果を有効化クリックしたときに一瞬でジャンプするか、スクロールで移動するかの違い
横幅デフォルトでOK
回り込みなし(デフォルト)でOK
文字サイズお好みで変更
プレゼンテーション好きなデザインを選びます。ブログデザインに合ったものを選ぶと◎
よく分からない場合は、ひとまず画像のとおりに設定して、あと自分好みに調整すればOKです。

3:さいごに「設定を更新」をクリックし、保存したら完了です。

TOC+のカスタマイズ方法

補足として、TOC+で作成した目次のカスタマイズ方法も少しだけご紹介しますね。

1:WordPress管理画面から「外観」→「カスタマイズ」へ進みます。

外観→カスタマイズ

2:「オプション(その他)」→「目次プラグイン(すごいもくじ)」に移動します。

表示は「目次プラグイン(すごいもくじ)」のメニューですが、ここでTOC+で作成した目次のカスタマイズができます。

自分好みの目次デザインを作りましょう。

すごいもくじLITEで目次を作る手順

最後に、すごいもくじLITEで目次を作る手順を解説します。

まず、プラグインをWordPressで使えるよう設定していきます。

1:WordPress管理画面から「プラグイン」→「新規追加」→「プラグインのアップロード」へ進みます。

プラグインのアップロード法

2:「ファイルを選択」をクリック、すごいもくじLITEのファイルをアップロードし「有効化」したら完了です。

プラグインのアップロード

続いて、初期設定方法の解説です。

3:WordPress管理画面にある「目次」をクリックします。

4:SUGOI MOKUJI(すごいもくじ)[LITE] 管理画面が表示されるので、お好みで設定をカスタマイズすれば完成です。

すごいもくじLITE管理画面
すごいもくじLITE管理画面
項目内容
位置見出を表示させる位置
表示条件見出しがいくつある時に目次を生成するか
「2」がおすすめ
以下の投稿タイプに自動挿入「post」投稿記事 「page」固定記事
見出しテキスト目次の上にタイトルを表示させるかどうか
階層表示目次に段落を表示してくれる
スムーズ・スクロールクリックした時にスクロールして移動するかどうか
フォントサイズお好みで文字サイズを調整できる
JS表示の際のタイムラグを軽減
見出しレベルチェックした見出しが目次に表示される
カスタマイズ後は「変更を保存」をクリックするのを忘れずに。

最後に目次の色とデザインの変更方法を解説します。

1:WordPress管理画面から「外観」→「カスタマイズ」へ進みます。

外観→カスタマイズ

2:「オプション(その他)」→「目次プラグイン(すごいもくじ)」へ進みます。

3:色や目次デザインの変更が表示されるので、好きなものに変えたら「公開」をクリックすると完了です。

AFFINGER6の目次上下に空白を開ける方法

ここからは設定項目にない、すごいもくじLITEとTOC+で設定した目次下に空白を開ける方法についてご紹介します。

通常であれば、以下のように見出しが表示される仕様となっています。

目次と上下の間隔(通常ver.)
1行だけ間隔を開けたいなぁ‥。

実は、追加CSSにコード入力するだけで簡単に解決します。

実際に余白をとると、以下のように表示されます。

目次と上下の間隔(カスタマイズ後ver.)

少し間隔がある方がいいかも!という方は以下を参考にされてください。

順番に手順を解説しますね。

1:まず、WordPress管理画面から「外観」→「カスタマイズ」へ進みます。

外観→カスタマイズ

2:「追加CSS」内に、以下目次別コードをコピペ →「公開」をクリック。

【TOC+コード】

#toc_container {
margin: 2.5em auto 3.0em;
}

【すごいもくじLITEコード】

#st_toc_container {
margin: 2.5em auto 3.0em;
}

以上で完成です。

数字部分を変更することで、間隔を微調整できます。

AFFINGER6で目次の設置ができたら、他の設定も一緒にしよう!

ここまで、AFFINGER6で目次を作る手順について解説しました。

 AFFINGER6で目次を設置する方法
個人的にはAFFINGER6専用設計の「すごいもくじLITE」がおすすめです。

他にもAFFINGER6設定関連の記事は、以下をご覧ください。

今回は以上です。

  • この記事を書いた人
Emma Diaries

𝐸𝑚𝑚𝑎

ブログ歴4年目
6年間の副業OLを経てフリーランスへ
詳しいプロフィールはこちらから

-AFFINGER6