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

WordPressの設定
https://pixabay.com/users/markusspiske/

「table of contents plus」(TOC+)はWordPressで目次を自動表示してくれる、とても便利なプラグインです。

 

使われている方は多いのではないでしょうか。

 

お役立ちxyzでも運用しているコレです(画像)↓

※2019年10月からWordPressテーマをCocoonに変更したため、table of contents plusは利用していません!

記事の見出しが一覧で表示され見たい部分をすぐに見られるので、読者にとっても便利なプラグインだと感じています。

 

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

 

中央配置が出来てない!

zどうやったんだっけーw

 

といつも嘆いていたので、備忘録代わりにまとめておきます。

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

table of contents plus(TOC+)を中央に配置します。

 

先にTOC+のインストール方法について紹介します。

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 of contents plusをインストール

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

 

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

 

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

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

「table of contents plus」の設定を以下手順で行います。

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

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

 

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

 

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+の表示を確認してみてください↓(この記事のリンク)

 

ね?なってたでしょ?

 

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

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

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

 

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

 

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

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

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

2. 親テーマの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
OYAKUN
上手く反映されない場合、キャッシュクリアやChromeのシークレットモードで開いてみることをオススメします
 
 

コメント

タイトルとURLをコピーしました