ブログ開始してから一年以上経ち。
今までに300本以上記事を書いてきましたが…
初めて有用な記事を出すことになりそうです。
その内容は、というと。
はてなブログって、箇条書きのデフォルトデザインが味気ないんですよね。
なので、デザインを変えようとしたら、何故か！
目次のデザインまで変わってしまう問題。
誰しも一度は経験していると思います。
勿論私もその一人。
日々、枕を涙で濡らしたものです…
しかし！遂に！
目次の部分のデザインを崩さずに、箇条書きをデザインするコードを発見したのです！
いや、内容的にペニシリンの発見レベルか？
偉人たちに勝るとも劣らない世紀の大発見。
今日は、皆様方に披露したいと思います。
はてなブログだけ？
そもそも、何言ってるか分からない人に説明すると。
はてなブログって、箇条書きの部分のデザインを下手にいじると、目次にまで反映されてしまうという欠点があるんですよ。
多分仕様的に、目次も箇条書きに含まれてしまっているんだと思います。
せっかく綺麗にした目次のデザインが、みるも無惨な姿になってしまう…
それに耐えられず、箇条書きの設定はデフォルトのままにしている方が多いと思います。(私だけ？)
そんな人に向けて、箇条書きの部分だけをデザイン出来るようなコードが見つかったので紹介したいなと思いまして。
解決策
分かってしまえば簡単です。
最初の
ul, {
の部分を
entry-content > ul:not(.table-of-contents) {
に変えてみてください。
具体的な例で説明すると、以下を参考ください。
/*箇条書きのデザイン*/
ul {
background: #fcfcfc;
padding: 0.5em 0.5em 0.5em 2em;
border: solid 3px gray;
}
ul li {
line-height: 1.5;
padding: 0.5em 1;
}
といったデザインにしていると思いますが、それを
/*箇条書きのデザイン*/
.entry-content > ul:not(.table-of-contents) {
background: #fcfcfc;
padding: 0.5em 0.5em 0.5em 2em;
border: solid 3px gray;
}
.entry-content > ul:not(.table-of-contents) {
line-height: 1.5;
padding: 0.5em 1;
}
に修正してみてください。
すると、アーラ不思議。
箇条書きの部分だけデザインが変わり、目次の部分は影響を受けなくて済みます。
解説
恐らく、皆さんの目次のデザインコードについては
.entry-content .table-of-contents {
から始まっていると思います。
一方はてなブログだと、ul/ol/liを使った箇条書き（リスト）のデザインは、その仕様上、目次にも適用されてしまう。
よって、影響範囲を限定するコードを入れなければなりません。
そこで
ul:not(.table-of-contents) {
と否定疑似クラスである「:not」を入れることで、指定した属性を持っていない要素にターゲットを定めることができるのです！
終わりに
なお、解説で書いている事はすべて適当です。
なんとなくそれっぽく書いてみただけ。
ちょっとプログラミングできる奴に見えましたか？
でも、解決策に書いている、「:not」を使うことで、問題が解消されたのは本当です。
もし同じ悩みを抱えている人は、是非Tryしてみてください。
そして、直らなかったら...ドンマイ。
そんな時もあります。
まぁ、その時はプログラミング本でも買って、自力で何とかしてください。
ではでは。
![スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/3156/9784797393156.jpg?_ex=128x128 "スラスラわかるHTML＆CSSのきほん 第2版 [ 狩野 祐東 ]")
