[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。

1. ビフォー・アフターを比べる

元のデザインがこれで

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

こんなふうにしました。

ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。

2. 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のデベロッパーツールで検証してみると、「.iwe-border-bold img」に該当するようです。絵文字ですが、インライン画像の挿入になっているんですね。ということで、文章中の画像には境界線が表示されないようにする必要があります。ところが、この「.iwe-bor...

chiilabo.com

[CSS] 目次のデザインをすっきりさせた

style.cssに目次のデザインを追加しました。こんなふうに変更しました。違いがわかりますか？スタイルを変更したのは主に３箇所目次のアイコンを追加した見出し3のフォントサイズを小さくした余白を狭くした/*目次のデザイン*/.article .toc { border-color: #a08010 ; padding: 10px; width: 95%;}.article .toc-title { text-align: left;}.article .toc-title::...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。