プラグイン - WordPress

「Table Of Contents Plus」の目次を見やすくするためのCSSデザイン変更事例

記事中の見出しを使って、自動で目次に生成してくれるWordPressのプラグイン「Table Of Contents Plus」

通常のデザインではちょっとごちゃごちゃして見づらかったので、CSSを使って見やすいデザインに変更した事例をご紹介します。

[widgets_on_pages]

ほとんどカスタマイズしていない状態のデザイン例

「Table Of Contents Plus」をインストールして、ほぼデフォルトだと上の画像のようなデザインが一般的です。

なお、「Table Of Contents Plus」自体の設定も前提として記載しておきます。

「Table Of Contents Plus」の設定内容

WordPressの管理画面、左サイドバーにある「設定」から「TOC+」をクリックし、以下のように設定。

  • 表示条件:2つ以上見出しがあるとき
  • 見出しテキスト:
    • 「この記事の目次」
  • 表示非表示切り替えボタンのテキスト:
    • 表示テキスト:「▼」
    • 非表示テキスト:「×」
  • 番号振り:チェックを入れない
  • 上級者向け
    • 見出しレベル:「heading 2 – h2」と「heading 3 – h3」のみチェックを入れる

「上級者向け」の見出しレベルですが、当サイトや事例のサイトでは記事タイトルが「h1」なので見出しになることが絶対に無いため、「Table Of Contents Plus」では「h2」以降が見出しとなります。

また、私の場合では「h4」を使うことも結構あるのですが、「Table Of Contents Plus」が生成する目次がごちゃごちゃになるので、「h2」と「h3」しか表示させないようにしています。

カスタマイズ後の完成イメージ

だいぶ見やすくなりましたよね?

ポイントとしては、

  • 「h2」のみスタイルシートで番号を付け、色を変えて太字にすることで「h3」と強弱を付けた
  • 「h3」は「h2」よりも薄くして、Webアイコンフォント「Font Awesome」を使ってリストマークを追加
  • 「この記事の目次」にも「Font Awesome」のアイコンを追加

というところですね。

「Font Awesome」については以下の記事をご参考ください。

関連記事賢威7でWebアイコンフォント「Font Awesome」を実装する方法

適用したスタイルシートの内容

当サイトやご紹介したサイトでは『賢威』の子テーマで運用しています。そのため、子テーマディレクトリの「base.css」に以下を記述します。

枠の色などは適宜、サイトに合うよう変更してください。

なお、「Table Of Contents Plus」の独自CSSを使わない設定もできますが、今回はその辺の変更はせずに、スタイルシートを上書きしています。

[widgets_on_pages id=2]

POSTED COMMENT

  1. […]  WebデザイナーFAN 「Table Of Contents Plus」の目次を見やすくするためのCSSデザイン変更事例 | WebデザイナーFANhttps://webdesigner.fans-web.net/3920記事中の見出しを使って、自動で目次に生成 […]

COMMENT

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