目次と見出しのカスタマイズしてみた！ - ON THE ROAD～プチひきこもりの明日に架ける橋

f:id:bluesky-18-tt:20190328191728j:plain

以前から、色々な方のブログを拝見していて、目次や見出しを綺麗にカスタマイズされているのを見かけて

「いいなぁ～。私もやてみたいなぁ～」っと思っていたんです。

私の場合、今の時点では「服の着回し術」や「セルフネイルの施し法」でしか

目次や見出しを作ってはいないんですけれど

今後、他の記事でも設置したいと思った時に、目次や見出しがカスタマイズされている方が、見やすいような気がしたんです。

なので、検索好きな私は(笑)

いつものように、あれこれ検索しまくって、とても参考になる記事を見つけたんです。

まずは「目次」のカスタマイズは、↓こちらの方の記事がわかりやすく

バリエーションも豊富だったので参考になりました。

blog.minimal-green.com

私は、その中で「ステッチ風」の目次のコード↓を使わせてもらいました。

↓のコードを自分のブログの「デザイン」の「カスタマイズ」のところにある「CSS」の欄に貼り付けるだけなんです。

/* 目次ステッチ風 */
.entry-content .table-of-contents {
    position: relative;
    color:#555;/* 文字色 */
    background: #F2FBF7;/* 背景色 */
    border: 2px dashed #7fdbb6;/* ステッチ風ボーダー */
    box-shadow: 0 0 0 10px #F2FBF7, 4px 5px 6px 5px rgba(0,0,0,0.5);
    padding: 50px 25px 15px 45px;
    width: 97%!important;
    margin: 2em auto;
    box-sizing: border-box;
    border-radius: 8px;
}
.entry-content .table-of-contents::before {
    display: block;
    font-family: 'FontAwesome';
    content: '\f0fe';
    font-weight: bold;
    font-size: 130%;
    padding-left: 3px;
    margin: 0;
    position: absolute;
    top: 15px;
    left: 10px;
    color: #7fdbb6;/* アクセントカラー */
    border-bottom: none;
}

.entry-content .table-of-contents:after {
    display: block;
    content: '目次';
    font-weight: bold;
    font-size: 120%;
    position: absolute;
    top: 15px;
    left: 35px;
    color: #7fdbb6;/* アクセントカラー */
}
.entry-content .table-of-contents li {
    list-style-type: decimal;/* 番号振り */
    margin-left: 0;
}

.entry-content .table-of-contents li a {
    text-decoration: none;
    color:#555;/* 文字色 */
}
.entry-content .table-of-contents>li {
    font-weight: bold;
}

ボックスの色と、アクセントカラーだけは、自分の好きな色に書き換えたんですけれどね。

その際にコードを書き換えた場所は↓こちらでした。

◎ボックスカラーの設定

「background」の背景色と「box-shadow」の色を設定する部分を同じカラーコードにして

私は薄いピンクにしたかったので、↑部分を「#ffeff9」に書き換えました。

◎アクセントカラー（ステッチ部分）の設定

「color」「/*アクセントカラー*/」というコードが３か所出てきたので

その３か所を同じカラーコードにして

私は濃い目のピンクにしたかったので↑の部分を「#FF22FF」に書き換えました。

次に「見出し」のカスタマイズは、↓こちらの方の記事がわかりやすくて

やはりバリエーションが豊富だったので参考になりました。

ちなみに、私は「大見出し」しかカスタマイズしていません。

www.notitle-weblog.com

私は可愛らしいタイプの見出しにしたかったので↓のデザインコードを使わせてもらいました。

.entry-content h3 {
position: relative;
padding: 6px 0 6px 34px;
color: #111;
border-bottom: 2px solid #ce0d55;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
background-color: #ce0d55;
content: '';
}
.entry-content h3::before{
top: 0;
left: 14px;
width: 12px;
height: 12px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.entry-content h3::after{
top: 18px;
left: 8px;
width: 8px;
height: 8px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}