【おすすめプラグイン】自動で目次作成して表示Table of Contents Plus【ワードプレス】 


TableofContentsPlus目次表示設定方法使い方

 

Table of Contents Plusとは?

 
Table of Contents Plusとは

あなたの書いた記事の目次を自動で作成し

表示してくれるプラグインです。

 

この記事の最上部に表示されている目次が

このプラグインにあたります。

 

目次の文言をクリックすると

読みたい場所まで一気にスクロールされます。

 

比較的長い文章を書く方や

Hタグで見出しを作って文章を区分けされている方には

とてもおすすめのプラグインです。

 

このプラグイン、

結構細かいところにまで手が届きます。

 

例えば

「たまには見出し2つくらいしかない短い文章だって書くし

目次まで必要ないことだってあるし」

という方には

『見出し〇個以上の記事のみ目次を作る』と設定しておくことができます。

そうすると、見出しの数が少ない記事では目次を表示しません。

 

また、目次を配置する場所を設定することもできます。

記事の一番上に表示させるのか

導入部分の後ろで、かつ本題へ入る前の部分に表示させるのか

などなど。

 

色々と設定してみて

ご自身の好きな表示のさせ方を見つけてください。

 

関連記事:目次プラグインTable of Contents Plusで関連記事を表示させない設定方法

 

Table of Contents Plusの使い方

 
では早速使っていきたいと思います。

まずはインストールの方法です。
 

インストールの方法

 
ダッシュボードの『プラグイン』➡『新規追加』をクリックします。

BrockenLinkChecker00

 

空欄に『Table of Contents Plus』と入力しEnterを押します。

TableOfContentsPlus

 

検索結果にTable of Contents Plusが表示されますので

『今すぐインストール』をクリック。

TableOfContentsPlus01

 

『プラグインを有効化』します。

TableOfContentsPlus02

 

 

これでインストールと有効化は完了です。

続いて設定方法へ進みます。

 

 

基本的な設定方法

 

<基本設定タブ>

TableOfContentsPlus03
 

表示する場所:

    目次を表示させる場所です。
    『最初の見出しの前(デフォルト)』か『トップ』がおすすめ。

表示条件:

    いくつ以上の見出しがあれば目次を表示させるか。
    2か3くらいが標準的でしょうか。

次の投稿タイプのときに表示:

    Postは投稿記事。Pageは固定記事。
    投稿記事に目次を入れたいときはPostにチェックを入れてください。

見出しテキスト:

    目次そのものの上にテキストを付けるかどうか。
    テキストは「目次」「コンテンツ」など。
    『表示非表示切り替えボタンのテキスト』はチェックを入れておきましょう。
    

 
 

TableOfContentsPlus04
 

階層表示:

    大目次だけでなく小目次も表示するかどうか。
    チェックを入れることをおすすめします。

番号振り:

    目次に自動的に番号を振るかどうか。

スムーススクロール:

    目次をクリックすると目的位置までスムースにスクロールするか
    ジャンプするか

デザイン

横幅:

    目次の横幅の設定。デフォルトのままでOK。

回り込み:

    目次の横に本文などの記事を回り込んで表示させるか。
    デフォルトの『なし』でOK。

文字サイズ:

    目次の文字サイズ。

 

TableOfContentsPlus05

デザイン:

    目次のデザイン。お好きなものを選んでください。
    背景色などを変えたい場合はカスタマイズを選択。

 
 

<上級者向け>
 

『上級者向け』を開くと

より高度な設定が可能です。

 

特に必要だと思われる部分は

『見出しレベル』。

TableOfContentsPlus06
 

どのhタグから目次の見出しとして採用するかの設定です。

heading 3 – h3
heading 4 – h4
heading 5 – h5
heading 6 – h6

にチェックを入れるパターンが多いと思います。

 

h1はブログタイトル

h2は記事タイトル

h3からが文中の見出し

となる場合が多いからです。

 

ワードプレスのテーマ(テンプレート)によっては

h2やh4の場合もある可能性がありますので

チェックを入れてみて目次にどこの文言が表示されているか

確認して調整してください。

 

 

設定が終わったら

『更新』を押して完了です。

 
 

背景の色を変える方法

 
上記のように基本の設定をすると

目次の表示はこのようになります。

TableOfContentsPlus07

 

「う~ん、

ありきたりで、もうちょっと変化を持たせたい。」

という時に

背景の色を変える方法です。

 

TableOfContentsPlus08

基本設定タブの『デザイン』の『カスタム』を選択し

背景のカラーコードを入力します。

 

試しに「ffdead」を入力してみました。

TableOfContentsPlus09

 

文字の色が合わないので黒にしたいと思います。

『リンク』のカラーコードを「000000」にしました。

TableOfContentsPlus10

かなり落ち着きましたね。

 

このように

マウスオーバー(マウスを合わせた時)の色や

閲覧済みの色を自分仕様に変更することができますので

色々試してみてください。

 

 

ちなみに

ブログに使う色を決める際にとても役立つツールが

Google chromeのColorPick Eyedropperという拡張機能です。

 

知りたい色の上にマウスを乗せると

そのカラーコードが一発で分かる機能なんですが

これが本当にブログ作りには役立ちます。

 

自分のブログのテーマになっているカラーコードを確認する際や

別のブログを見ていて偶然見つけた素敵な配色のカラーコードを知りたい時など

にささっと使えますので

興味のある方は使ってみてください。

 

関連記事:目次プラグインTable of Contents Plusで関連記事を表示させない設定方法

 


コメントを残す

サブコンテンツ

プライバシーポリシー

クレジットカード盗難

このページの先頭へ