目次プラグイン「Easy Table Of Contents」のデザインカスタマイズ

WordPress・プラグイン

目次自動挿入プラグイン「Easy Table Of Contents」のデザインをカスタマイズするCSSサンプルです。

プラグインの基本的な使い方は以下をご覧ください。

 

初期デザイン

すべてデフォルト設定のままの表示例です。

Easy Table Of Contents

設定項目から可能なデザイン

「幅」設定

Easy Table Of Contents
100%の表示例

「カウンタ」設定

「テーマ」選択

カスタム設定で変更可能なものは以下です。

  • 背景色
  • 枠線色
  • タイトル色
  • リンク色
  • ホバー時のリンク色
  • 訪問済みリンク色

デザインカスタムCSS

細かく分けていますので、必要な部分をコピーし、色やサイズなどをお好みに変更してご利用下さい。

記載したサンプルコードから以下のような目次も作れます。

Easy Table Of Contents
サンプル

 

センターに表示・枠に影を入れる

Easy Table Of Contents

 

CSS

#ez-toc-container { /*枠*/
margin: 38px auto; /*センター配置*/
padding: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); /*陰をつける*/
}

 

「目次」のタイトルデザイン

Easy Table Of Contents

CSS

/* タイトル */
div#ez-toc-container p.ez-toc-title{ 
font-size:20px; /* 文字サイズ */
left:20px; /* タイトル左に余白 */ 
position:relative;
}
/* タイトル枠 */
#ez-toc-container .ez-toc-title-container {
padding: 0.5em 1em; /*余白*/
color: #fff; /*文字色*/
background: #50aaff; /*背景色*/
border-bottom: solid 3px #7b8187; /*下線*/
border-radius: 10px; /*角を丸める*/
}

 

ホバー時の文字デザイン

 

CSS

/* ホバー時 */
#ez-toc-container ul a:hover {
text-decoration: none; /*下線を消す*/
color:#50aaff; /*文字色*/
}

 

大項目ごとに区切り線・項目の行間を広げる

Easy Table Of Contents

CSS

/*項目の間隔*/
#ez-toc-container ul ul{
margin-top: 5px;
margin-bottom: 0;
}
/*大項目ごとに区切り線*/
#ez-toc-container .ez-toc-heading-level-2{
border-top: 1px solid #ddd;
margin-top: 10px;
padding-top: 5px
}

 

 

関連記事