WING(AFFINGER5及びSTINGER PRO2)のマニュアルはコチラです※パスワードは商品フォルダ内テキストを確認

AFFINGER4 STINGER PRO

オリジナル目次デザインの作成方法(Table of Contents Plus)

Table of Contents Plusを使用してオリジナル目次デザインを表示する方法を説明致します。

ステ子
目次がグっと見やすくわかりやすくなりますよ

※ver20171201以上より対応
※あくまでも当方のお勧め設定となりますので必須ではございません

[toc]

オリジナル目次デザインの作成の流れ

Table of Contents Plusのインストール&有効化

「Table of Contents Plus」プラグインをインストール。「外観」>「プラグイン」>「新規追加」にて「toc」で検索すれば出てくると思います。

https://ja.wordpress.org/plugins/table-of-contents-plus/

※Table of Contents Plusはサードパーティープラグインです。自己責任してご利用くださいませ

Table of Contents Plusの設定

  1. 表示条件を指定。ここでは目次を自動挿入ではなくショートコードによる挿入を想定していますので「以下のコンテンツタイプを自動挿入」のチェックを外しています。すべての記事に一括表示したい場合は適宜チェックを入れてください
  2. 「見出しテキスト」を「目次」に。日本語に変更した方がユーザーにとってわかり易いでしょう。
  3. 「階層表示」にチェック、「番号振り」のチェックを外し、「アンカーリンクにジャンプではなくスクロールする」にチェック
ステ子
目次はあった方がいい場合とない方がいい場合があると思うので、記事ごとに挿入する方が良いと考えます

  1. 「横幅」を100%
  2. 文字サイズその他は変更不要
  3. 「上級者向け」のshowをクリック
  4. 「CSSファイルを除外」にチェック

  1. 「見出しレベル」を指定
ステ子
表示したい見出しタグのレベルを指定します。<h2>~<h3>、多くても~<h4>までぐらいが理想だと思います。

テーマ管理の設定

「テーマ管理」>「その他」>「TOC+にオリジナルCSSを適応する」を有効化します

記事に挿入する

クイックタグで「目次(TOC+)」をクリックしてショートコードを挿入します

カスタマイザーでカラーを変更

「外観」>「カスタマイズ」>「オプション」>「TOC+(目次)のカラー」にて好きな色に変更できます。

目次アイコンの変更方法

目次のアイコンも変更できます。

fontawesomeで任意のアイコンを選択して矢印部の英数字(画像はf02d)をカスタマイザーで入力してください。

http://fontawesome.io/icons/

自作目次の挿入

記事ごとに目次を自分で作成したい方の為にテンプレートを用意しました。

「タグ」>「目次(カスタム)」で挿入されます

<div id="st_toc_container">
<p class="st_toc_title">目次</p>
<ol class="st_toc_list st-original-toc">
	<li><a href="#">これはダミーです</a></li>
	<li><a href="#">これはダミーです</a></li>
	<li><a href="#">これはダミーです</a></li>
</ol>
</div>

ダミーリンクの付いただけのリストなのでリンク先などは自身で作成する必要があります。(カスタマイザーのカラーに一部連動しています)

※st-original-tocクラスを削除するとTOC用に用意したオリジナルCSSが反映されます。
※基本的に1階層のみのリストを想定しています

 

NEW大幅に進化した新バージョンWING(AFFINGER5 / STINGER PRO2)好評発売中!

ユーザー様の声

ユーザーの声をさらに見る

新バージョン「WING」を見る

ご利用バージョンやテーマにより設定方法やキャプチャ画像が異なる場合がございます

※テーマアップデートにより情報が一部異なる場合がございます

-AFFINGER4, STINGER PRO

Copyright© STINGER's MANUAL , 2020 All Rights Reserved Powered by AFFINGER5.