【cocoon】アイコンリストをボックスで囲むとできる余白の解決方法

どうも。ひま子です。

▼PC上▼

▼スマホ上▼

この余白にイラついてる人へ、解決方法を紹介します。

【解決方法】アイコンリストにボーダーと背景の色を設定！

冒頭で見せた、イラつく余白だらけのもの。

アイコンリストをボックスで囲むと、どうしても余白ができてしまいます。

この余白をなくすための解決方法は、ボックスを使わず、アイコンリストにボーダーと背景の色を設定すること。

すると、

こんな感じ。

どうでしょう。左の側の余白は気にならなくなりましたね。

スマホだと右側の余白も小さくなります。いい感じなのでぜひ見てください。

とまぁ、デザインはまったく変えず、余白だけ小さくできました。

これで解決です。

【アイコンリスト】を出します。

【アイコンリスト】を選択すると、【スタイル設定】や【色設定】の蘭が表示されるので、【色設定】からボーダーと背景を好きな色に設定してください。

これで完成です。

とてもかんたん。

私が調べた限り、ボックス内にアイコンリストを入れたときの余白を小さくするのはとてもめんどくさい。

コードを追加して余白を調整して…みたいな。

今回紹介した方法が圧倒的に簡単なので、とても強いこだわりがない限りはこの方法をおすすめします。

ぜひお試しください。