【コピペで簡単】MAGJAMで目次(TOC+)のカスタマイズ

獏(ばく)
MAGJAMでの目次(TOC+)カスタマイズ例を紹介します。

このブログはデジプレスさんが販売しているワードプレステーマ『MAGJAM』を使っているのですが、デジプレスさんの公式サイトで使われている目次のデザインは、非常にかっこいいですよね。

初期設定では目次のCSSの設定がされていないため、あのデザインを使う事は出来ないのです。なので、このブログでも公式サイトの目次デザインが使えるようにCSSの設定をしてみました。その時のメモを備忘録として残しておきたいと思います。

【追記:2018/05/24】
現在、デジプレスさんが目次のカスタマイズに対応してくださっているのでURLを貼っておきますね

TOC+の目次をレスポンシブと番号の有無に対応させたカスタムCSSサンプル
https://digipress.digi-state.com/members/expert-customize/toc-custom-css-sample/

記事内の目次生成には『Table of Contents Plus』

記事に目次を表示させるには、ワードプレスのプラグイン『Table of Contents Plus』が必要になります。目次を設定したいという方は、先にダウンロードと有効化しておくことをおすすめします。

MAGJAMに合う目次のCSS

デジプレスさんの公式サイトで使われている目次のCSSです。(このブログで使われているデザインです)ブラウザの『要素を検索』で、目次に使われているCSSをメモし、ワードプレスのCSS設定画面に貼り付けました。それだけなのでとても簡単です。CSSを載せておくので、気になった方は使ってみてください。(CSSの設定画面に貼り付けるだけで反映されます)

CSS

/* TOC+ */
#toc_container{
margin:20px auto 30px;
background-color: #f4f4f4; /* 目次全体の背景カラー */
border:3px solid #e0e0e0; /* 目次全体の枠線 */
border-radius:5px;
padding:38px 52px;
display:table;
min-width: 100%;
counter-reset:li;
}

/* テーマによるリストの装飾を一旦無効化 */
#toc_container ul.toc_list li::before{
content:none;
padding:0;
margin:0;
width:0;
height:0;
background:none;
box-shadow:none;
}

/* 目次の見出しタイトル */
#toc_container .toc_title{
text-align:center;
font-weight:bold;
font-size:118%;
padding:0;
}

/* 見出しタイトル左のアイコン */
#toc_container .toc_title::before{
position:relative;
font-family:dpicons;
font-size:14px;
content:”\e670″;
display:inline-block;
width:40px;
line-height:40px;
margin-right:8px;
border-radius:50%;
vertical-align:baseline;
speak:none;
-webkit-font-smoothing:antialiased;
color:#fff;
background-color:#7e9ebc;
}

/* 表示/非表示トグル */
#toc_container .toc_toggle a{
font-size:13px;
font-weight:normal;
padding:2px 4px;
}

/* 目次エリア */
#toc_container p.toc_title + ul.toc_list{
padding:20px 0 0;
margin:20px 0 0;
border-top:1px solid rgba(0,0,0,.1);
}

/* リスト共通スタイル */
#toc_container ul.toc_list li{
position:relative;
padding:0;
margin:0;
}

/* 目次リンク共通スタイル */
#toc_container ul.toc_list li a{
position:relative;
font-size:94%;
font-weight:normal;
text-decoration:none;
display:inline-block;
line-height:1.6;
padding:3px 0;
margin:5px 0;
transition:all .3s ease;
}
#toc_container ul.toc_list a,
#toc_container ul.toc_list a:visited{
color:#7e9ebc; /* リンクカラー */
}

/* マウスオーバー時 */
#toc_container ul.toc_list li a:hover{
text-decoration:none;
box-shadow:0 2px;
}

/* 親の目次 */
#toc_container ul.toc_list > li > a{
font-size:104%;
font-weight:bold;
margin-left:40px;
}

/* 親の目次(左側の連番) */
#toc_container ul.toc_list > li::before,
#toc_container ul.toc_list > li::after{
position:absolute;
top:3px;
left:0;
}

/* 連番背景 */
#toc_container ul.toc_list > li::before{
content:”;
display:inline-block;
vertical-align:bottom;
width:32px;
height:32px;
margin-right:7px;
border-radius:16px;
background-color:rgba(125,157,188,0.66);
}

/* 連番 */
#toc_container ul.toc_list > li::after{
counter-increment:li;
content:counter(li);
width:32px;
line-height:32px;
font-family:’Avenir Next’, ‘Helvetica Neue’, Arial, ‘Meiryo’,’Yu Gothic’, san-serif;
font-weight:400;
text-align:center;
color:#fff;
}

/* 子の目次 */
#toc_container ul.toc_list > li > ul{
margin-left:40px;
}

/* 子の目次の左側のアイコン */
#toc_container ul.toc_list > li ul li::before{
position:absolute;
top:3px;
left:0;
content:’\2023′;
display: inline-block;
width:14px;
height:28px;
line-height:28px;
font-size:18px;
color:#7e9ebc;
}
#toc_container ul.toc_list > li ul li a{
font-weight: normal;
margin-left:16px;
}

/* レスポンシブ設定(667px幅以下) */
@media only screen and (max-width: 667px){
#toc_container{
padding:20px 3vw;
min-width:auto;
width:100%!important;
}
#toc_container p.toc_title + ul.toc_list{
padding:20px 0 0;
}
#toc_container ul.toc_list > li > ul{
margin-left:30px;
}
}

まとめ

背景色や、ボーダーの色、太さは、CSSのカラーコードの部分、太さのピクセルを変更すれば変えることができます。自分は角丸のCSSを追加して使ってみました。目次のカスタマイズが気になった方は試してみてくださいね。

ABOUT THE AUTHOR

夢幻劇場一次創作ブログ獏(ばく)
一次創作(ファンタジー / 現代 / 和風 / おじさんと少女 / ロボ)が好きで、漫画や小説やイラストを描いています。
HNの由来は「悪い夢を食べて、良い夢を見せてくれる」という動物の獏からとっています。

LEAVE A REPLY

*
*
* (公開されません)

SPONSORED LINK

Return Top