【WordPress】Simplicity2に目次を入れてCSSカスタマイズ

【WordPress】Simplicity2に目次を入れてCSSカスタマイズ

WordPressのテーマ「Simplicity2」に目次(コンテンツ)を入れて、その表示をCSSでカスタマイズ(装飾)する方法をご紹介します。

記事内容が大きくなり、たくさんのことを書いている記事には目次がないと読者さんにも分かりにくいし、SEOの観点からも目次を導入することをおすすめします。

目次を導入するには、プラグインをインストールすることで簡単に目次を設定することができますので、是非、お試し下さい。

 

プラグイン「Table of Contents Plus」のインストール

プラグイン「Table of Contents Plus」をインストールすると、あなたのブログに簡単に目次を挿入できます。

ダッシュボードから「プラグイン」→「新規追加」をクリックして、キーワードに「Table of Contents Plus」と入力します。

Table of Contents Plusが検索されたら「今すぐインストール」をクリックします。

インストールされたら「有効化」ボタンを押します。

 

「Table of Contents Plus」の設定

プラグインをインストールしたら設定を行います。

 

「インストール済みプラグイン」から「Table of Contents Plus」の「設定」をクリックします。

 

基本設定

 

「以下のコンテンツタイプを自動挿入」の「post」と「page」にチェックを入れる。

「目次の上にタイトルを表示」と「ユーザーによる目次の表示・非表示を切り替えを許可」にチェックを入れる。

 

上級者設定(CSSをカスタマイズする場合など)

 

ご自分で目次のデザインをCSSでカスタマイズされる場合は「CSSファイルを除外」にチェックを入れておきましょう。

見出しレベルは、目次に表示させる見出しを選択できます。

設定が終了したら、画面下にある「設定を更新」ボタンをクリックする。

これで、「Table of Contents Plus」の「設定」は終了です。

 

目次をCSSでカスタマイズ

次に表示される目次のデザインをCSSでカスタマイズします。

以下のサンプルのようにカスタマイズできるCSSをご用意しました。

上記の通りにデザインしたい場合は、以下のCSSコードをそのままコピペするだけで結構です。

 

子テーマのスタイルシートをカスタマイズ

CSSをカスタマイズする場合は、子テーマを使います。

子テーマのダウンロードは以下を参考にして下さい。

 

コピペする場所は、Simplicity2の子テーマ「style.css」に行います。

 

CSSが反映しないとき

CSSを変更・更新したのに反映されない場合は、以下を参考にして下さい。

 

まとめ

目次は、読者さんにとってもコンテンツ内容が分かりやすくて便利ですが、SEOに対しても重要なことです。

記事が多くなったりコンテンツの内容が多い場合は目次を付けて分かりやすくしましょう。

 

この記事が気に入ったら
いいね ! しよう

Simplicity2カテゴリの最新記事