AFFINGER(アフィンガー)

AFFINGER5(アフィンガー5)で目次の設定方法【2通りの方法】

2020年7月8日

【AFFINGER5のカスタマイズ】目次の設定方法【2通りの方法で解説します】

 

悩む人
AFFINGER5(アフィンガー5)で目次設定したいけど、どうやって設定するのか知りたいな...。

 

本記事は、こんな疑問に答えます

 

こんな方におすすめ

  • AFFINGER5(アフィンガー5)で目次の設定方法について知りたい
  • AFFINGER5の目次のデザインをカスタマイズしてみたい

 

結論からAFFINGER5での目次設定は2つあります

 

  1. 目次(カスタム)設定(アフィンガー内のタグ)
  2. 目次(TOC+)設定(プラグイン)

 

本記事では、前半に両目次の設定の違いについて簡単に紹介し、後半では両設定方法について解説しています。

 

本記事を読みアフィンガー5の目次設定が無事にできましたら幸いです。

 

それでは、早速始めていきます。

 

 

AFFINGER(アフィンガー5)の目次設定は2通りあります

AFFINGER(アフィンガー5)の目次設定は2通りあります

 

冒頭でも紹介しましたように、アフィンガー5の目次設定は2つあります。

 

  1. 目次(カスタム)設定(アフィンガー内のタグ)
  2. 目次(TOC+)設定(プラグイン)

 

それぞれの目次設定の違いとして「HTMLを使って設定する方法」と「プラグインをインストールする方法」です。

 

1つ目の「目次(カスタム)で設定」する方法は、HTMLを使って設定をするので少しテマがかかります。

 

一方で、2つ目の「目次(TOC+)」はプラグインをインストールすることで、簡単に目次を生成することができるので「目次(カスタム)」と比較しても設定はラクです。

 

当ブログも「目次(TOC+)」を使って目次を生成しています。
KEI

 

とはいえ、「目次(TOC+)」は簡単に作成することができるのですが、プラグインのインストールはページの表示速度を落としたり、不具合を起こす可能性があります。

 

自サイトの環境や運用のしやすさなど考慮してアフィンガーの目次設定をしてみてください。

 

アフィンガー5で目次を設定する方法①:
目次(カスタム)

目次(カスタム)での設定

 

それでは、目次(カスタム)の設定方法から解説していきます。

 

  • ①:目次(カスタム)タグを追加
  • ②:目次(カスタム)タグに「#menu1」を追加する
  • ③:見出し(h2,h3)のaタグの設定

 

手順①:目次(カスタム)タグを追加

 

まず、WordPressの管理画面から記事作成画面を開きます。

 

次にエディター内の『①タグ → ②その他のパーツ → ③目次(カスタム)』をクリックします。

 

「タグ → その他のパーツ → 目次(カスタム)」

 

すると下記画面のようにテキストのみの目次が表示されます。

 

目次(カスタム)表示画面

 

プレビュー画面でみますと以下のように表示されます。

 

プレビュー画面

 

ここまで目次の表示設定は完了になります。

 

次に、クリック後にページへ飛べるようにHTMLリンクの設定をしていきます。

 

1つずつ順番に解説していきますね
KEI

 

手順②:目次(カスタム)タグに「#menu1」を追加する

 

目次(カスタム)のHTMLリンクの設定をしていきます。

 

  • 記事作成画面の右タブ「ビジュアル」 → 「テキスト」に切り替える
  • 「#」を「#menu1」にする(以下キャプチャ黄色箇所)

「#」に入れる名称はなんでもOKです。今回は仮で「#menu1」にしています。

 

目次(カスタム)の設定方法

 

修正前の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>

 

修正後のHTML

<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>

<ul class="st_toc_list">
  <li><a href="#menu1">メニュー1</a></li>
  <li><a href="#menu2">メニュー2</a></li>
  <li><a href="#menu3">メニュー3</a></li>
</ul>
</div>

※上記のHTMLソースをコピペしてもOKです

 

同様に「# → #menu2(メニュー2)」「# → #menu3(メニュー3)」に変更したら完了です。

 

また、『メニュー1』『メニュー2』『メニュー3』と書かれているテキスト部分は、ページ見出しの名前になりますのでお好みのテキストに変更して下さい。

 

手順③:見出しのaタグの設定

 

次に、目次クリック後に遷移先(見出し)へ飛べるように、見出し側にもHTMLリンクの設定をしていきます

 

まず、『段落 → 見出し2』をクリックして、見出しを生成し『テキスト』に画面を切り替えます。

 

 

「<h2></h2>」を『<h2 id="menu1">タイトル名</h2>』に変更します。

 

 

修正前のh2見出し(サンプル)

<h2></h2>

<h2></h2>

<h2></h2>

 

修正後のh2見出し(サンプル)

<h2 id="menu1">タイトル名</h2>

<h2 id="menu2">タイトル名</h2>

<h2 id="menu3">タイトル名</h2>

※こちらをコピペしてもOKです

 

あとは「タイトル名」をお好みの名前に変更して完了です。

 

念のため目次をクリックして問題なくページへ飛ぶか確認してみましょう。

 

これで目次(カスタム)の設定方法は完了です!

 

アフィンガー5で目次を設定する方法②:
目次(TOC+)

目次(TOC+)での設定方法

 

次に『目次(TOC+)』を使っての設定方法について解説していきます。

 

  • ①:プラグインのインストール
  • ②:プラグインの基本設定
  • ③:目次デザインのカスタマイズ

 

①:プラグインのインストール

 

WordPressのサイドメニュー『プラグイン → 新規追加』をクリックします。

 

新規追加画面にいきましたら右上入力ボックスに「table of contents plus」と入力します。

 

プラグイン:table of contents plus

 

画面が切り替わりましたらインストールして「有効化」ボタンをクリックします。

 

②:プラグインの基本設定

 

インストールが完了しましたらサイドメニューの『設定 → TOC+』をクリックします。

 

下記の画面になりましたら、各項目の細かい設定をしていきます。

 

『設定 → TOC+』画面

 

今回は設定しておくと良い初期設定について紹介します。

 

  • 表示条件 → 2つ以上
  • 以下のコンテンツタイプを自動挿入 → 「post」「page」にチェック

 

この2つは始めに設定しておきましょう。

 

後は「文字サイズ」や「デフォルトで目次を表示させるか」の設定になるので、お好みでカスタマイズしてみて下さい。

 

③:目次デザインのカスタマイズ

 

最後に、目次デザインのカスタマイズについて紹介します。

 

目次デザインのカスタマイズ方法は「外観 → カスタマイズ → オプションカラー → 目次プラグイン(すごいもくじ)」から設定できます。

 

「外観 → カスタマイズ → オプションカラー → 目次プラグイン(すごいもくじ)」

 

目次プラグイン(すごいもくじ)では、細かい文字色や周りのボーダーの太さや色の設定ができます。

 

設定ができましたら「公開」ボタンを忘れずにクリックして完了です!

 

最後に記事作成画面から「タグ → その他のパーツ → 目次(TOC+)」をクリックして、目次の表示を確認します。

 

 

これで「目次(TOC+)」を使っての目次設定は完了です。

 

設定お疲れ様でした!
KEI

 

まとめ:AFFINGER5(アフィンガー5)の2通りの目次設定

 

いかがでしたでしょうか。

今回はAFFINGER5(アフィンガー5)の目次の設定を2通りで紹介しました。

 

アフィンガー5の目次を設定しておくと読みたいページまでダイレクトに飛べるのでとても便利な機能です。

 

その他にもアフィンガー5には設定しておくと役立つ機能がたくさんありますので、もしよければ以下も参考にしてみてください!

 

 

今回は以上です。

 

本記事が役に立ちましたら、幸いです!

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)