AFFINGER6（アフィンガー6）でオシャレな目次を作成する方法

AFFINGER6で目次を実装できるって本当？

WordPressでオシャレな目次を設置する方法を知りたい！

今回はこういった悩みを解決していきます。

ユーザーに記事全体の構造を教えることができる目次は、サイトの使いやすさを決める重要な要素です。

とはいえゼロから目次を設置するのは難しいですよね。

そこで今回はAFFINGER6（アフィンガー6）を使っている方に向けて「オシャレな目次」を作成する方法をご紹介します。

結論から申し上げると、AFFINGER6で目次を設定する方法は２つあります。

記事を読みながら操作すれば、ほんの数分でオシャレな目次を作成できます！

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

Table of Contents Plusのページはこちら→

AFFINGER6（アフィンガー6）の目次完成イメージ

まず最初に今回作成する目次の完成イメージをご覧ください。

ご覧のようにオシャレでシンプルな目次が作成できます。

「hide」ボタンを押せば目次を開閉できます！

では目次の作り方について紹介していきます。

AFFINGER6で目次を実装する方法①【Table of Contents Plusを使う】

AFFINGER6で目次を実装する方法の1つ目は、WordPressプラグイン「Table of Contents Plus」を使う方法です。

まずはTable of Contents Plusのインストール方法から見ていきましょう。

Table of Contents Plusのインストール方法

まずはWordPress管理画面からプラグイン専用ページに移動します。

左側のメニューから「プラグイン」→「新規追加」を選択しましょう。

新規追加画面に移動したら検索バーから「Table of Contents Plus」を検索します。

画像のようにTable of Contents Plusをインストール＆有効化しましょう。

これでTable of Contents Plusの導入手順は完了です！

Table of Contents Plusの設定

次にTable of Contents Plusの設定をしていきます。

WordPress管理画面から「設定」→「TOC＋」のページに移動しましょう。

TOC+とはTable of Contents Plusの略ですね。

目次の基本設定

基本設定では文字通り、目次に関する設定をカスタマイズできます。

まずは各項目の概要についてご説明します。

画像の通りに設定していただければ、オシャレな目次が作れます。

まずは前半部分から。

続いては後半部分の目次設定。

結構カンタンに設定できると思います。

Table of Contents Plusが人気な理由がわかりますね！

続いては上級者設定を見ていきましょう。

上級者設定

上級者設定は基本的に設定する必要はありません。

当ブログでは唯一「見出しレベル」だけカスタマイズしています。

「見出しレベル」では見出しに表示させるhタグを指定できます。

一般的にウェブサイトではh1がタイトル、h2が見出し、h3が小見出しといった常識があるのですが、h4以降は特に規定がありません。

h4以降はあまり使われていないのも現状です。

そこで当ブログでは、「見出しレベル設定」ではh2とh3のみを表示させて、それ以外のhタグは表示させないように設定させています。

他にも、h4以降を表示させると目次が複雑に入り組んで見にくくなってしまうというデメリットもあります。

みなさんもぜひ真似してみてください！！

すべて設定し終わったら「設定を更新」ボタンを押して設定を保存しましょう。

Table of Contents Plusで作成した目次をカスタマイズする方法

次にTable of Contents Plusで作成した目次をカスタマイズする方法をご紹介します。

WordPress管理画面から「外観」→「カスタマイズ」→「［＋］オプションカラー」→「目次プラグイン(すごいもくじ)」に移動しましょう。

「目次プラグイン(すごいもくじ)」メニューではTable of Contents Plusで作成した目次のデザインカスタマイズができます。

主に文字色や背景色、枠線の太さなどの設定ができます。

それぞれお好みに合わせて設定していきましょう。

ちなみに最後に書かれている「目次アイコン（Font Awesome Unicode）」では目次の見出し左のアイコンをFont Awesomeから設定できます。

デフォルトではノートのアイコンになっています。

Font Awesomeとは豊富な種類のアイコンを文字として表示できるツールのことでウェブフォントの一種です。

Font Awesomeを開いて好きなアイコンを選択すると上画像のように「f」から始めるunicodeが書かれているので「目次アイコン（Font Awesome Unicode）」の欄に入力します。

目次のカスタマイズ設定が終わったら「公開」ボタンを押して反映させましょう！

Table of Contents Plusで作成した目次を確認しよう

さてこれで目次の設定が完了したので各投稿ページの目次を確認してみましょう。

こんな風に表示されていたら目次設置完了です！

目次を見て違和感があったら適宜設定をカスタマイズしていきましょう。

作成した目次が表示されていない場合

目次がうまく表示されていない、上の画像と違う、場合どこかで設定を間違えている可能性があります。

これらの設定をもう一度確認してみましょう。

場合によっては「設定を更新」ボタンを押し忘れただけの可能性もあります。

今一度確かめてみましょう。

AFFINGER6で目次を実装する方法②【AFFINGER標準の目次を設定する方法】

これまでTable of Contents Plusを使った目次の作り方を説明してきました。

ですが実はAFFINGER6には標準で目次を設定できる機能が備わっています。

ここからはAFFINGER6の標準機能で目次を実装する方法を見ていきましょう。

手順は以下の通りです。

それでは詳しく見ていきましょう。

1. タグ機能で出力した目次のHTMLコードを編集

AFFINGER6で目次を作成するには投稿編集画面のタグ機能を使います。

目次を作成したいエディタ画面に移動したら「タグ」→「その他のパーツ」→「目次(カスタム)」を選択しましょう。

するとこのような目次のデフォルト画面が表示されます。

ここからは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>

標準では3つしか用意されていませんので、必要な見出しの数だけ<li>タグのコードを追加してあげましょう。

次にコード内の「href="#"」の"#"部分を1つづつ設定していきます。

設定する文字は分かりやすいものにしておきましょう。

ここでは「href="midashi01"」「href="midashi02"」といったように設定します。

全体ではこのようなコードになります。

 目次のHTMLコード
<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>
<ul class="st_toc_list">
<li><a href="#midashi01">メニュー1</a></li>
<li><a href="#midashi03">メニュー2</a></li>
<li><a href="#midashi03">メニュー3</a></li>
</ul>
</div>

2. 各見出しのHTMLコードを編集

次に設定した目次のコードに対応する形で、見出しのHTMLコードも編集していきます。

上でも軽く触れたように各見出しにhref=""と同じidを設定します。

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

 見出しのHTMLコード
<h2><a id="midashi01"></a>見出し1</h2>
・
・
・
<h2><a id="midashi02"></a>見出し2</h2>
・
・
・
<h2><a id="midashi03"></a>見出し3</h2>

このように各見出しに、目次のHTMLコードで書いたそれぞれのidを設定してあげましょう。

すべての見出しに設定してあげれば目次の作成は完了です。

AFFINGER6の標準目次機能をおすすめできない理由

このようにAFFINGER6の標準機能から目次を作成する方法はコスパが悪くほとんどの方は使っていません。

というのもこの機能にはいくつかデメリットがあります。

見出しだけならまだしも、小見出しまで書くとなれば作業量は膨大です泣

このようにAFFINGER6に標準で備わっている目次機能はコスパが悪いのでおすすめできません。

効率よくブログを書きたい方・WordPress初心者の方はコスパの良いTable of Contents Plusをオススメします。

まとめ：AFFINGER6（アフィンガー6）で目次を活用しよう！

今回はAFFINGER6（アフィンガー6）でオシャレな目次を作成する方法についてご紹介しました。

AFFINGER6で目次を実装する方法は

の２つがあります。

とはいえ「AFFINGER6の標準機能を使う方法」は作業量が膨大でコスパが悪くほとんどの方が使用していません。

よって当ブログでは「WordPressプラグインを使用する方法」をオススメします。

そして目次専用プラグインなら、圧倒的に「Table of Contents Plus」がオススメです！

コスパが良くてデザインもオシャレなTable of Contents Plusを使って、最高のウェブサイトを作っていきましょう。

これからサイトを立ち上げたい！ブログを始めたい！といった方の助けになれたらなと思います。

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします！

AFFINGER6のカスタマイズ方法のまとめはこちら

AFFINGER6（アフィンガー6）に関する記事一覧はこちら→