こんなデザインの目次がつくれます
この記事ではワードプレスでTOC＋というプラグインを使って目次を表示させ、そのデザインを変更するやり方を解説します。初心者なのでコードが汚いのは許してください！なんでもしますから。（なんでもするとは言っていない）
[say]カスタマイズは自己責任でお願いします。（自己責任についてはBear faceさんの記事を参照）[/say]
１プラグインを導入
ダッシュボードからプラグイン＞新規追加＞Table of Contents Plusで検索＞インストールして有効にします。
[alert title=”注意”]TOCで検索して初めに出てくるプラグインではありません！Table of Contents Plusというプラグインをインストールしてください。[/alert]
有効にしたらプラグイン＞インストール済みのプラグインに行って、Table of Contents Plusの設定をします。
目次の上にタイトルを表示とプレゼンテーションをカスタムに最低限チェックをいれればOKです。
[open title=’わたしの設定’]
上級者向けの見出しレベルはH2とH3にチェックをつけています。
[/open]
2CSSをコピペ
[codebox title=”コード”]
/*TOC*/
p.toc_title {
display: none!important;
}
#toc_container {
box-shadow:none;
padding: 0px;
border:none;
background: #f1f1f136;
border-left: 2px solid #a8edea;
border-right: 2px solid #fed6e3;
}
#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;
}
li {
font-weight: 500 !important;
}[/codebox]
かならず外観＞カスタマイズ＞追加CSSにコピペしてください。読み込みCSSの優先順位の関係で子テーマのstylesheet.cssに書いても適用されない場合があるからです。サクッと説明すると、目次に上下左右４つに分けて線を引いて囲むCSSにしています。
左右はborder-left・border-rightで一色ずつ設定。上は#toc_container:beforeで細くしたグラデーションの背景を線として利用して、下は#toc_container:afterとして指定しました。
を参考にしたので詳しい内容はこちらを読んでみてください。
さいごに
春夏らしい爽やかなグラデーションになりました。SANGOの魅力であるマテリアルデザインを破壊しまくっているこのサイトですが、個人的にはおしゃれで好きです。
グラデーションデザインは2019年現在もトレンドのようなので、継続して使っていきたいと思います。
コメント