Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。
◆ タップできる目次 ◆
ビフォー・アフターを比べる
元のデザインがこれで

ちょっとラベルボックスに比べると間延びしている気がします。

こんなふうにしました。

ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。
Cocoonのラベルボックスのいいところ
記事の中のポイントが目立って、読みやすいことです。
iconlist-box関係のクラスにスタイルを設定した
特に難しいことはしていません。
label-boxのmarginやpaddingを見て、iconlist-boxに適用していきました。
/**
* アイコンリストをラベルボックスと似たデザインにした
*/
.iconlist-box.blank-box {
margin-top: 0.4em;
padding: 0em .8em .4em;
border-radius: 8px;
margin: 0;
}
.article .iconlist-box ul, .article .iconlist-box ol {
margin: 0;
}
.article .iconlist-box ul li, .article .iconlist-box ol li {
margin: 0;
}
.iconlist-title {
margin-top: 8px;
font-size: 0.9em;
text-align: left;
padding-left: 0.8em;
}
iconlist-titleのバランスは、なかなかしっくりきませんね。
とりあえず、今回はこのへんで。
こちらもどうぞ

ブログの絵文字のサイズを小さくした【CSSのクラス指定】
教室のブログを見ていたら、気になる点が…… わかりますか? 絵文字の部分が不自然に大きいんです。 しかも、灰色の枠までついている。 ということで、CSSをちょっといじります。 デベロッパーツールでCSSを確認する Chromeのデベロッパー...

[CSS] 目次のデザインをすっきりさせた
style.cssに目次のデザインを追加しました。 こんなふうに変更しました。 違いがわかりますか? スタイルを変更したのは主に3箇所 目次のアイコンを追加した見出し3のフォントサイズを小さくした余白を狭くした /*目次のデザイン*/ .a...
QRコードを読み込むと、関連記事を確認できます。
![[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた](https://chart.googleapis.com/chart?cht=qr&chs=200x200&chco=000000&chl=https://chiilabo.com/2020-09/css-iconlist-cocoon-labelbox-margin-padding/)