Word Press 副業

【 Word Press 】プラグイン「TOC+」目次を中央に配置する(Stinger+2)

更新日:

今回は、ワードプレスのプラグインTable of Contents Plus(TOC+)を使っていて
不便に感じたことがあったのでその解消方法を紹介していきます。タイトルにもなっていますが、TOC+で目次を
作っていると目次の表示位置が真ん中ではなく端によってしまうことです。

そんな問題を解消する方法を紹介していきます。

その前に使っているテーマなどを紹介しておきます。
ブログ自体は「Word Press」を使って書いています
テーマは「Stinger+2」と言う無料のテーマを使用しています。

それでは早速やっていきましょう!!

前提として「TOC+」のプラグインは導入されており、
目次の表示はブログに完了しているものとします。

TOC+ には目次を中央に表示させる設定がない

これがあれば一番簡単なのですが、TOC+の標準機能としては目次を中央に配置できません

変なの出ちゃってますけど、

上の画像のように

普通にプラグインを使うだけでは端によってしまっていますね。

これを中央にしていきたいと思います。

CSSを追加して位置を変更する

プラグインの設定から変更することができないので、
CSSを追加して表示位置を中央に変更したいと思います。

CSS追加時の注意事項

CSSを追加したり変更する際は何が起こるかわかりません
不測の事態を予想して、ブログのバックアップを取っておくようにしましょう!

また、CSSによる変更方法はここで共有しますが完全個人の責任で行うようにお願いします。
ブログが消えたからと僕に文句を言わないようにだけお願いします、
と言って、僕はバックアップ取らないでやりましたけどw

CSS追加方法

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

/*【Table of Contents Plus中央表示】*/
#toc_container {
margin-left: auto;
margin-right: auto;
}

まず、上記コードをコピーしてください。

2.ワードプレス をカスタマイズする

画像の外観部分にカーソルを合わせると右側に吹き出しが出てきます
次にカスタマイズをクリックします。

3.コピーしたコードを貼る

カスタマイズ画面が表示されたらメニュー画面をスクロールして
一番したの「追加CSS」を選択します。

次に表示された画面にコードを貼り付けます。

その後右上の「公開」を押して終わりです。

4.サイトを確認

ここまで完了すれば手順は終わりですので実際にサイトにいって中央に表示

おまけ

おそらく今見ると、僕のブログと皆さんのブログでは表示されている
目次の形が違うと思います。

なので、最後に僕のブログの目次のように角を丸くする方法を載せておきます。
ここまで出来た人なら1分もあれば出来てしまうと思いますよ!!

/*TOC+ 角丸*/
#toc_container {
border-radius: 20px;
}

上記のコードを先ほど貼ったコードの下に追加するだけです。
それだけで、角が丸くなります。
コード内の「20px」の部分を弄れば丸さを変えることも可能です。

 

そこまで難しくない手順で目次を中央に表示させることができます
目次の有無はアドセンスなどの合格に必要と噂されていますので実践してみては
いかがでしょうか。(僕は目次なくても合格しました。)


-Word Press, 副業
-, , , , ,

Copyright© Sahi Blog , 2022 All Rights Reserved Powered by STINGER.