【はてなブログ】目次を可愛くカスタマイズ♪

negi

こんにちは！negiです♪

日々ブログを書いていく上で、ブログのデザインやカラーを自分好みにするのとしないのでは更新するモチベーションも変わってきますよね♪

この記事は、はてなブログのデザインテーマ「CONTENTS」で目次を自分好みにカスタマイズしたやり方を、備忘録として記録しています。

目次のカスタマイズ
まとめ
- このブログで設定した「目次」のコード。

目次のカスタマイズ

▼このブログのテーマはコチラ。

デフォルトの目次はこんな感じです。

ザ・シンプル

まぐたん

おしゃれ可愛い目次にしたいな～♪と思って、

▼コチラのサイトを参考にさせていただきました。

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

わたしはあまりゴチャゴチャしていたり女の子っぽすぎるものもアレだし、でもシンプルすぎてもつまらないし「ほどよいシンプルさでちょっとおしゃれ」みたいのが好みだったので、

大学ノート風の目次がとても気に入りました♪

大学ノート風目次

目次デザインのコードをコピーして、デザインCSSの枠内に貼り付けます。

カラー変更

自分の好きな色に変えたいときは、コード内の「アクセントカラー」と書かれている箇所のカラーコードを変更します。

カラーコードとは、難しい専門用語を使わずにざっくり簡単に言うと「#と6桁の数字」でコンピュータやWEB上で様々な色を表示させる表現方法です。

▼カラーコードはコチラ。

ピンクにしてみようかな～とカラーコードを入れて確認してみると、

目次の下の線の色が変わっていませんでした。

あれ？と思ってコードを目を凝らしてよくよく見てみると、

一箇所「アクセントカラー」の記述がなかったので見落としてしまっていたのですねー。
（小さくてごめんなさい^^;）

変わっていなかった部分もピンクのコードにして、次にカラー変更するときにわかりやすいように「アクセントカラー」の文字も入れておきました。

これで目次の下の線も変更できました！可愛い～(^^)

ピンクと黄緑どっちが良いかなー？と何度も変更してみたりして、悩みましたが。
ときどき気分で変えたりするのも良いですよね♪

色を変えるだけで印象もだいぶ変わるね

まぐたん

目次の自動開閉

PCから見たときはこれで良かったのですが、

スマホで見た時のやたら目次が長くなっちゃう感じが気になってしまいます^^;

どうにかもうちょいシンプルにスッキリできないかな？と思って調べてみました。

negi

1-2とかの文字は消せないかな？

▼たどり着いたのがこちら。

はてなブログ目次を自動で開閉式にする方法 - jQuery コピペOK（目次の表示/非表示切り替え）

目次を自動で開閉できるんだ。凄いな～。

と思って早速コピペしてみることに。
こちらのページにあるコードをフッタの枠内に入れると、

上手く閉じました！(^^)

でもそのままだと横の文字がはみ出てしまっているので、文字を変えてみたりサイズを変えてみたり色々試しながら調節してみました。

最初から閉じるか開くか迷うけど、とりあえず最初のうちは開いておこうかな。後で閉じるかも。

▼そしてコチラのページからヒントを頂いて、

【はてなブログ】目次のカスタマイズおしゃれにかっこよく！（コピペで簡単＆解説付き）

この辺のコードを入れてみたら、1-2とかの表示も消えてスッキリシンプルに表示されるようになりました。

そして現在の形に落ち着きました。満足～(^^)♪

まとめ

このブログで設定した「目次」のコード。

/*大学ノート風目次*/
.entry-content .table-of-contents {
position: relative;
margin: 0;
display: inline-block;
background: #fff;
padding: 1em 1em 1.2em 1em;
border-top: 1px solid #d9d9d9;
border-right: 0;
border-bottom: 1px solid #d9d9d9;
border-left: 28px solid #E0ECE4;/*アクセントカラー*/
box-shadow: 1px 0 0 #959595d4, 2px 0 0 #fff, 3px 0 0 #898989de, 4px 0 0 #fff, 5px 0 0 #858585de, 9px 3px 10px #ababab96;
}
.entry-content .table-of-contents::before {
content: "目次";
position: static;
display: block;
text-align: start;
font-size: 120%;
top: -30px;
left: 10px;
margin: 0 0 .8em;
font-weight: normal;
border-bottom: 5px solid #E0ECE4;/*アクセントカラー*/
}
.entry-content .table-of-contents::after {
content: "CONTENT";
position: absolute;
display: block;
transform: rotate(-90deg);
transform-origin: top left;
bottom: -20px;
left: -27px;
font-size: 120%;
color: #ffffff;
}
.entry-content .table-of-contents a {
color: #5a5a5a;
display: block;
text-decoration: none;
background: linear-gradient(transparent 0, transparent 93%, #d8d8d8 100%);
background-size: 100% 2em;
line-height: 2em;
}
.entry-content .table-of-contents > li::before {
font-family: "blogicon";
content: "\f024";
font-weight: normal;
color: #E0ECE4;/*アクセントカラー*/
position: absolute;
top: 2px;
left: -18px;
}
.entry-content .table-of-contents li {
list-style-type: none;
margin: 0 0 0 1.4em;
position: relative;
font-size: 1.1em;
}
.entry-content .table-of-contents li ul {
margin: 0 0 1em .5em;
padding: 0;
}
.entry-content .table-of-contents li ul li {
list-style-type: disc;
color: #E0ECE4;/*アクセントカラー*/
font-size: .9em;
}
.table-of-contents li ul li::before{display:none;}/*中見出しの前にアイコン表示しない*/
.table-of-contents li {list-style-type:none;font-size:1.2rem;line-height:1.5;padding-bottom:0.5rem;}
.table-of-contents ul{padding-top:1rem;padding-bottom:0.5rem;}
.table-of-contents li ul li {font-size:1rem;line-height:1.5;padding-top:0px;padding-bottom:0px;
list-style-type:disc;}/*中見出しの前は黒丸*/
.table-of-contents ul ul{display: none;}/*見出し3階層目を表示しない*/