【SWELL】リストアイコンのサイズ調整

SWELLでリストを使うと、スタイルでいろいろなアイコン（チェックや丸）を選ぶことができます。
「少し小さくしたい」「もっと大きく見せたい」といったときは、CSSで簡単に調整が可能です。

この記事では、チェックアイコン と マルアイコン のサイズを変更する方法を紹介します。

CSSを追記する場所

以下のいずれかにコードを追記します。

• 外観 ＞ カスタマイズ ＞ 追加CSS
• 子テーマの style.css
• ページ下部の「カスタムCSS＆JS」内の「CSS用コード」でも可

チェックアイコンの調整例

チェックアイコン付きで表示した場合です。

表示例

• 蔦屋書店
• 丸善
• 三省堂書店

CSS

.is-style-check_list li {
    display: flex;
    align-items: center;
    gap: 0.8em;
    position: relative;
    padding-left: 0;
}

.is-style-check_list li::before {
    position: static;
    font-size: 2em;
    font-weight: bold;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

マルアイコンの調整例

リストをマルアイコン付きで表示する場合です。

表示例

• 早寝早起き
• 正しい食事
• 適度な運動

CSS

.is-style-good_list li {
    display: flex;
    align-items: center;
    gap: 0.8em;
    position: relative;
    padding-left: 0;
}

.is-style-good_list li::before {
    position: static;
    font-size: 2em;
    font-weight: bold;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

まとめ

• .is-style-check_list → チェックアイコン
• .is-style-good_list → マルアイコン
• アイコンを大きくするとテキストとずれやすいが、position: static; ＋ flexbox で解消できる
• gap を使えば、アイコンと文字の間隔を自然に調整可能

サイトのデザインに合わせて、font-size や gap の数値を調整してみてください。

このCSSは「追加CSS」などに貼り付ければすぐ反映されます。
特定のリストだけに適用したい場合は、対象のリストに独自クラスを追加し、そのクラス名をCSSセレクタに組み込んで使用してください。