WordPressの設定

table of contents plusが中央表示されないからやったこと

更新日:

WordPressで目次を自動表示してくれる超絶便利なプラグイン

「table of contents plus」

使われている方は多いと思います。

 

本サイトでも運用していますがコレっすね(画像)↓

記事を見やすくする意味でユーザービリティー向上であり、記事全体へのクロールを促せる素晴らしいプラグインであります。

 

毎々サイトを立ち上げてTOC+を設定するのですがたまに

 

中央配置が出来てない!

どうやったんだっけーw

 

と嘆くことが多かったので備忘録代わりにまとめておきます。

table of contents plusを中央配置しよう!

https://pixabay.com/users/geralt/

先ずは本来の目的であるtable of contents plusを中央に配置しやす。

 

インストール方法の説明がめんどくさいんで割愛がんばります(`・ω・´)ゞ

 

table of contents plusをインストール

table of contents plusをインストールしましょう。手順は以下です。

  1. ダッシュボード
  2. プラグイン
  3. 新規追加(インストール)
  4. 有効化

画像付で説明していきます。

 

1:ワードプレスのダッシュボードに入って・・

 

2:「プラグイン」をクリックします。

 

3:そしたら「新規追加」をクリック。

 

4:プラグ・インインストール画面に切り替わり、右上に検索ボックスが出現するので「table」とだけ入力します。

POINT!

モチロン「table of contents plus」と入力してもOKです。

 

5:tableに該当するプラグインが幾つか出てきますが、「table of contents plus」を選択し、「今すぐインストール」を選択。

 

6:インストール後→「有効化」を選択でサイト反映の準備完了です。

 

次に「table of contents plus」のプラグインの編集・設定やっていきます。

 

table of contents plusのプレゼンテーションはカスタムを選択

https://pixabay.com/users/27707/

では「table of contents plus」の設定を行います。

 

ただ1箇所の設定を指定するだけなんですが、重要です。

 

以下手順です。

  1. ダッシュボード
  2. 設定
  3. TOC+設定画面
  4. カスタム(を選択)

画像で順を追って説明します。

 

1:ダッシュボード→設定→TOC+をクリックします。

 

2:TOC+の設定画面が開いたら少し下へスクロールします。

 

3:プレゼンテーションという項目があるので、その中の「カスタム」を選択します。

 

4:「設定を更新」をクリックして保存します。

ここで「カスタム設定」にすることで、TOC+をCSSでカスタマイズすることが可能になります。

では、TOC+を中央表示にしていきましょう。

 

table of contents plusを中央配置させるCSSをstyle.cssへ追記

TOC+を中央表示に設定します。style.css(子テーマ)の一番下に以下を全コピペしてください。

 

追記:Table of Contents Plusを角丸にするCSS

TOC+を角丸にするCSSを追記しておきます。

 

先のCSSの構文の下に以下を追記してください。角が尖っているより優しい印象になり、なんとなく僕は好きです。

 

これでPC表示では中央にTOC+が表示され、角も丸くなる筈です。

 

本記事のTOC+の表示を確認してみてください↓(この記事のリンク)

 

ね?なってたでしょ?

 

真ん中に配置されると安心するのって僕だけでしょうか?

 

更にテーマがaffinger4の場合は別設定が必要

してENJIさん作成の神テーマ、affinger4ではTOC+をカスタマイズする際に別に設定が必要です。

 

以下、本当に僕個人の備忘録です。

 

1:ダッシュボード→affinger4管理の画面→「その他」の設定場所で、以下場所のチェックを外す。

「TOC+にオリジナルCSSを適応する」の左ボックスにチェックを入れないこと!

 

ここにチェックを入れるとaffinger4のオリジナルCSS設定が適応されてしまい、TOC+のstyle.cssカスタマイズが反映されなくなってしまいます。

 

親テーマのst-kanricss.phpの以下を修正する

もし上の設定を行ってもTOC+が中央表示されないとしたら、親テーマの

st-kanricss.php

を修正します。

 

  1. 親テーマ→st-kanricss.phpを選択して開く
  2. テキストの「PCサイズ」・「タブレットサイズ」のmargin-leftに「auto」を指示。

具体的には以下赤文字箇所を参考にしてください。

 

/*TOC+PCサイズの中央指示*/

<?php if(trim($GLOBALS['stdata96']) !== ''){ ?>

     /*TOC+*/

     #toc_container {

          background: #f3f3f3;

          border-left: 1px solid #ccc;

          box-sizing: border-box;

          margin-bottom: 20px;

          margin-left:auto;

          padding: 10px 20px 10px 0px;

     }

/*TOC+ダブレットサイズの中央指示*/

<?php if(trim($GLOBALS['stdata96']) !== ''){ ?>

     /*TOC+*/

     #toc_container {

          margin-left:auto;

          padding-left:10px;

     }

 

できればst-kanricss.phpもFTPサーバーで子テーマ作って置くと尚良し・・

 

table of contents plusを中央配置するまとめ!

table of contents plusを中央配置出来ましたか?

  1. プラグインTOC+をインストール
  2. TOC+の設定はカスタムを選択
  3. 中央配置のCSSをstyle.cssに追記

最大のポイントはTOC+の設定画面にて「カスタムに✔」を入れるところでしょうか。

 

自分で設定していてもカスタム選択がつい抜けがちなので侮れません・・

 

oyakun
上手く反映されない場合、キャッシュクリアやChromeのシークレットモードで開いてみることをオススメします
裏ワザ
【裏ワザ】WordPressのカスタマイズが表示されない!?一瞬で解決できるぞ!

WordPressをカスタマイズしたのに、結果が直ぐに表示されないことありませんか?   あれ?記述した場所が間違ってるのかな? テキスト間違ったのかな?   そうやって半日潰して ...

最適化!
【最適化】WordPress・内部リンク専用プラグインShow Article Mapがスゴイ

最適化された内部リンクはPVアップに直結します。 僕のサイト、近々内部リンク見直してからマイネオ成約数が2割以上増えた気がする。 PV数もかなり増えてるから厳密に何割増えたかはわかんないけど、それくら ...

広告と関連記事


  • この記事を書いた人
  • 最新記事
oyakun

oyakun

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

Copyright© OYAKUDACHI.XYZ , 2018 All Rights Reserved.