※当サイトは、アフィリエイト広告を含みます

一瞬で完了!Table of Contetns Plusで目次を中央表示させる方法|WordPressテーマ「Giraffe(ジラフ)」の使い方

この記事では、WordPressテーマ「Giraffe(ジラフ)」を使っている人に向けて、Table of Contents Plus(以下、「TOC」と記載)で目次中央表示させる方法をお伝えしたいと思います。ここでお伝えする方法は、あるコードを所定の位置にコピペするだけでできる方法です。ぜひ、この機会に実践してみてください。

初めにお伝えしておかなければいけないのですが、この記事は次の条件を満たしている人に向けた記事です。

■この記事がおすすめの人の条件■

【条件①】WordPressテーマ「Giraffe(ジラフ)」を使っている人

【条件②】Table of Contents Plus(目次を表示させるプラグイン)を使っている人

【条件③】目次を中央表示させたくていくつか方法を試したけど、上手くいかなかった人

 

TOCには、中央表示させる設定項目がない!?

Table of Contents Plus目次中央表示させる方法はネット上でたくさん公開されています。なぜそのような記事がたくさん公開されているのかというと、TOCには、目次を中央表示させる設定項目がないからです。そのため、もし目次を中央表示させたい場合、専用のコードを所定の位置に記載する必要があります。

 

ネット上で公開されている情報を実践したけど、中央表示させられなかった、、、

私は、恥ずかしながら、目次を中央表示させるまでにかなり時間がかかってしまいました。その期間は、約1ヶ月です。その間は、ブログの更新の合間にネットで情報を探して実践していましたが、どの方法を実践しても上手く中央表示させることができなかったんです。

例えば、次のコードを「テーマ編集」の「スタイルシート(style.css)」の一番下にコピペするという方法があります。

/* Table of Contents Plusを中央に表示させる */
#toc_container {
  marginleft: auto;
  marginright: auto;
}

実際にこの方法を実践してみましたが上手くいきませんでした。

確かに正しい方法なのだと思うのですが、私のやり方が間違っていたのか、そもそもテーマごとで微妙に記入する位置が違うのか、原因は解りませんが何度やり直してみても中央表示させることはできませんでした。

他にもいくつか方法を試してみましたが、

記事の投稿時期が古く、その記事で紹介されている画像が現在の表示と異なっていて実践を断念したり

ただ記載させるコードだけが書いてあるだけで、どこにコピペするのかが書いていなくて実践を断念したり

記事に公開されている通りに実践したけど上手く中央表示されなかったり

と上手くいきませんでした。

もう一度言いますが、多くのブログやサイトで公開されている情報は正しい方法だと思います。ただ私のやり方に問題があって上手くいかなかったのだと思います。

ですから、これからお伝えする方法は、そんな私でも、一瞬で目次を中央表示させることができたとても簡単な方法です。本当に一瞬なので見逃さないように注意してくださいね!

 

一瞬で完了!目次を中央表示させる方法

1.CSSコードをコピペする

まずは、このコードをコピーしてください。

/*【Table of Contents Plus中央表示】*/

#toc_container {
margin-left: auto;
margin-right: auto;
}

 

2.「ダッシュボード」→「外観」→「カスタマイズ」を開いてください。

 

上記のCSSコードをコピーしたら、ブログのダッシュボード内の「カスタマイズ」画面を開いてください。

 

3.「追加CSS」にコピーしたCSSコードを貼り付ける

上の画像の赤い□で囲ってある「追加CSS」という項目をクリックして、先ほどコピーしたCSSコードを貼り付けてください。

 

貼り付けるとこんな感じになります。

CSSコードを貼り付けたら、上部にある「保存して公開」をクリックしてください。以上で完了です。

一度自分のサイト画面に戻って目次が中央表示されているか確認してみてください。

 

まとめ

以上が、WordPressテーマ「Giraffe(ジラフ)」を使っている人に向けた、Table of Contents Plus目次中央表示させる方法でした。最後にもう一度、今回の方法をまとめたいと思います。

1.CSSコードをコピペする

2.ダッシュボード内の「カスタマイズ」画面を開く

3.「追加CSS」の項目にコピーしたCSSコードを貼り付ける

もしお時間があれば、すぐに終わりますのでこの記事を読みながら一緒に実践してみてください。

 

 

 

 

最新情報をチェックしよう!