Swellテーブルにアイコンを表示させる方法【超簡単】

2025年6月8日

テーマ！注目！

SWELLでブログ記事を作成する際、情報を整理して見やすくするために「テーブル（表）」を使う機会は多いですよね。商品比較、料金プラン、特徴リストなど、テーブルは読者の理解を助ける強力なツールです。

しかし、ただ文字と数字が並んだだけのテーブルは、少し味気なく感じられることもあります。もっと視覚的に情報を伝えたい、ぱっと見で内容を把握できるようにしたい——そんな時に役立つのが「アイコン」です。

「SWELLのテーブルにアイコンを表示させたい！」そう思っても、標準機能だけでは簡単にアイコンを挿入するブロックやボタンが見当たらないかもしれません。

この記事では、SWELLユーザーのために、テーブルの中にアイコンを超簡単に表示させる方法を、具体的な手順とともに詳しく解説します。これを読めば、あなたのテーブルが格段に見やすくなり、読者の満足度も向上すること間違いなしです。

重要ポイント

なぜテーブルにアイコンを入れると良いのか？

テーブルにアイコンを取り入れることには、いくつかの大きなメリットがあります。

視覚的な分かりやすさ: テキスト情報だけでなく、アイコンという視覚情報が加わることで、内容が直感的に伝わりやすくなります。「〇」「×」「注意」などがアイコンで表示されていれば、文字を読む前にその行の意味を素早く理解できます。
情報伝達の効率化: 特にYes/Noや、機能の有無を示す場合、短いアイコン一つで多くの情報を伝えることができます。これにより、テーブル全体の情報密度を高めつつ、煩雑さを軽減できます。
デザイン性の向上: アイコンはテーブルにアクセントを加え、単調な見た目を改善します。適切に使用することで、ブログ全体のデザイン性を向上させる効果も期待できます。
読者のエンゲージメント向上: 見やすく、理解しやすいテーブルは、読者が記事に留まる時間を長くし、内容への関心を深める助けとなります。

SWELLには様々な便利な機能がありますが、テーブルブロックでセル内に直接アイコンを挿入するための専用ボタンは残念ながら（2023年〇月現在）ありません。（注：SWELLのアップデートで変更される可能性はあります）

では、どうすればテーブルにアイコンを表示させられるのでしょうか？その秘密は、SWELLが内部で使っているアイコンフォントと、WordPressのHTML編集機能にあります。

事例

SWELLテーブルにアイコンを表示させる具体的な手順

テーブルにアイコンを表示させる方法は、驚くほどシンプルです。SWELLに標準で搭載されているアイコンフォントを、テーブルブロックのセル内に直接HTMLコードで記述するだけです。

SWELLで使えるアイコンは多数ありますが、ここでは代表的なものをいくつかご紹介します。

 → チェック
 → 警告/注意
 → 情報
 → ひらめき/アイデア
 → 良い、推奨
 → 悪い、非推奨
 → 星（評価など）

これらのアイコンは、すべて  という形式のHTMLタグで表示できます。クラス名の部分に表示したいアイコンのクラス名（例: icon-check）を入れるだけです。

手順は以下の通りです。

WordPressの投稿・固定ページ編集画面を開く。
ブロックエディターで「テーブル」ブロックを挿入し、必要な行と列を設定する。
アイコンを表示させたいセルをクリックして、文字を入力する要領でカーソルを置く。
そのセルに、表示させたいアイコンのHTMLコード（例：）を直接入力します。
プレビューで確認すると、入力したコードがアイコンに変わっているはずです。

**ちょっとしたコツ**

アイコンだけを表示させたい場合は、セルに``だけを入力します。アイコンの横にテキストを加えたい場合は、` 説明テキスト` のように記述できます。

記述例:

例えば、機能の有無を示すテーブルを作成する場合、セルに以下のように入力します。

機能あり: 
機能なし:  または 
一部対応:  一部対応

テーブルブロックは、基本的にはプレーンテキストとして入力内容を扱いますが、HTMLタグに関してはSWELLが特別な処理を行ってくれます。これにより、入力したが自動的にSWELLのアイコンとしてレンダリングされるのです。

メリット

この方法の最大のメリットは、外部プラグインや複雑なCSSを一切使わずに、SWELL標準の機能だけで実現できる点です。ブログの表示速度に影響を与える心配もほとんどありません。また、一度やり方を覚えてしまえば、非常にスピーディーにテーブルにアイコンを追加できるようになります。

注意点

デメリットというか、注意点としては、以下の点があります。

HTMLコードの入力が必要: テキストをそのまま入力するのではなく、というHTMLタグを正確に入力する必要があります。最初は少し戸惑うかもしれませんが、慣れれば簡単です。
使えるアイコンはSWELL標準のものに限られる: この方法で使えるアイコンは、SWELLテーマに搭載されているアイコンフォントのみです。オリジナルのアイコンや、他のアイコンフォントライブラリ（Font Awesomeなど）のアイコンを使いたい場合は、別途CSSを追加するなどの対応が必要になります。（今回の「超簡単」な方法からは外れます）
多用しすぎると逆に見づらくなる可能性: アイコンは効果的な装飾ですが、あまりに多くの種類を使ったり、必要ない場所にも配置したりすると、かえって情報が煩雑になり、読者を混乱させてしまう可能性があります。

実践アドバイス

アイコンは意味を統一して使う

同じアイコンは同じ意味で使うようにしましょう。例えば、は常に「可能」「対応」「含まれる」など肯定的な意味に、は「注意」「非対応」「含まれない」など否定的な意味や注意喚起に使う、といったルールを決めると、読者が混乱しません。

アイコンの色はCSSで変更できる（少し応用）

デフォルトのアイコンの色はテーマのCSSによって決まっていますが、追加CSSなどを使えばアイコンの色を変更することも可能です。

例えば、肯定的なアイコンは緑色に、否定的なアイコンは赤色にしたい場合、以下のようなCSSを追加します。（これは応用的な内容なので、まずはコード入力に慣れましょう）

/* チェックアイコンを緑色に */
.swl-table i.icon-check {
  color: #4CAF50; /* 好みの緑色のカラーコード */
}

/* 注意アイコンを赤色に */
.swl-table i.icon-alert {
  color: #F44336; /* 好みの赤色のカラーコード */
}

これはテーマオプションの「カスタマイズ」>「追加CSS」に記述するか、子テーマのstyle.cssに記述します。ただし、このCSSはテーブルだけでなく、他の場所にある同じアイコンの色も変えてしまう可能性があるため、より詳細なセレクタで指定するか、テーブルブロックにカスタムCSSクラスを設定してそれに対してCSSを記述するなどの工夫が必要になります。まずは、デフォルトの色で使ってみるのがおすすめです。

アイコンの横にテキストを加えるか検討する

アイコン単体で意味が明確な場合は良いですが、アイコンだけでは伝わりにくい場合は、アイコンの横に簡単なテキスト（例：一部機能制限あり）を添えることも検討しましょう。

スマホでの表示を確認する

パソコンでは見やすくても、画面の小さなスマホではアイコンがどのように表示されるか、レイアウトが崩れないかなどを必ず確認しましょう。SWELLはレスポンシブ対応が優れていますが、念のため確認は重要です。

【まとめ】

この記事では、SWELLのテーブルにアイコンを簡単に表示させる方法を解説しました。

難しい設定やプラグインは一切不要。テーブルブロックのセルに、表示したいアイコンのHTMLコード  を直接入力するだけで、SWELLに標準搭載されている様々なアイコンを表示させることができます。

視覚的な分かりやすさ
情報伝達の効率化
デザイン性の向上

これらのメリットを活かして、あなたのブログテーブルをより魅力的なものに変えましょう。最初はHTMLコードの入力に少し抵抗があるかもしれませんが、一度やってみればその手軽さに驚くはずです。

ぜひ、あなたのブログでもSWELLのテーブルにアイコンを活用してみてください！きっと読者にとって、より分かりやすく、楽しい記事になるはずです。