【SWELL】リストのアイコンをカスタマイズする方法

WordPressの記事で「箇条書きをちょっと可愛くしたいな」と思ったことはありませんか？
今回は、WordPressテーマ「SWELL」で、通常の「・」をハートや星のアイコンに変えるカスタマイズ方法をご紹介します。

完成イメージ

ハートリスト

PHP
HTML
CSS

スターリスト

Photoshop
illustrator
CANVA

手順

① カスタマイズ画面でCSSを追加

管理画面の左メニューから
　「外観」→「カスタマイズ」→「追加CSS」 を開きます。
以下のコードを貼り付けて「公開」します。

/* ハートアイコン付きリスト */
.custom-heart-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.custom-heart-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.4em;
}
.custom-heart-list .swl-inline-icon {
  width: 1em;
  height: 1em;
  color: #e85a71; /* ピンク */
  margin-right: 0.4em;
  flex-shrink: 0;
}

/* 星アイコン付きリスト */
.custom-star-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.custom-star-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.4em;
}
.custom-star-list .swl-inline-icon {
  width: 1.1em;
  height: 1.1em;
  color: #ffd700; /* 黄色（ゴールド） */
  margin-right: 0.4em;
  flex-shrink: 0;
}

② SWELLエディターでリストを作成

記事編集画面で、
　「リストブロック」 を追加します。
箇条書きの内容を入力します。
　例：
　・丸善
　・文喫
　・ JUNKU堂
リスト項目を選択し、「・」の後ろにカーソルを置いた状態で、ツールバーの「笑顔マーク」（アイコン）をクリックします。

好きなアイコンを選択
　例：
　・丸善
　・文喫
　・ JUNKU堂

③ 高度な設定 → 追加CSSクラスを入力

作成したリストブロックをクリックし、右サイドバーの「ブロック」タブ内にある ［高度な設定］ を開きます。
今回はこの名前でカスタムクラスを追加していますので、それぞれのリストブロックにこちらのCSSクラス名を入れてください。
- ハートアイコン → custom-heart-list
- スターアイコン → custom-star-list

保存してページを表示させると、リストマークがアイコンに変わります。

まとめ

SWELLならリスト内や段落内に簡単にアイコンを追加することができます。
また、ブロックエディターで手軽にクラスを指定できるので、デザインの統一感を保ちながらリストをカスタマイズすることができます。

記事の内容に合わせて、アイコンの種類や、色、サイズをカスタマイズしてみてください。
ちょっとした工夫で、文章の印象がぐっと柔らかくなります。

リストアイコンのサイズを調整する方法はこちらから。

リスト全体を中央寄せしつつ、左揃えにする方法はこちらから。

WordPress個別サポート

自分でやってみたけれどうまくいかない
やりたいことはあるけど方法がわからない

そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。

詳細はこちらから

完成イメージ

手順

① カスタマイズ画面でCSSを追加

② SWELLエディターでリストを作成

③ 高度な設定 → 追加CSSクラスを入力

まとめ

関連記事