AFFINGER5 ブログ運営

【AFFINGER 5】自動で超簡単に目次を追加するプラグインと設定方法

こんにちは、ジローです。

前回のAFFINGER5使い方解説記事では、『デザイン済みデータの設定方法』についてまとめてみました。

そして前回記事で”次はヘッダーの設定方法なんかを解説する”と書いていましたが、

今回はちょっと予定を変えて『目次の追加方法』について解説いたします。

 

それでは早速いってみましょう!

目次追加方法は2種類

まず、AFFINGER5目次を設定する方法は主に下記の2種類があります。

1. 投稿ページ・記事作成中に『タグ』→『<>その他パーツ』→『目次(カスタム)』で手動設定

2. プラグイン『Table of Contents Plus』を利用して自動設定

今回の記事では、

自動で簡単にできる方法として『2. プラグイン『Table of Contents Plus』を利用して自動設定』について設定方法を解説いたします

 

手動で設定する方法については割と手間もかかって初心者向けではない気がしますので、今回は割愛いたします。

(私も1度手動で設定してみましたが、結構めんどくさかったのでそれ以降手動では行っていません。笑)

 

目次追加方法

 

手順① プラグイン『Table of Contents Plus』をインストール

『プラグイン』→ 『新規追加』→ 「Table of Contents Plus」を ”今すぐインストール"  → 『有効化』

 

手順② 各種設定

設定項目とオススメの設定(私が使用している設定)は以下の通りです( ˘ω˘ )

位置 … 目次の配置する位置

オススメ:最初の見出しの前(デフォルト)

表示条件 … 自動で目次をつける条件

オススメ:2つ以上見出しがあるとき (見出しが少ない時はつけたくないと言う方は”3つ以上”を設定するのがオススメ)

以下のコンテンツタイプを自動挿入 … 投稿記事に自動挿入する場合は『post』、固定ページも必要であれば『page』

オススメ:最低限、postにチェック

見出しテキスト … 見出しのタイトル名などの設定

オススメ:目次上にタイトルを表示 → 『チェックを入れる』(タイトルはお好みで)

ユーザーによる目次の表示・非表示を切り替えを許可 → 『チェックを入れる』(表示する文言はお好みで。私はデフォルトです)

最初は目次を非表示 → 『チェックを入れる』 

((ここは私的なこだわりで、必要な方のみ見ていただけたらいいかなと思っています。

階層表示 … 見出しのレベルごとの階層表示

オススメ:『チェックを入れる』

番号ふり … 見出しごとに番号が自動で振られる

オススメ: 『チェックを外す』 ((あると割と邪魔な気がしてます

スムーズ・スクロール効果を有効 … 見出し部分までの移動が滑らかかどうか

オススメ: 『チェックを入れる』((滑らかに見出しまで移動する方が好きなだけです。笑

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

これ以降の設定はデフォルトで構わないかと思います!

”プレゼンテーション”でデザインの変更もできますので、色々試してみるのもいいかもですね!

ここまで設定すると以下の通りです。最後に『設定を更新』で確定してください。

 

手順③ 完成

上記の設定をすると、このような見出しが自動で追加されます!

自動でここまでおしゃれな見出しが追加されるのは便利ですよね(^-^)

 

まとめ

AFFINGER5で目次を設定する方法についてまとめてみましたが、いかがでしたでしょうか。

こんな簡単な設定で、自動に目次を追加してくれると言うのはありがたいですよね。

 

今回オススメした設定はあくまで私が設定している1例なので

皆様もぜひ、自分の好みの設定を探して利用してみてください。

 

ここまで読んでいただき誠にありがとうございました( ˘ω˘ )

-AFFINGER5, ブログ運営