えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

【CSS】コピペするだけ!「目次」をカスタマイズする方法 *17年6月8日更新

\フォロー!/
\シェア!/

f:id:mshitech:20170211222705j:plain

いつの間にか目次が標準で出るようになっていますね。

先月からだったとは気づかなかった。

せっかくなので、目次のカスタマイズ法を載せようかと思います。

staff.hatenablog.com

CSSの貼り付け場所

以下で紹介するCSSの貼り付け場所はこちら。

デザイン→カスタマイズ→デザインCSS。

動きをもたせた *2017年6月8日追加

f:id:mshimfujin:20170608212109p:plain

f:id:mshimfujin:20170608212137g:plain

「目次」を少し目立つようにして、動きを加えました。

こんな感じで重ねると右にちょっときます。

「目次」の横のアイコンはFontAwesomeを利用しています。

各々導入してみてください。

こちらの要素をheaderの中へぽんと放り込んで下さい。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

blog.mshimfujin.net

先ほどのコードの挿入位置がよく分からない方はこちらを参照して下さい。

CSS

/* 目次のカスタマイズ */
.entry-content .table-of-contents {
position:relative;
border: 3px solid #707070; /* 枠の色はここを変更してください */
background-color: #FFF; /* 背景カラーです */
border-radius: 0px 0px 5px 5px;
margin-top: 3em; /* 各々の環境で数字を調節してください */
}
.table-of-contents:after { /* 目次部分 */
position: absolute;
font-family: FontAwesome;
content: '\f03a 目次'; /* 表示名を変えたければここを変更 */
background: #707070;
color: #fff;
right: 0%;
left: 0%;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 2px 0 2px 0;
margin: 0 -3px 0 -3px;/* -で指定しているところはborderと同じ数値にする */
text-align:center;
font-size: 1.2em;
letter-spacing: 2em
}
.table-of-contents li {
font-size:0.9em;
font-weight: bold;
color:#333;
}
.table-of-contents a{
color:#545454;
padding:8px 0;/* 列の間隔 */
display: block;
text-decoration: none;
transition-duration: 0.3s /* カーソルが戻る時間 */
}
.table-of-contents li a:hover {
padding-left: 7px; /* カーソル重ねた時に移動する距離 */
transition-duration: 0.3s /* カーソルが移動する時間 */
}

カスタマイズできそうなところにはコメントを入れておきました。

f:id:mshimfujin:20170608214143j:plain

構造としては、通常の目次の枠の上に、新たにグレーの表示枠を作ってそこに「目次」と表示させる形になっています。

 

背景色をもっと自分のサイトのカラーと調和させたいのであれば、こちらのサイトを参考にされてはいかがでしょうか。

www.colordic.org

目次が横に縦に並ぶバージョン

f:id:mshimfujin:20170608222549p:plain

先ほどの目次バージョン違いです。

CSS

/* 目次のカスタマイズ */
.entry-content .table-of-contents {
position:relative;
border: 3px solid #707070;
background-color: #FFF;
border-radius: 5px;
border-left-width: 50px;
}
.table-of-contents:before { /* 目次部分 */
display: inline-block;
position: absolute;
top: 50%;
left: -37px;
transform: -ms-translateY(-50%);
transform: -webkit-translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
font-family: FontAwesome;
content: "\f03a \A目 \A次";
white-space: pre;
color: #fff;
font-size: 22px;
line-height: 1;
}
.table-of-contents li {
font-size:0.9em;
font-weight: bold;
color:#333;
}
.table-of-contents a{
color:#545454;
padding:8px 0;/* 文字の間隔 */
display: block;
text-decoration: none;
transition-duration: 0.3s /* カーソルが戻る時間 */
}
.table-of-contents li a:hover {
padding-left: 7px; /* カーソル重ねた時に移動する距離 */
transition-duration: 0.3s /* カーソルが移動する時間 */
}

先ほどと同じく、色や背景色などを変えて運営しているサイトの雰囲気に合わせてください。

シンプルに変える

f:id:mshitech:20170211214820p:plain

通常のものに「目次」を加えただけの非常にオーソドックスな目次。

CSS

 /* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}
/* 目次のカスタマイズ */
.entry-content .table-of-contents {
background: #f8f8f8 ; /* 目次の背景色 */
border-radius:5px; /* 目次の枠の角の丸さを調節 */
}

標準では「目次」って文字が入ってないけど、これで「目次」が入ります。

INDEXなど英語にして変えてみるのも良いかもいいかもしれません。

背景色や角の丸さをブログの雰囲気に合わせて変更してください。

シンプルに変える2

今度は枠を無くして、影を付けることで少し浮いた感じに見えるようにしてみました。

f:id:mshitech:20170211214832p:plain

CSS

 /* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}
/* 目次のカスタマイズ */
.entry-content .table-of-contents {
border: none;
border-radius: 5px; /* 目次の枠の角の丸さを調節 */
box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}

大したことはありませんが、ざっとこんな感じです。

こちらの方に背景色を加えたいのであれば、デザイン1の方から目次の背景色を取ってきて移植してきてみて下さい。

また影の濃さですが、「 rgba(0,0,0,0.2)」最後の0.2の部分の数値をいじってみて下さい。

1が透過度最低で全く透過せず、0が透過度最高で完全に消えて無くなります。つまり、0.2の状態ですと透明度が20%ですよ、という状態です。

 

何か間違いや疑問などございましたら、ブコメかコメント欄にでもお願いします。

ではでは、また次の記事で・・・

 

インデックスって長いシリーズになりましたね。