WordPress│ブログカードと、TOC目次を1分で中央寄せに。

WordPress(ワードプレス)の、ブログカード（テーマ「Simplicity」の場合も）と、プラグイン”Table of Contents Plus”の目次タイトルは左寄せになっており記事の中央に寄せる<center>設定がありません。それを簡単に1分で中央寄せる、CSSカスタマイズをご紹介します。

中央寄せ ＣＳＳ カスタマイズ

センター寄せになった”Table of Contents Plus”

やり方はいたって簡単です。以下のコードをCSSに追加すればすぐ中央寄せのセンターになります。

・ブログカード「Simplicity」

.blog-card {

margin-left: auto;

margin-right: auto;

}

・ブログカード プラグイン”Pz-LinkCard”

.lkc-internal-wrap {

margin-left: auto;

margin-right: auto;

}

・Table of Contents Plusの目次タイトル

#toc_container {

margin-left: auto;

margin-right: auto;

}

の該当するコードを、ＣＳＳに追加すれば中央寄せになります。

セレクタの場所

ちなみにCSSのセレクタは以下の場所で確認することが出来ます。

Simplicityブログカードは

 Simplicityのテーマ機能のブログカードは、スタイルシートの中に記述されています。

.blog-card

外観 ⇒ テーマの編集 ⇒ Simplicityの、スタイルシート(style css)

から確認出来ます。

プラグイン”Pz-LinkCard”は

”Pz-LinkCard”は、プラグインなので、テーマの中にはありません。

”Pz-LinkCard”のプラグイン編集の中に記述されています。

.lkc-internal-wrap

 

プラグイン ⇒ プラグイン編集 ⇒ pz-linkcard/templete/pz-linkcard-templete.css の中で確認出来ます。

プラウザ「Google Chrome」からならサイトを開いた状態で確認したい箇所を右クリックし、”検証”からも確認することが出来ます。この使い方に慣れているならこの方法から確認するのが手っ取り早いでしょう。

プラグイン”Table of Contents Plus”は

”Pz-LinkCard”と同じくプラグイン編集の中に記述されています。

#toc_container

 

プラグイン ⇒ プラグイン編集 ⇒ table-of-contents-plus/screen.css の中で確認出来ます。

もちろん「Google Chrome」の”検証”からも確認出来ます。

これでいずれも中央寄せになりました。

下記中央寄せになった参考ブログカードです。

”Table of Contents Plus”の目次タイトルはページトップにありますので参考にして下さい。

いかがでしたでしょうか？

簡単なカスタマイズですが中央に寄っているだけで印象ががらりと変わるので、オススメですよ。

以上、

WordPress│ブログカードと、TOC目次を1分で中央寄せに

でした。