SWELLでリストのアイコンを変更する方法と見やすい使い分け

2026年10月28日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

箇条書きを入れたものの、黒い点が並ぶだけで味気なく見える…と感じたことはありませんか。メリットやポイントをまとめても、見た目が地味だと読者の目に留まりにくいものです。SWELLならリストのアイコンを変えるだけで、伝わりやすさがぐっと高まります。

この記事では、SWELLでリストのアイコンを変更する方法を、手順付きでわかりやすく解説します。私が実際にやってしまった失敗や使い分けのコツもお伝えしますね。CSSを書かずに、今日から設定できますよ。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

リストの黒い点を、チェックマークにしたいにゃ。

たいがブログ

見た目を変えたくなりますよね。SWELLならすぐにできますよ。

ニャフィ

CSSを書かないとダメなのかにゃ？

たいがブログ

クリックだけで変える手順を、順番にご紹介しますね。

▼あわせて読みたい：記事の見た目を整えるなら、表示速度を支えるサーバー選びも大切です。ブログの土台になるサーバーはこちらで解説しています。

SWELLでリストのアイコンを変更する前に知っておきたい基本

SWELLでは、WordPress標準の「リスト」ブロックに独自のスタイルが追加されています。ブロックを選んでスタイルを切り替えるだけで、点の部分をアイコンに変えられる仕組みです。

アイコンは内容に合わせて選ぶことで、文章を読まなくても意味が伝わるようになります。まずは選べる種類と使い分けを押さえておきましょう。

SWELLのリストで選べる主なアイコン

SWELLのリストには、チェックやばつ、注釈など、用途に合わせたスタイルが用意されています。以前使っていた別のテーマでは、アイコンを変えるたびに疑似要素のCSSを書く必要があり、反映されずに何度も悩みました。SWELLはクリックで切り替えられるので、その手軽さに驚いたのを覚えています。

アイコンは「意味」で使い分けるのがコツ

アイコンは、メリットにはチェック、デメリットにはばつというように意味で選ぶのが基本です。私は最初、メリットもデメリットもチェックで並べてしまい、読者から「どっちの話かわかりにくい」と言われたことがありました。アイコンの意味をそろえるだけで、伝わり方は大きく変わります。

SWELLでリストのアイコンを変更する方法

ここからは、実際にリストブロックのアイコンを変更する手順を見ていきましょう。操作はすべて投稿の編集画面で完結します。

他のテーマでは追加CSSやプラグインが必要になる場面もありますが、SWELLなら標準機能だけで十分です。設定にかかる時間は1分ほどですよ。

右サイドバーの「スタイル」から選ぶのが基本

リストブロックを選ぶと、右サイドバーの「ブロック」タブにスタイルの一覧が表示されます。クリックするとすぐ編集画面に反映されるので、見た目を確かめながら選べるのがうれしいポイントです。

1記事で使うアイコンは2〜3種類までにする

アイコンを何種類も使うと、かえって記事がごちゃついて見えます。1記事あたり2〜3種類までに絞ると、統一感が出て読みやすくなりますよ。まずはチェックだけでも十分効果があります。

STEP

リストブロックを追加する

編集画面の「＋」から「リスト」ブロックを追加し、箇条書きにしたい内容を入力します。既存のリストを変えるなら、そのブロックを選ぶだけでOKです。

STEP

リスト全体を選択する

項目の1行だけを選んでいると、スタイルが表示されないことがあります。ツールバーの「親ブロックを選択」から、リスト全体を選んでおきましょう。

STEP

右サイドバーのスタイルを開く

画面右側の「ブロック」タブを開きます。サイドバーが見当たらないときは、右上の歯車アイコンをクリックすると表示されますよ。

STEP

使いたいアイコンのスタイルを選ぶ

スタイル一覧からチェックやばつなど、内容に合うアイコンをクリックします。選んだ瞬間に編集画面へ反映されます。

STEP

プレビューで表示を確認する

最後にプレビューでパソコンとスマホの表示を確認します。アイコンと文字の位置がずれていなければ完了です。

リストのアイコンをもっと見やすく活用するコツ

アイコンを変えられるようになったら、次はほかのブロックと組み合わせてさらに見やすくしていきましょう。少しの工夫で、要点がひと目で伝わるリストに仕上がります。

大切なのは、リストを「読ませる」より「見せる」意識で使うことです。流し読みする読者にも要点が届く形を目指しましょう。

キャプションボックスと組み合わせて要点を目立たせる

SWELLの「キャプションボックス」の中にチェックのリストを入れると、「この記事でわかること」のような要点まとめが簡単に作れます。別のテーマでは枠とリストのデザインがかみ合わず調整に苦労しましたが、SWELLは組み合わせても自然になじむのが魅力ですね。

手順を書くなら番号付きリストやステップを使う

順番に意味がある内容は、アイコンのリストより番号付きリストが向いています。私は以前、設定手順をチェックのリストで並べてしまい、どこから始めればいいか迷わせてしまいました。手順が多いときは、SWELLのステップブロックを使うのがおすすめです。

▼あわせて読みたい：見やすいリストで仕上げた記事も、検索で見つけてもらえてこそ活きてきます。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

SWELLのリストアイコン変更でよくある質問

スタイルの一覧が表示されません。: リストの1行だけを選んでいる可能性があります。ツールバーの「親ブロックを選択」でリスト全体を選び直すと、スタイルが表示されますよ。
過去の記事のリストもあとから変更できますか？: はい、できます。記事を開いてリストを選び、スタイルを切り替えるだけです。アクセスの多い記事から順番に整えていくのがおすすめですよ。
1つのリストの中で項目ごとにアイコンを変えられますか？: スタイルはリスト全体にまとめて適用されます。チェックとばつを分けたいときは、リストを2つに分けてそれぞれ設定しましょう。
スマホでアイコンと文字がずれて見えます。: 1項目の文章が長いと、改行で見え方が変わることがあります。各項目は1〜2行に収まる短さにすると、スマホでもきれいに並びますよ。