今回ははてなブログのテーマBrooklynを使っていて「箇条書き」に囲み枠をを付けてみたいという方に向けたカスタマイズ方法をご紹介します！
箇条書きに囲み枠を付ける理由
箇条書きは、話の要点やいくつかの項目を並べて示す場合によく使いますよね。見やすいですし、読む人に視覚的にも伝えやすい。
だったら折角なのでもっと目立たせてより効果的に伝えられるようにと囲み枠を付けることにしました。
Brooklynの箇条書きに自動で囲み枠を付ける方法
箇条書きに囲み枠を付けるカスタマイズはCSSを一度追加してしまえばあとは「箇条書き」を選ぶだけで自動で囲み枠を追加してくれます。
記事中で「箇条書き」か「番号付きリスト」をクリックするだけです。
コードの設置場所
コードの設置場所は管理画面の次の場所です。
「デザイン」 → 「カスタマイズ」 → 「デザインCSS」
追加するコード
下記のコードをそのままコピペでもOKですが、背景色や囲み枠の色など自分の好みに合わせて自由に変更してください。
/* 箇条書きデザイン */
.entry-content > ul, .entry-content ol{
background: #fcfcfc;/*背景色*/
padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
border: solid 3px #ffb03f;/*線の種類 太さ 色*/
}
.entry-content ul li, .entry-content ol li {
line-height: 1.5; /*文の行高*/
padding: 0.5em 0; /*前後の文との余白*/
}
最後に
今回のコードはすごく短いのですが、めちゃくちゃ大変でした。
完全にハマってしまいました。なぜかと言うと（素人のおっさんがやっているというのは置いといて）、今回の「箇条書き」と前回カスタマイズした「目次」はどちらもHTMLタグの「ul」を使っていたからなんです。最後の最後で「>」をつけることで解決できました。嬉しくて深夜3時に1人でガッツポーズしてました。
でもうまくいったときの快感は最高ですね。
今回はサルワカくんのサイトを参考にさせて頂きました。
コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに
いつもコードの勉強をしながら完成させてます。ここに「>」のことが書いてあります。
それにしてもこのサルワカくんのサイトは本当に分かりやすくて勉強になります。
では！
