DigiPress

Highly Flexible WordPress Theme

メニュー

Table of Contents Plus の目次をレスポンシブと番号の有無に対応させたカスタムCSSサンプル

Table of Contents Plus の目次をレスポンシブと番号の有無に対応させたカスタムCSSサンプル

WordPressで記事や固定ページを投稿した際に、本文の見出し(H1〜H6)タグの数と構造に応じて自動的に目次を作成し表示してくれる、もっともポピュラーなプラグインといえば 「Table of Contents Plus」。

デフォルトでは、以下のようなシンプルな味気ないデザインですが、プラグインの設定でデフォルトのCSSを無効にして、よりデザイン性の高い独自のスタイルにカスタマイズすることができます。

TOC+ プラグインのデフォルト表示

ここでは、「Table of Contents Plus」の目次デザインのためだけに外部WebフォントやFont Awsomeのような重たいアイコンフォントデータを使用せずに、CSSのみで目次コンテンツをスタイリングするコードのサンプルをご紹介します。

以下に掲載しているCSSは、コピーしてそのままテーマのCSSに直接追加したり、テーマにオリジナルCSSを組み込めるオプションがある場合はそこに追記するだけで利用できます。
DigiPressテーマの場合は、「オリジナルCSS」に追加してください。

TOC+ のカスタマイズCSSの要件

  • 外部Webフォントを使用しない
  • 目次コンテンツのためにアイコンフォントを使用しない
  • レスポンシブに対応
  • 「番号振り」表示の有無に分けてCSSを作成

Table of Contents Plus のCSSを無効にする

まずは、プラグインの設定にてデフォルトのCSSを読み込ませないようにしておきます。
WordPress管理画面の「設定」→「TOC+」を開きます。

「上級者向け」の設定を表示します。

「CSS ファイルを除外」のチェックボックスにチェックをして「設定を更新」ボタンをクリックします。

番号振りなしの場合

TOC+ には、自動で項番の数値を連番で表示してくれる機能がありますが、まずはこの番号振り機能を無効にして表示する場合のCSSが以下です。

背景カラーやフォントカラーは、適宜お好みで変更してください。

番号振りなしの目次表示例

このカスタムCSS

番号振りありの場合

まず、番号振り機能を有効にするために、TOC+ の設定にて「番号振り」にチェックをしておきます。

番号振り機能を有効にした場合のCSSが以下です。

番号振りありの目次表示例

このカスタムCSS

DigiPressテーマの場合

DigiPressテーマの場合は、テーマに独自のアイコンフォントが組み込まれているため、目次の見出しタイトルのアイコンは、例えば以下のようにしてカスタムできます。

DigiPressのデフォルトCSSについて

個々のプラグインの使用有無はユーザーごとで異なり、またプラグイン自体も将来的に主流が変動する恐れがあるため、個別のプラグインに対するCSSをテーマのCSSに予め組み込むことは不用意にCSSが肥大化するため、DigiPressテーマでは原則として行いません。

要件に応じて、必要なCSSを必要なだけ「オリジナルCSS」に追加することで効率化することを前提としています。

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Google +
Pinterest
Pocket
Evernote
Feedly