Ver1.3をリリースしました(10/16)

目次プラグイン「TOC+」の設定方法

TOC+の設定方法

WordPresssで記事に目次を挿入する場合には「Table Of Contents Plus(TOC+)」というプラグインを使うと便利です。見出し文を読み取って、自動で目次を作成してくれます。


TOC+の難点は、デザインがやや無味乾燥なところ。そこでSANGOではデフォルトでTOC+の目次が華やかに見えるようなスタイル指定をしています。

目次のスタイル

上部のボーダー、アイコン、目次というテキストにはメインカラーが使用されます(参考:SANGOで色を設定する)。

Table Of Contents Plusの設定方法

以下のようにTOC+の設定を行うことで、上で紹介したようなデザインの目次が挿入されるようになります。

手順1:TOC+をインストール

他のプラグインと同様に「プラグインの新規追加」から「Table Of Contents Plus」と検索してインストールします。細かな手順はここでは割愛します。

手順2:基本設定

プラグインを有効化したら、TOC+の設定を行います。以下の画像のように設定をしましょう。オレンジ色の文字で指定を書いていない部分については、自由に設定して頂ければOKです。

toc+の基本設定

位置は最初の見出し前にすると分かりやすいのではないでしょうか。

以下のコンテンツタイプを自動挿入で[post]にチェックを入れると、記事に見出しが挿入されるようになります。[page]にもチェックを入れると、固定ページにも挿入されるようになります。

見出しテキストは[目次の上にタイトルを挿入]にチェックを入れたうえで、欄内に「目次」などと入力します。

階層表示は、見出しの大きさから階層表示のある目次を作ってくれるための機能です。ここは好みですね。

番号振りのチェックは見た目的に外しておくのがおすすめです。

スムーズ・スクロール効果を有効化はオフにしておくのが良いでしょう。おそらく読み込むJavascriptが増えて少し重くなります。

続いて外観の設定です。

横幅は「自動(デフォルト)」

回り込みは「なし(デフォルト)」

文字サイズは「95%」

プレゼンテーションは「グレー(デフォルト)」

としましょう。

手順3:上級者向け設定(必須)

続いて上級者向け設定を行います。「上級者向け(hide)」をクリックすると設定項目が表示されます。

上級者向け設定

CSSファイルを除外には必ずチェックを入れましょう。このチェックが無いとデザインが崩れます。また、無駄なCSSを読み込まないようにしてくれるので、少し軽くなります。

見出しレベルには「h2だけ」もしくは「h2とh3だけ」にチェックを入れるのがおすすめです。h4までチェックを入れると、階層が増えて見づらくなります。

それ以外の部分のチェックは外しておきましょう。


設定は以上

これでTOC+の設定は終了です。上の画像より下にある「パス限定」などの項目は触れなくてOKです。

参考:目次をサイドバーに固定するには

目次を追尾させる例

記事ページで目次をサイドバーに固定するには、ウィジェット設定でTOC+を「追尾サイドバー」に追加します。詳しくは下の記事をご参照ください。

ウィジェットの設定をする
ウィジェットの設定をしよう:広告の貼り方も解説

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です