シンプルで見やすい目次カスタマイズ【はてなブログ】コピペOK2020-02-01シンプルで見やすい目次カスタマイズ【はてなブログ】コピペOKブログこんにちは、くうかです!はてなブログは、ボタン1つで目次を挿入することができます。デフォルトの目次もシンプルで良いのですが、もう少し見やすくしたいと思い、細かいところのカスタマイズを行いました。変えるだけでもグッと見やすくなっていると思います。調べているうちにけっこう勉強になったので、記事にしておきたいと思います。目次のタイトル文字を変更する・中央寄せにする・境界線を点線にする目次の先頭のマーク・文字の太字を変更する目次のリンクの下線を消すその他色違いデザイン(コピペOK)枠グリーン・タイトル”もくじ”・角を丸く枠グレー・タイトル”Contents”・角は丸くしない参考にさせて頂いたサイト最後にカスタマイズをする前の注意点カスタマイズ箇所:デザイン>カスタマイズ>デザインCSS※作業前に必ず元のCSSをコピペしてメモ帳等にバックアップをとってください。※元からあるCSSコードは消さないでください。シンプルで見やすい目次カスタマイズ当ブログははてなブログのデザインテーマ『Undershirts』を使用しています。目次カスタマイズのビフォーアフターです。それほど変えておらず、細かいところを直して見やすくしています。目次の枠を太くする・角を丸くする・背景色の設定まず目次の大まかなデザインをカスタマイズしています。目次を囲んでいる枠の線の太さや色を変えたい場合の設定。目次内の背景色を変えたい場合の設定。目次を囲んでいる枠の角を丸くしたい場合の設定。*/}目次のタイトル文字を変更する・中央寄せにする・境界線を点線にする目次の最初にあるタイトル周りのカスタマイズです。*/}テーマ『Minimalism』ではタイトルを中央寄せすると少しずれているので、中央寄せは外したほうがいいかもしれません(;^_^A目次の先頭のマーク・文字の太字を変更するデザインテーマ『Undershirt』では、目次の先頭マークが数字になっています。変えたい場合は以下のカスタマイズを行います。大見出し・中見出し・小見出しまで設定しました。list-style-typeの設定値は【disc】黒丸、【circle】白丸、【square】黒四角です。逆に数字にしたい場合は【decimal】。消したい場合は【none】。見やすいかな?と思い、大見出しだけ太字にしています。*/}サルワカさんの記事に設定値が詳細に書かれています。saruwakakun.com目次のリンクの下線を消す『Undershirt』では目次に下線もついていて、少々読みづらいなぁと以前から感じていたので下線を消しました。*/}その他色違いデザイン(コピペOK)簡単ではありますが、デザインがほんの少し違うバージョンも試しに作ってみたので載せておきます。枠グリーン・タイトル”もくじ”・角を丸く以下、コードです。*/}枠グレー・タイトル”Contents”・角は丸くしない以下、コードです。*/}参考にさせて頂いたサイトぱぴこさんの目次カスタマイズはかなり細かく書いてありますね!見た目も素敵(^^♪www.papico405.com点線を引いたり、角を丸くするカスタマイズを参考にさせていただきました。www.parucock.comありがとうございます!!最後に目次の細かいところをカスタマイズしてみました。私としては以前よりだいぶ見やすくなったなと思っていますがどうでしょうかね?リンクの下線を消すのと、太字にするだけでもかなり見やすくなりますね。角を丸くしたり、目次のタイトルを変えるのはお好みで(*^^)v本日も最後までご覧いただき、ありがとうございました。小さなおうちに引っ越して収納が減っちゃった!物を減らしてシンプルな空間にしたいと思っています。-料理苦手主婦が作り置きしてる風に見せる保存容器はiwakiのパック&レンジ冬スリッパは毎年ダイソー。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。