Table of Contents Plusの使い方!!CSSでおしゃれに目次カスタマイズ

この記事のURLとタイトルをコピーする
WordPressプラグイン
読者さん
読者さん
Table of Contents Plusの使い方を、おしえてください!!

って疑問を、解決していきます。

導入してかんたんなチェックをいれるだけで、誰でも簡単に目次機能をいれられる WordPress プラグイン「Table of Contents Plus」。

わかりやすい使い方を画像つきで解説しながら、コピペでできる目次カスタマイズCSSを公開しています。

今日からあなたのブログにも、読者にやさしい目次機能をつけられますよ!!

というわけで今回は、Table of Contents Plusの使い方を解説しています。

Table of Contents Plusの使い方

Toc capture

Table of Contents Plus – WordPress プラグイン | WordPress.orgより引用

WordPressプラグイン「Table of Contents Plus」の使い方を、解説していきます。

Table of Contents Plusの使い方3ステップ

STEP1:Table of Contents Plusをインストールする

Pzcardlink02

  • プラグイン新規追加をクリック
  • Table of Contents Plusを検索
  • Table of Contents Plusの今すぐインストール をクリック→有効化します

ダウンロード:Table of Contents Plus – WordPress Backup Plugin

作者が、「Michael Tran」さんであることを確認してください。

STEP2:基本設定で「以下のコンテンツタイプを自動挿入」にチェックする

Toc sidebar

設定 - TOC+をクリックしてください。

基本設定の「以下のコンテンツタイプを自動挿入」に、チェックを入れます。

チェックする項目
  • post

これで記事の「最初の見出しの前」に、目次が自動ででてくるようになります。

STEP3:目次を確認する

Toc default

各記事の最初の見出し前に、Table of Contents Plus の目次が表示されたことを確認してみましょう。

CSSでカスタマイズする予定なので、設定のプレゼンテーションは「カスタム」を選択しました。

説明終了!!

自動だから、むずしいことはないよ!!

基本設定について

Table of Contents Plus を使いやすくするために、基本設定について理解しましょう。

位置

選べる目次の位置
  • 最初の見出しの前(デフォルト)
  • 最初の見出しの後
サウンドオルビス
サウンドオルビス
おすすめは、最初の見出しの前ですよ!!

表示条件

見出しの数によって、目次の表示・非表示をえらべます。

選べる見出しの数は、2〜10 個です。

おすすめの設定は、4つ以上見出しがあるときですね。

ブログ記事の最小構成って、だいたいこんな感じですよね↓

ブログの最小構成
  • 見出し1:メインの内容
  • 見出し2:補足1
  • 見出し3:補足2
  • 見出し4:まとめ

見出しが3つまでだと、内容が薄くなりがちなんですよね。

ひとつの考えとして、参考にしてみてください。

以下のコンテンツタイプを自動挿入

自動で目次を表示させるコンテンツを、選ぶことができます。

あなたの WordPress にインストーされているプラグインやテーマによって、表示がかわるようです。

とりあえず、記事とページに目次を表示させるには、次のようにチェックしてください↓

  • post
  • page
  • custom_css
  • customize_changeset
  • oembed_cache
  • user_request
  • wp_block
  • amppb_layout
  • wpcf7_contact_form
  • pt_view
  • jp_mem_plan
  • amn_mi-lite
  • yyi_rinker
  • jp_pay_order
  • jp_pay_product
サウンドオルビス
サウンドオルビス
この設定を忘れると、メリットの自動表示ができないので忘れないね!!

見出しテキスト

目次のタイトルを変更できます。

チェックを入れることで、機能します。

設定項目内容
目次の上にタイトルを表示コンテンツ、目次、ページコンテンツ、この記事の目次、などを記入しよう。
ユーザーによる目次の表示・非表示を切り替えを許可「テキストを表示:見る」「テキストを非表示:戻す」など、わかりやすい文字を記入しよう。
最初は目次を非表示チェックをいれて、目次を見たい人だけに表示するようにすると、やさしいブログですね。

階層表示

Toc kaisounasi
Toc kaisouari

目次の階層を「あり・なし」で選ぶことができます。

個人的には、階層があったほうがみやすいと思います。

チェックを、入れておきましょう。

番号振り

Toc number

目次の階層に、番号をつけることができます。

番号をふってしまうと、見出しの混乱がうまれることがあります。

  • 2019年おすすめのプラグイン25選
  • 本当は教えたくないiPhoneアプリ10個
  • いま筋トレ男子がモテる3つの理由
  • ...など。

こういったタイトルの場合、目次の番号と、見出しのタイトルの数字がちがってしまう場合もでてきます。

小さなストレスですが、読者にとって最善の選択をしておきたいですね。

スムーズ・スクロール効果を有効化

目次のリンクをクリックした時の動作を、選ぶことができます。

この設定は、好みの問題ですね。

ご利用中のテーマによっては、うまく動作しないかもしれません。

スクロールの方が、同一ページ内だということがわかるので、わたしはチェックをいれています。

サウンドオルビス
サウンドオルビス
つぎからは、外観の設定にはいっていくよ↓

横幅

Table of Contents Plus 目次の横幅を、指定することができます。

選べる項目
  • 固定幅(200px〜400px)
  • 相対幅(自動・25%・33%・50%・66%・75%・100%)
  • ユーザー設定(px・%・em)

レスポンシブ対応のために、基本は相対幅の「自動(デフォルト)」を選べば問題ありません。

デザインを追いこむなら、ユーザー設定から細かく調整していきましょう!!

回り込み

Toc float

目次のまわりに、文字を回り込ませる設定ができます。

見出しの前なら、この設定をするひつようはありません。

記事の冒頭に目次を表示させるニュースサイトなどでは、デザイン的にありかもしれません。

文字サイズ

文字サイズを、設定することができます。

選べる文字サイズ
  • pt
  • %
  • em

デフォルトで 95% になっています。

記事の本文より 5% 小さいテキストは、目次として正解だと思います。

サウンドオルビス
サウンドオルビス
開発者、わかってるぅ〜!!

プレゼンテーション

Toc presenntation

プレゼンテーションでは、Table of Contents Plus のデザインテンプレートとカスタマイズをえらぶことができます。

選べるプレゼンテーション
  • グレー(デフォルト)
  • 水色
  • 透明
  • カスタム
選べるカスタマイズ
  • 背景
  • ボーダー
  • タイトル
  • リンク
  • リンク (マウスオーバー)
  • リンク (閲覧済み)

#だけ入力すれば、デフォルトカラーになります。

サウンドオルビス
サウンドオルビス
CSSでカスタマイズする場合は、「カスタム」を選ぼう!!

小文字(上級者向け)

目次のリンクを、すべて小文字にしてくれます。

見出しに大文字の英文がはいっていると、目次のリンクURLも大文字になってしまいます。

小文字のほうが、SEO的に有利かもしれません。

というのも、グーグルの マット・カッツ氏が「小文字の使用を推奨」しているからです。

いずれにせよ、問題なのは小文字と大文字をまぜると直打ちしづらいし、間違いのもとなので、小文字に統一した方がいいぐらいの認識でしょうか。

チェックを入れて、小文字だけになるようにしてください。

ハイフン(上級者向け)

目次のリンクで使われる記号を、ハイフンに変えてくれます。

SEO的な視点から、アンダースコアとハイフンは激論がかわされてきました。

  • アンダースコアは、1つの単語の塊として認識される
  • ハイフンは、ハイフンで区切ったところで、単語の意味を認識してくれる

どっちを使った方がいいのか?の結論としては、Google上級スタッフのジョン・ミューラー氏いわくどっちでもいいみたいです。

なので、ハイフンの設定も、どっちでもOKです。

ホームページを含める(上級者向け)

ホームページを含めるの動作が、確認できていません。

現在調査中です。

【ペルプページを参考】Table of Contents Plus | dublue

CSSファイルを除外(上級者向け)

Table of Contents Plus 独自のCSSファイルを、除外してくれます。

自分でカスタマイズする場合は、ここのチェックすることで「!important」をつけなくてもCSSが稼動できる範囲がふえます。

Table of Contents Plus のデザインを利用する方は、チェックを外しておきましょう。

テーマの見出し記号を保持

テーマに番号なしリスト要素に背景がふくまれていなかったため、動作を確認できませんでした。

基本的には、チェックなしで大丈夫です。

見出しレベル

目次に表示させる見出しを、設定することができます。

h1〜h6 まで選択可能です。

個人的には、h4まで表示させるようにしています。

h5まで見出しのあるブログは、なかなかないのですが...

あまり目次を長くしたくない場合は、h3 まででいいと思います。

サウンドオルビス
サウンドオルビス
個別記事ごと、見出しレベルを調整可能だよ!!

除外する見出し

目次に表示させたくない見出しを、単ンゴレベルで指定することができます。

あまり使い所がないかもしれませんが...

「極秘」「内緒」「読んでくれた方だけに...」

のように、限定的な内容を配信するときに役立ちそうです。

目次からもっとも読んでほしい特典部分まで、サクッとアクセスされてしまうと、せっかく書いた文章を読んでもらえないかもしれませんからね。

スムーズ・スクロール上部余白

スクロールしたときに、ヘッダー部分に重ならないように指定できます。

固定ヘッダーを利用していなくても、「30px」ぐらいブラウザ上部に余裕をもたせるといいですね。

画面端ギリギリでは、PCでもスマホでもタップしづらいですからね。

パス限定

特定のページのみで目次を表示させる場合に、URLをパスを指定することができます。

目次を個別記事ごとにショートコードで入力したくない場合、役に立つ機能ですね。

カテゴリ単位で指定することもできます。

基本的には、いじらなくてもOKです。

アンカーのデフォルト接頭辞

アンカーリンクの接頭辞を、変更することができます。

基本的には、いじらなくてOKです。

おしゃれなCSSカスタマイズ例

Table of Contents Plus を、CSSでおしゃれにカスタマイズしてみました。

とりあえず3つほど、カスタマイズ例をだしておきますね。

できるだけ、コピペで済むようになっています。

基本設定のプレゼンテーションが、「カスタム」であることを確認してから作業にはいってください。

サウンドオルビス
サウンドオルビス
評判がよければ、増えるかも?

超クールなモノクロ目次

Toc mono

#toc_container {
    position: relative;
    margin: 30px 0;
    padding: 10px;
    box-shadow: 0 1.5px 2.4px rgba(0, 0, 0, 0.15);
    border: 2px dashed #333 !important;
}
#toc_container span.toc_toggle a {color: #999 !important;}
#toc_container li a {font-weight: 700; color: #333;}
#toc_container li li a {font-weight: 300;}
#toc_container p.toc_title {
  display: inline-block;
  position: relative;
  font-size: 1.2rem;
  color: #333;
  }
.toc_title:before {
    content: "\f70e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #333;
    margin-right: 5px;
    font-size: 1.8rem;
}
#toc_container.no_bullets li {list-style-type: disc !important;}
#toc_container p.toc_title+ul.toc_list {margin-left: 18px;}

見易さ特化のシンプル目次

Toc simple

#toc_container {
    position: relative;
    margin: 30px 0;
    padding: 10px;
    box-shadow: 0 1.5px 2.4px rgba(0, 0, 0, 0.15);
}
#toc_container li a {font-weight: 700; color: #333;}
#toc_container li li a {font-weight: 300;}
#toc_container p.toc_title {
  display: inline-block;
  position: relative;
  font-size: 1.2rem;
  color: #333;
  }
.toc_title:before {
    content: "\f543";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #333;
    margin-right: 5px;
}
#toc_container.no_bullets li {list-style-type: disc !important;}
#toc_container p.toc_title+ul.toc_list {margin-left: 18px;}

マテリアル風の目次

Toc material風

#toc_container {
    position: relative;
    margin: 30px 0;
    padding: 10px;
    border-top: solid 5px #5ba9f7 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 1.5px 2.4px rgba(0, 0, 0, 0.15);
}
#toc_container p.toc_title {
  display: inline-block;
  position: relative;
  font-size: 1.2rem;
  color: #5ba9f7;
  }
.toc_title:before {
    content: "\f03a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    background-color: #5ba9f7;
    margin-right: 5px;
}
#toc_container li a {font-weight: 700; color: #333;}
#toc_container li li a {font-weight: 300;}
#toc_container.no_bullets li {list-style-type: disc !important;}
#toc_container p.toc_title+ul.toc_list {margin-left: 18px;}

ショートコードで目次を表示させる方法

目次を表示させるショートコード

[toc]

Table of Contents Plusは、記事ごとにショートコードで目次を呼び出すことができます。

基本設定の「以下のコンテンツタイプを自動挿入」で、チェックをつけないことが条件になります。

見出しレベルを個別記事ごとに、調整する方法

ショートコードで、目次に表示させる見出しレベルを制御できます。

目次で「h2」の見出しだけ表示させるショートコード

[toc heading_levels="2"]

目次で「h2」「h3」の見出しを表示させるショートコード

[toc heading_levels="2,3"]

書籍の紹介などで、タイトルを見出しに含めるととてつもなく長くなる場合などに、この方法が役立ちます。

関連記事

まとめ

Table of Contents Plusの使い方を、解説してきました。

プラグインを導入して、簡単な設定のチェックをするだけで、手軽に目次機能を挿入できるのはメリットですね。

さらに CSS で、おしゃれに目次をカスタマイズできるので、あなただけの目次を作ることができますよ。

ちょっとだけ古いプラグインなので、今後のアップデートに対応できなくなった時にどうするか?

サウンドオルビス
サウンドオルビス
考えておく必要がありますね。

そのほか、WordPress プラグインをお探しなら、こちらの記事もあわせてどうぞ↓

「WordPressプラグイン」カテゴリの新着記事はこちら

この記事のURLとタイトルをコピーする
記事へのお問い合わせ

サウンドオルビス

1,577,955 views

悩みからの解放宣言!!「音楽」と「テクノロジー」の悩みを解決するために、情報発信しています。現在「モバイルDTM」といえば、サウンドオルビス!!って言われるような記事をたくさん書いています。

プロフィール
  1. この記事へのコメントはありません。

ブログについて

「サウンド」「テクノロジー」をキーワードに、最新情報・商品レビュー・ハウツー講座・噂・小技など、個人で稼ぎたいクリエイターが役立つ情報を集めたメディアです。
Soundtech-Labo とは?

NEW POSTS

インスタグラム