【 WordPress 】プラグイン「TOC+」で、目次の表示位置を中央にする方法

WordPress 編集画面
WordPress 編集画面

このブログは「 WordPress 」を使って作っています。

テーマは「 Simplicity2 」を利用させていただいています!

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

このテーマの作者様はこのテーマを使う時に「親テーマと子テーマをインストールし、子テーマを利用することを強くお勧めします。」とおっしゃっているので、私も子テーマをインストールして使っておりました。

なのに先日、「 Simplicity2 」の親テーマが有効化されていることに気づきました!

以前はきちんと子テーマを有効化して使ってたはずなのに、なんで…

よくよく考えてみると、何のためだったか忘れましたが、子テーマから親テーマに変更したことがあったのです。

それが、親テーマに戻したつもりが戻しておらず、ずーっと親テーマを使っていたという事のようです。

子テーマに戻すと、ちょこちょこと修正が必要な部分がありましたが、特に問題なく表示できたので一安心^^;

ただプラグイン「Table of Contents Plus (略してTOC+)」で生成して表示している目次が、左に寄って表示されています。
(親テーマの時は、中央に表示させていました。)

これを中央に表示させるやり方をすっかり忘れていたので、ここで忘備録として載せておくことにしました。

 

スポンサーリンク

目次を表示させるプラグインとして、先ほどにもご紹介した「Table of Contents Plus (略してTOC+)」を利用しています。

このプラグインは、インストールすると自動で目次を表示させることができる、便利なプラグインです。

TOC+の設定には、どのレベルまで目次に表示させるかや、デザインもいくつか用意されていて変更することができます。

ただ、目次の表示位置(左・右・中央)だけはデフォルトの「左寄せ」のみで、設定を使って変更することができないのです。

上の画像はこのサイトのページです。目次が左に寄っています(赤枠)
これを中央に表示させたい訳です。

 

設定で位置の変更ができないので、CSSを使うことになります。

CSSと聞くとちょっと難しそうですが、親切な方もいらっしゃって、中央に表示させるためのコードをブログで紹介してくれていたりします。

今回は下記のサイトを参考にさせていただきました。(ありがとうございます!)

Table of Contents Plus( TOC+)の目次を中央寄せにする方法を紹介します。中央寄せにする方法だけでなく、中央寄せにならない時の対処法も記載しています。また中央寄せっぽく見せる小ネタも記載していますので、参考にしてみてください。

 

CSS追加の前の注意点

不測の事態が起こることが、ないとは言い切れません。

必ずバックアップを取ってから作業するようにしましょう。

 

CSS編集の方法

それでは実際にやっていきたいと思います。

1.CSSのコードをコピーする
下記のコードをまるっとコピーしてください。

/* TOC+プラグインの中央寄せ */
#toc_container {
        margin: auto;
}
/* ここまで */

「 /* 」と「 */ 」の間はコメントとなっており、TOC+の位置設定には関係がないのですが、後でCSSを見たときに、なにが書いてあるのかがわかるようにしておくことは大切です。
すべてをコピーしておきましょう。

 

2.WordPress の編集画面(ダッシュボード)のメニュー「外観」をポイントし、表示されたメニューの「カスタマイズ」を開きます。(赤枠)

WordPress のメニュー
WordPress のメニュー

※「外観」をクリックしても、その下に「カスタマイズ」等のメニューが表示されます。

 

3.カスタマイズ画面が表示されたらメニューをスクロールし(①)、一番下にある「追加CSS」を表示しクリックします(②四角枠)

カスタマイズのメニュー
カスタマイズのメニュー

 

4.「カスタマイズ中・追加CSS」が開きますので、そこに先ほどコピーしたコマンドを貼り付けます(①)
できたら「公開」をクリックして保存します(②)

追加CSS コマンド貼り付け
追加CSS コマンド貼り付け

赤枠より上に書いてある文章は、はじめから入っている文章です。(ない場合もあるかもしれません。)

削除してしまっても特に問題はありませんが、使い方ページのURLが載せてあったりするため、私は念のため残しておきました。(サイトは英語表記のようですが)

 ※このコマンドのほかに追加しているCSSがある場合は、コピーして別に保存しておくと安心です。

 

5.サイトを開いて、確認してみましょう。先ほど目次が左に寄っていたページを開いてみます。

真ん中に表示された目次
真ん中に表示された目次

赤枠で囲んだ目次が、本文部分の真ん中に表示されていますね。

これでCSSの編集(追加)ができました!

 

まとめ

CSSの編集をするとなると、もし表示されなくなってしまったら、という心配もあってちょっと怖いですね。

しかし、今回のようにCSSを追加するだけの場合、テーマがもともと持っているCSSファイル自体を触るわけではないので、表示されなくなったりという心配はほぼありません。

テーマのCSSを編集した場合、どこをどう変えたのか、もともとはどうなっていたのかがわからなくなってしまっても、すべて削除するわけにはいきません。
(ですから、バックアップを取っておくことが大切なのですが。)

一方追加CSSを利用した場合、追加したCSSがうまく動かなくても新たに追加したCSS部分を削除すれば元の状態に戻りますし、どうにもならない場合は最後の手段で追加CSS内をすべて削除すれば、そこだけやり直せばいいだけです。
(たくさんあると、ちょっと大変ですが^^;)

そうはいっても、不測の事態は起こるかもしれませんので、バックアップはしっかり取っておいてくださいね!