WEB開発 2019年03月12日公開

【コピペOK】Table of Contents Plusを綺麗なデザインにカスタマイズしよう

Table of Contents Plusを綺麗なデザインにカスタマイズ

WordPressの見出しプラグインといえば、「Table of Contents Plus」ですが、プラグイン搭載のデザイン変更機能では、あまり自由に編集できません。

細かいデザイン設定も用意されていますが、項目が多く、めんどくさいです。

というわけでさっとCSSを書いてデザインを変更しましょう。

変更するデザイン

こちらがデフォルトのデザインです。

これを…

こんなデザインに変更します。

あまり目立つ変化はありませんが、テキストを見やすいサイズに変更し、横幅を100パーセントに指定しているため、右にできる余白を消しています。

サンプルCSS

というわけで、とりあえず下記コードをCSSにコピペしてください。

#toc_container {
    width: 100% !important;
    border: 1px solid #ddd;
    border-radius: 3px;
}

ul.toc_list {
    font-size: 16px;
}

すると弊社のWEBサイトと同じデザインになると思います。

まとめ

いかがでしょうか。

デザインはシンプルなままですが、雰囲気は変わったと思います。

ご参考にしていただけたら幸いです。

ではでは。

Writer

フクチ

フクチ| CEO


代表の福知です。 よろしくお願いします。









こちらの記事もおすすめ

Related Posts