おしゃれでかわいい♪ より自分好みに目次をカスタマイズする方法☆

前々回はざっくりとはてなブログ全体をカスタマイズして

かわいくできたから見てほしい！！という話でした⇩

ruriha.hatenablog.com

前々回に話していませんでしたが、

私が使用しているデザインテーマは

公式のテーマ『Handwriting』を使い、

背景画像は『カスタマイズ』⇒『背景画像』にあるもので

ピンときたものを使っています🌟

背景画像は自分の持っている画像をアップロードして使えるようなので

いいデザインの画像か写真を見つけたら変えてもいいなぁと思いつつ♪

せっかく前々回でカスタマイズの話をしたので、

今回は『目次』のカスタマイズの仕方について

コピーするだけではなく、

より自分好みにカスタマイズする方法も

この記事に残しておこうと思います✨

編集場所やカラーコードは前々回の記事を見ていただけると嬉しいです🌸

最後に目次のカスタマイズ方法を探しているときに見つけたブログも

とても種類が豊富でおすすめなのでリンクを貼ってます💪

（⇩目次からすぐ飛べます🌠）

目次ビフォーアフター

今回も編集前後の違いを見ていただきたく

画像を貼りました！

テープ風に飾った「目次」の言葉と枠線がある分と

目次の上下に余白を多めに作ったので、

元の目次と比べるとスペースは取ってしまいますが

かわいさと見やすさで気にしない！！笑

参考ブログ

正直なところ、こちらのブログを読めば

コードでどこをいじっているのかも記載してくれているうえに、

色やデザインの変更方法まで載せてくれているので、

私がいじったところを重点的に紹介していこうかと思います！

【はてなブログ】おしゃれな目次にカスタマイズしてみよう！ - ひかりんブログ

るりはカスタマイズ☆

『ひかりんブログ』さんの目次のコードを引用し、変更したところを

赤色で番号①～㉓まで番号を振って解説します。

そのあと、私の目次のコードも貼りますね🌟

細かく説明することによって、自分で他のところも編集したくなった時の

参考になると嬉しいです🌸 

私の場合はパソコン用のデザインCSSのみ編集しました👩‍🎨

ひかりんブログさんの目次コードを表示・非表示

/* もくじカスタマイズ */
.entry-content .table-of-contents {
background-color: #f4f4ff;/* 背景色 ①*/
border: 2px dashed #ffb2ff; /* 線の太さ・破線・色 ②*/
box-shadow:1px 1px 6px 0px #ccc;
-moz-box-shadow:1px 1px 6px 0px #ccc;
-webkit-box-shadow:1px 1px 6px 0px #ccc;
-o-box-shadow:1px 1px 6px 0px #ccc;
margin: 20px 5px; /* 外側の余白 上下・左右③ */
padding: 20px 25px 15px 45px;
position: relative;
z-index: 0;
}
.entry-content .table-of-contents:after{
background-color: #4c6cb3; /* index背景色④ */
border-left: 2px dotted rgba(0,0,0,0.1);/*⑤*/
border-right: 2px dotted rgba(0,0,0,0.1);/*⑥*/
box-shadow: 0 0 5px rgba(0,0,0,0.2);
content: 'index';/*⑦*/
display: block;
margin: 0 0 10px 0;
padding: 5px 20px;
color: #f9fcff; /* index文字色 */
font-size: 120%;/* index文字大きさ⑧ */
font-weight: bold;
text-align: center;
position: absolute;
top: -10px;/*⑨*/
left: 20px;/*⑩*/
transform: rotate(-3deg);/*⑪*/
-moz-transform: rotate(-3deg);/*⑫*/
-webkit-transform: rotate(-3deg);/*⑬*/
-o-transform: rotate(-3deg);/*⑭*/
}
.entry-content .table-of-contents li a {/*⑮*/
text-decoration: none;/*⑯*/
color:#666699;/* 文字色 ⑰*/
font-size:14px;/*⑱*/
font-weight: bold;/*⑲*/
}
.entry-content .table-of-contents li {
list-style-type: none !important;
}
.entry-content .table-of-contents>li:before{/* リストマーク大見出し */
font-family: blogicon;
content: "\f02d";/* リストマーク */
position: absolute;
left: 1.6em;/* 左端からリストマークまでの距離 */
color: #ffb2ff;/* リストマークの色 ⑳*/
}
.entry-content .table-of-contents>li ul li:before{/* リストマーク中見出し */
font-family: blogicon;
content: "\f02d";/* リストマーク */
position: absolute;
left: 3em;/* 左端からリストマークまでの距離㉑ */
color: #ffb2d8;/* リストマークの色 ㉒*/
}
.entry-content .table-of-contents>li ul li ul li:before{/* リストマーク小見出し㉓ */
font-family: blogicon;
content: "\f02d";/* リストマーク */
position: absolute;
left: 4.8em;/* 左端からリストマークまでの距離 */
color: #ffb2b2;/* リストマークの色 */
}
.entry-content .table-of-contents>li:first-child {
padding-top: 15px;
}
.entry-content .table-of-contents ul>li:last-child {
padding-bottom: 10px;
}

るりはブログ変更＆解説

①目次内の背景色はブログの背景と同じ色がよかったので行まるごと削除しました。
②枠線（破線）を黄色にして、枠線の太さを2px⇒4pxに変更して太くしました。
③目次の余白を上下のみ20px⇒85pxに変更して大きくし、
　余分に改行せずに済むようにしました。
④『目次』と書かれたテープ部分の色と透明度を変えたかったので
　rgba()の表示に変えて、rgbはカラーコードを探して値を入力し、
　aは0（透明）~1（不透明）の数値で透明度を表すので、
　プレビュー画面を見ながら調整して入力しました。
⑤⑥『目次』と書かれたテープ部分の両端の切れ目を表す点線を
　　もう少し見やすくしたかったのでrgbaのaのみ0.1⇒0.2に変更しました。
⑦テープ内の文字の表記を『index』⇒『目次』に変更しました。
⑧『目次』の文字の大きさを120％⇒140％に変更して大きくしました。
⑨『目次』テープの上下方向の位置を-10px⇒-36pxに変更して、
　よりテープの位置が上に表示されるようにしました。
⑩『目次』テープの左右方向の位置を20px⇒-20pxに変更して、
　よりテープの位置が左に表示されるようにしました。
⑪テープ全体を水平より右肩上がりに傾けたかったので、
　プレビュー画面を見ながら-3deg⇒-15degに変更して傾けました。
⑫⑬⑭ここはなぜ丸ごと消したか記憶が合間ですみません．．．。
　　　検証してみたのですが、おそらく消したことによって、
　　　テープがより自分好みの傾きになったからだと思われます。
⑮～⑲目次内の文字の設定は以前設定したものが気に入っていたので、
　　　丸ごと削除しました。
⑳大見出しの横の星の色をピンク色からオレンジ色に変更しました。
㉑私の場合は中見出しの開始位置が星のある位置から右に離れていたので
　（且つ、中見出しの位置を変更できなかったので）、
　中見出しの横の星の位置を右にずれるように3em⇒4.2emに変更しました。
㉒中見出しの横の星の色を薄い赤色から黄色に変更しました。
㉓小見出し以降の設定は必要なかったのと、
　また私の場合はですが、入力しても変化のないコードだったので
　㉓以降はすべて削除しました。

るりはブログの目次コードを表示・非表示

/*目次カスタマイズここから*/
.entry-content .table-of-contents {
border: 4px dashed #fff499; /* 線の太さ・破線・色 */
box-shadow:1px 1px 6px 0px #ccc;
-moz-box-shadow:1px 1px 6px 0px #ccc;
-webkit-box-shadow:1px 1px 6px 0px #ccc;
-o-box-shadow:1px 1px 6px 0px #ccc;
margin: 85px 5px; /* 外側の余白 上下・左右 */
padding: 20px 25px 15px 45px;
position: relative;
z-index: 0;
}
.entry-content .table-of-contents:after{
background-color:rgba(53, 151, 212,0.6);
border-left: 2px dotted rgba(0,0,0,0.2);
border-right: 2px dotted rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
content: ' ～ 目次 ～ ';
display: block;
margin: 0 0 10px 0;
padding: 5px 20px;
color: #f9fcff; /* index文字色 */
font-size: 140%;/* index文字大きさ */
font-weight: bold;
text-align: center;
position: absolute;
top: -36px;
left: -20px;
transform:rotate(-15deg);
}

.entry-content .table-of-contents li {
list-style-type: none !important;
}

.entry-content .table-of-contents>li:before{/* リストマーク大見出し */
font-family: blogicon;
content: "\f02d";/* リストマーク */
position: absolute;
left: 1.6em;/* 左端からリストマークまでの距離 */
color: #ffbf6b;/* リストマークの色 */
}

.entry-content .table-of-contents>li ul li:before{/* リストマーク中見出し */
font-family: blogicon;
content: "\f02d";/* リストマーク */
position: absolute;
left: 4.2em;/* 左端からリストマークまでの距離 */
color: #fff499;/* リストマークの色 */
/* もくじカスタマイズここまで */

おすすめ目次カスタマイズブログ

今回、私のカスタマイズでは使用しなかったのですが、

いつか複数のブログを書くこととなったときに

ブログの種類によって目次のデザインを分けてもいいなと思って

ブックマークしたブログです🍀

種類豊富でわかりやすいだけでなく、

目次以外のカスタマイズもあるので、

私も参考にさせていただきたいと思います✨⇩

はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 - フジブロっ！

ついてくる目次の設置

こちらも紹介するブログの内容そのままにやっていただければ、

うちのサイト同様にスクロールしたときに

サイドバーの目次が下までついてきてくれる

目次が設置できます♪ こちらのブログも細かい設定方法の変更方法を

載せてくれているので勉強になります👩‍🏫

※私のブログでの追尾する目次は、現在位置を表すスクロールバーの表示がなく、番号が振られているのを消したい欲もありますが、また時間のある時に挑戦してみます🔥

サイドバーに現在位置を表示して追尾する目次を設置する【Ver3】 - Twilyze blog

まとめ

今回は、はてなブログカスタマイズの目次編でした🌟
一度パソコンでウェブサイトの作り方を勉強しようかなと思って、CSSとHTMLの本を買ったものの読まずに売ってしまったことがあります。今回のブログのカスタマイズでは、まずはやってみたいことを調べて試す、試しながら勉強するという形で結果的にCSSとHTMLの勉強になり、実践形式は楽しさも勉強へのモチベーションも違うなぁと思いました。カスタマイズするために検索して勉強になるサイトが多くて思ったのが、私もそういう役に立てる、応用のきく情報をわかりやすく載せているブログを書けるようになりたいと思いました。今回もまたアドバイス、感想等あれば、ぜひぜひコメントにお願いします🙇‍♀️