
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セレクタに組み込んで使用してください。
WordPress個別サポート
- 自分でやってみたけれどうまくいかない
- やりたいことはあるけど方法がわからない
そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。