スポンサーリンク

ON THE ROAD~プチひきこもりの明日に架ける橋

バツ2の私が経験を元に、色々綴っています

スポンサーリンク

目次と見出しのカスタマイズしてみた!

スポンサーリンク

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」「/*アクセントカラー*/」というコードが3か所出てきたので

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

私は濃い目のピンクにしたかったので↑の部分を「#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);
}

 

こちらの場合、特に書き換える部分もなくコピーして、目次の時と同じように

「CSS」の欄に貼り付けるだけで良いので簡単でした。

「中見出し」や「小見出し」もカスタマイズしたい場合は「h3」という部分

「h4」や「h5」に変えていけば良いようなんですけれどね(^-^)b

 

そんな風にして「CSS」の欄にコードを追加した結果できたのが

↓こんな感じの見出しと目次です。

 

例として↓この二行を大見出しにしてみました。 

1.目次のカスタマイズ

2.見出しのカスタマイズ

 

その結果、↓こうなりました。

 

1.目次のカスタマイズ

2.見出しのカスタマイズ

 

 

見出しの部分に仕切りがあると見やすいですよね!

目次も可愛らしくなったので、見栄えも良くなりました(*^^*)

 

他にもカスタマイズできることが沢山ありそうですけれど

とりあえず、これだけできたので満足しています(*^_^*)

毎度感じますけれど、こういったことを記事にして下さる方々がいて

本当に助かっています(^_-)-☆