この記事ではワードプレスでTOC＋というプラグインを使って目次を表示させ、そのデザインを変更するやり方を解説します。初心者なのでコードが汚いのは許してください！なんでもしますから。（なんでもするとは言っていない）
ばんかす
カスタマイズは自己責任でお願いします。（自己責任についてはBear faceさんの記事を参照）
１プラグインを導入
ダッシュボードからプラグイン＞新規追加＞Table of Contents Plusで検索＞インストールして有効にします。
注意
TOCで検索して初めに出てくるプラグインではありません！Table of Contents Plusというプラグインをインストールしてください。有効にしたらプラグイン＞インストール済みのプラグインに行って、Table of Contents Plusの設定をします。
目次の上にタイトルを表示とプレゼンテーションをカスタムに最低限チェックをいれればOKです。
上級者向けの見出しレベルはH2とH3にチェックをつけています。
2CSSをコピペ
コード
/*TOC*/
p.toc_title {
display: none!important;
}
#toc_container {
box-shadow:none!important;
padding: 0px!important;
border:none !important;
background: #f1f1f136!important;
border-left: 2px solid #a8edea!important;
border-right: 2px solid #fed6e3!important;
}
#toc_container:before,#toc_container:after {
content:"";
display:block;
height:2px;
width:100%;
background:-webkit-gradient(linear, left top, right bottom, from(#a8edea), to(#fed6e3));
background:-moz-linear-gradient(left, #a8edea, #fed6e3);
background:linear-gradient(left, #a8edea, #fed6e3);
}
#toc_container p.toc_title+ul.toc_list {
margin: 2em!important;
}
li {
font-weight: 500 !important;
}外観＞テーマ編集＞スタイルシートでコピペしてください。サクッと説明すると、目次に上下左右４つに分けて線を引いて囲むCSSにしています。
左右はborder-left・border-rightで一色ずつ設定。上は#toc_container:beforeで細くしたグラデーションの背景を線として利用して、下は#toc_container:afterとして指定しました。
を参考にしたので詳しい内容はこちらを読んでみてください。
さいごに
春夏らしい爽やかなグラデーションになりました。SANGOの魅力であるマテリアルデザインを破壊しまくっているこのサイトですが、個人的にはおしゃれで好きです。
グラデーションデザインは2019年現在もトレンドのようなので、継続して使っていきたいと思います。
コメントを残す