はてなブログ目次カスタマイズ｜シンプル・おしゃれ・コピペOK
こんにちは、ゆるミニマリスト主婦のくうかです。
はてなブログは、目次を簡単に挿入することができます。
デフォルトの目次もシンプルで良いのですが、もう少し見やすくしたいと思い、細かいところのカスタマイズを行いました。
少し変えるだけでもグッと見やすくなります。
- 目次の枠・角・背景色の変更
- 目次タイトル文字・配置・境界線の変更
- 先頭のマーク・太字の変更
- 下線を消す
くうか以上のカスタマイズを行いました。
それでは説明していきます！
はてなブログでカスタマイズをする前の注意点
カスタマイズ箇所：【デザイン】＞【カスタマイズ】＞【デザインCSS】
- 作業前に必ず元のCSSをコピペしてメモ帳等にバックアップを取ってください。
- 元からあるCSSコードは消さないでください。
目次カスタマイズ【シンプル・おしゃれ】
当ブログははてなブログのデザインテーマ『UnderShirts』を使用しています。
※現在はワードプレスへ移行しています。
目次カスタマイズのビフォーアフターです。
それほど変えておらず、細かい部分を修正して見やすくしています。
以下、行ったカスタマイズを説明していきます。
目次の枠を太くする・角を丸くする・背景色の設定
まず目次の大まかなデザインをカスタマイズしています。
- 目次を囲んでいる枠の線の太さや色を変えたい場合の設定。
- 目次内の背景色を変えたい場合の設定。
- 目次を囲んでいる枠の角を丸くしたい場合の設定。
以下、コードです。
.entry-content .table-of-contents {
border-top:4px solid #e4c1c0; /* 目次枠線太さと色*/
border-left:4px solid #e4c1c0;
border-right:4px solid #e4c1c0;
border-bottom:4px solid #e4c1c0;
background:#f6f6f6; /* 目次内背景色 */
border-radius:15px; /* 角を丸くする */
}目次のタイトル文字を変更する・中央寄せにする・境界線を点線にする
目次の最初にあるタイトル周りのカスタマイズです。
- 目次のタイトル文字をデフォルトから変更
- タイトルを中央寄せにする
- 境界線の太さと色を設定し、点線に変更
以下、コードです。
.entry-content .table-of-contents::before {
display:block;
content:”- Contents -“;/* 目次のタイトル文字 */
font-size: 18px;/* 文字サイズ */
color:#e4c1c0;/* 文字の色 */
font-weight: bold; /* 太字 */
text-align:center; /* 中央寄せ */
border-bottom: 2px dashed #e4c1c0; /* 目次内境界線の太さと色・点線 */
}目次の先頭のマーク・文字の太字を変更する
デザインテーマ『UnderShirt』では、目次の先頭マークが数字になっています。
変えたい場合は以下のカスタマイズを行います。
大見出し・中見出し・小見出しまで設定しました。
list-style-typeの設定値は【disc】黒丸、【circle】白丸、【square】黒四角です。
逆に数字にしたい場合は【decimal】。
消したい場合は【none】。
見やすいかな？と思い、大見出しだけ太字にしています。
以下、コードです。
.entry-content .table-of-contents li{
list-style-type:disc; /* 大見出し：黒丸 */
font-weight: bold; /* 太字 */
}
.entry-content .table-of-contents li ul li{
list-style-type:circle; /* 中見出し：白丸 */
font-weight: normal; /* 文字標準 */
}
.entry-content .table-of-contents li ul li ul li{
list-style-type:square; /* 小見出し：黒四角 */
font-weight: normal; /* 文字標準 */
}サルワカさんの記事に設定値が詳細に書かれています。
目次のリンクの下線を消す
『UnderShirt』では目次に下線もついていて、少々読みづらいなぁと以前から感じていたので下線を消しました。
以下、コードです。
ul.table-of-contents a{
text-decoration: none; /* リンク下線なし */
} その他色違いデザイン（コピペOK）
簡単ではありますが、デザインがほんの少し違うバージョンも試しに作ってみたので載せておきます。
枠グリーン・タイトル”もくじ”・角を丸く
以下、コードです。
.entry-content .table-of-contents {
border-top:4px solid #66cdaa; /* 目次枠線太さと色 */
border-left:4px solid #66cdaa;
border-right:4px solid #66cdaa;
border-bottom:4px solid #66cdaa;
background:#fff; /* 目次内背景色 */
border-radius:10px; /* 角を丸くする */
}
.entry-content .table-of-contents::before {
display:block;
content:”もくじ”;
font-size: 20px;/* 文字サイズ */
color:#66cdaa; /*文字の色 */
font-weight: bold; /* 太字 */
text-align:center; /* 中央寄せ */
border-bottom: 2px dashed #66cdaa; /* 目次内境界線の太さと色下線 */
/*border-bottom: none;*/
}
/* リストの先頭マーク */
.entry-content .table-of-contents li{
list-style-type:disc; /* 大見出し：黒丸 */
font-weight: bold; /* 太字 */
}
.entry-content .table-of-contents li ul li{
font-weight: normal; /* 文字標準 */
}
.entry-content .table-of-contents li ul li ul li{
font-weight: normal; /* 文字標準 */
}
ul.table-of-contents a{
text-decoration: none; /* リンク下線なし */
}枠グレー・タイトル”Contents”・角は丸くしない
以下、コードです。
.entry-content .table-of-contents {
border-top:2px solid silver; /* 目次枠線太さと色 */
border-left:2px solid silver;
border-right:2px solid silver;
border-bottom:2px solid silver;
background:#fff; /* 目次内背景色 */
}
.entry-content .table-of-contents::before {
display:block;
content:”C o n t e n t s”;
font-size: 20px;/* 文字サイズ */
color:silver; /*文字の色 */
font-weight: bold; /* 太字 */
text-align:center; /* 中央寄せ */
border-bottom: 2px dashed silver; /* 目次内境界線の太さと色下線 */
}
/* リストの先頭マーク */
.entry-content .table-of-contents li{
list-style-type:disc; /* 大見出し：黒丸 */
font-weight: bold; /* 太字 */
}
.entry-content .table-of-contents li ul li{
font-weight: normal; /* 文字標準 */
}
.entry-content .table-of-contents li ul li ul li{
font-weight: normal; /* 文字標準 */
}
ul.table-of-contents a{
text-decoration: none; /* リンク下線なし */
}参考にさせて頂いたサイト
ぱぴこさんの目次カスタマイズはかなり細かく書いてありますね！
見た目も素敵(^^♪
ありがとうございます！！
最後に
目次の細かいところをカスタマイズしてみました。
私としては以前よりだいぶ見やすくなったなと思っていますがどうでしょうか？
リンクの下線を消すのと、太字にするだけでもかなり見やすくなりますね。
角を丸くしたり、目次のタイトルを変えるのはお好みで(*^^)v
くうか個人的に目次はけっこう見るので、見やすいと嬉しい！
この記事が気に入ったら
フォローしてね！
コメント