・目次を簡単に作る方法が知りたい
このような疑問やお悩みにお応えします。
アフィンガー5では、目次を作る方法が2種類あります。
- タグを使って自分で作る
- 無料プラグインを使って自動で作る
それぞれのやり方にメリット・デメリットがありますが、基本的には無料プラグインを使ったやり方がおすすめ。
設定さえしておけば、自動で目次を作成してくれて記事毎に目次を作る手間が省けるからです。
本記事では、アフィンガー5の目次の作り方を分かりやすく解説していきます。
目次を設定しておくと、読者の利便性向上に繋がりますので本記事を参考に設定してみて下さいね！
本記事の内容
- アフィンガー5の目次の作り方2種類
- 目次のカスタマイズ方法
本記事を書いた人
アフィンガー5でよく使うカスタマイズを記事にしていますので合わせてご覧ください。
【AFFINGER5】アフィンガー5でスライドショーを自由自在に設定する方法
目次
アフィンガー5の目次の作り方
アフィンガー5の目次の作り方は、以下の2種類があります。
- 無料プラグイン Table of Contents Plus
- アフィンガー5のタグ
2種類の目次の作り方の特徴をまとめてみました。
| 種類 | 目次の作り方 | メリット | デメリット |
| タグ | 自力 | ・プラグイン不要 ・文字設定の自由度高い | ・手間がかかる ・HTMLの知識が必要 |
| ToC+ | 自動 | ・自動生成で楽 ・カスタマイズも簡単 | ・プラグインなので動作が重くなる |
結論、ブログ初心者の方にはToC+がおすすめです。
自動生成で楽ですし、カスタマイズも簡単だからです。
本記事では、ToC+、タグそれぞれを使った目次の作り方を解説していきますね！
アフィンガー5の目次の作り方
ToC+を使う
まずは、ToC+を使った目次の作り方を解説していきます。
ToC+で目次を作ると、以下のような完成イメージになります。
目次の作り方は、以下の流れ。
- プラグインをインストール
- 設定
- カスタマイズ
ToC+を使った目次の作り方
①ToC+をインストール
まずは、ToC+のプラグインをインストールしていきましょう。
プラグイン→新規追加
右の検索窓に「Table of Contents Plus」と入力
今すぐインストール→初期化
ToC+を使った目次の作り方
②設定
ここからはToC+の各種設定をしていきます。
プラグイン→インストール済みプラグイン
Table of Contents Plus→設定
ToC+では以下の内容が設定できます。
- 位置
- 表示条件
- コンテンツタイプを自動挿入
- 見出しテキスト
- 目次の表示・非表示
- 階層表示
- 番号振り
- スムーズ・スクロール効果
- 横幅
- 回り込み
- 文字サイズ
- プレゼンテーション
- 上級者向け表示
項目は多いですが、最低限以下のように設定しておけば問題ありません。
- 表示条件：3つ以上
- コンテンツタイプ自動挿入：post、page
- 見出しテキスト：目次等好きな表示文字を記入
- 階層表示：チェック入れる
以下、設定項目の意味を解説していきますね！
表示条件
表示条件とは、ToC+で自動で目次を生成するための条件のこと。
本記事では、3つ以上の見出しがあるときに目次を生成する設定としています。
文章が短く、見出しが少ない場合はそもそも目次を作る必要がないためです。
コンテンツタイプ自動挿入
コンテンツタイプ自動挿入では、どのページに目次を生成するかを設定します。
postは投稿記事、pageは固定ページのことでして、本記事ではpost、page両方を選択しています。
見出しテキスト
見出しテキストは、目次に表示させるタイトルの設定ができます。
また、目次の表示・非表示をユーザが選択できるように設定も可能。
切り替えボタンの表示名も自由に設定できます。
本記事では、表示/非表示というシンプル設定にしています！
階層表示
階層表示は、H2の下にH3、H4といった見出し構成を階層で表示できます。
こちらはチェックをいれておくことをおすすめします。
理由は、視覚的に記事の構造がイメージできるから。
イメージは以下のような感じ。
ToC+を使った目次の作り方
③カスタマイズ
アフィンガー5では目次のカスタマイズも簡単にできます。
外観→カスタマイズ
オプションカラー→目次プラグイン（すごいもくじ）
文字色やアイコンの色、ボーダーの太さ・色などがカスタマイズできます。
ちなみに本記事では文字色やボーダー色は全てデフォルト（カラーコード：#RRGGBB）のままです。
アフィンガー5の目次の作り方
タブを使う
ここからはタブを使った目次の作り方を解説していきます。
タブで目次を作ると、完成イメージは以下のような感じ。
目次の作り方は、以下の流れとなります。
- HTML入力
- カスタマイズ
詳しく解説していきますね！
タブを使った目次の作り方
①HTML入力
タブで目次を作る場合は、HTMLを入力していきます。
専門知識がない人でも、割と簡単に目次を作れますので安心してくださいね！
タブ→その他パーツ→目次（カスタム）
目次（カスタム）をクリック、テキストに切り替えて、以下のコードの編集をしていきます。
<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>
<ul class="st_toc_list">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
赤字の＃部分に1文字以上の英数字、メニュー〇の部分にリンクさせる見出しを書いていきます。
以下のような感じです。
<ul class="st_toc_list">
<li><a href="#1">アフィンガーをおすすめする理由</a></li>
<li><a href="#2">アフィンガーの口コミ・評判</a></li>
<li><a href="#3">アフィンガーの購入方法</a></li>
</ul>
</div>
注意ポイント
#を忘れないように！
続いてリンクさせたい見出しに、以下のようにidを記載していきます。
<h2 id="1">アフィンガーをおすすめする理由</h2>
プレビューで確認してみます。
目次の部分をクリックして、該当部分へジャンプできれば成功です。
設定自体はそれほど難しくはないですよね。
タブを使った目次の作り方
②カスタマイズ
タブで作った目次でも、ToC+と同じくカスタマイズ可能です。
設定場所もToC+と一緒です。
外観→カスタマイズ
オプションカラー→目次プラグイン（すごいもくじ）
まとめ ToC+の方が自動で目次を作れておすすめ
本記事の内容を簡単にまとめます。
アフィンガー5の目次の作り方
- 無料プラグインToC+
- アフィンガー5のタグ
タグを使って目次を作る場合、1記事ごとに設定する手間がかかります。
一方でToC+ならば、自動で目次を生成してくれるのでToC+の方がおすすめです。
目次は読者の利便性をあげる重要な項目ですので、本記事を参考に設定してみて下さいね！
それでは！
アフィンガー5でよく使うカスタマイズ記事
【AFFINGER5】アフィンガー5のページ内リンクの作り方【超簡単】
アフィンガー5のプロフィールカード設定方法【人気ブログを集計！】
