SWELLで使えるアイコンの一覧と使い方や実際の活用例を紹介

SWELLのアイコン機能は、2023/2/2にリリースされたSWELLのv.2.7.3アップデートで大幅に機能が強化されました。この記事ではリニューアル後のアイコン関連機能を紹介していきます。

SWELLで使えるアイコンの一覧や使い方を紹介します。

記事の中や各ページなどで適度にアイコンを使うことで、伝えたいことが視覚的により伝わりやすくなる効果もあると思います。

SWELLでは、いろいろな方法でアイコンをコンテンツ内に挿入することができるので、ぜひ設定方法を覚えて活用してみてください。

---

---

SWELLで使えるアイコンと使い方

WordPressテーマSWELLでは、とてもたくさんのアイコンが使えます。

2023/2/2リリースのSWELL Ver.2.7.3で多数のアイコンの追加とデザインの調整が実施されました。

 SWELL – ver. 2.7.3 アップデート情報

SWELLでは、主に以下3つの方法でアイコンを使用することができます。

それぞれ簡単に使い方を紹介します。

テキストの中でアイコンを使用

文章中でアイコンを簡単に挿入できる「インラインアイコン機能」があります。

アイコンを挿入したい場所で、ブロックツールバーの「アイコン」ボタンをクリックするとアイコンの選択肢が表示されます。

実際にSWELLのインラインアイコン機能を使ってみた動画は以下です。

また、インラインアイコン機能では、SVGを直接入力できる仕様になっています。

SVGタグを直接入力することで、例えば自分のサイトのロゴなども表示することができます。

特定のブロック内でアイコンを使用

以下のようなブロックでは、ブロックサイドバーからアイコンを選択できるようになっています。

使えるアイコンはインラインアイコンのものと同じです。

• SWELLボタンブロック
• キャプションブロック
• ボックスメニューブロック

実際にアイコンを設定してみた例は以下です。

ショートコードでアイコンを使用

ショートコードを使って自由にアイコンを挿入することも可能です。

例えば、「[icon icon-twitter]」と入力すると「」が表示されます。

ショートコードで挿入する際のアイコンのクラス名一覧は公式サイトの以下ページで確認できます。

SWELLで使えるアイコンの一覧

SWELLでいろいろな場所にアイコンを挿入してみた例

ここまで紹介したSWELLのアイコン設定を活用して、いろいろな場所にアイコンを挿入してみました。

他にもたくさんの活用方法がありますが、一例を紹介したいと思います。

任意のブロックの中

SWELLボタンやキャプション、ボックスメニューブロックではブロックの設定としてアイコンの指定が可能です。

その他のブロック内でアイコンを使用したい時は、「インラインアイコン機能」か「ショートコード」をうまく活用すると良いかなと思います。

例えば、タブブロックのタイトル部分にアイコンを表示させてみました。

詳細の設定手順は別記事の「タブタイトルにアイコンを挿入して強調してみる」で紹介しています。

それから、広告タグを直接挿入したSWELLボタンブロックではアイコンが設定できませんが、ショートコードを使うことでアイコンの挿入も可能です。(少しイレギュラーなやり方なので自己責任でご活用ください。)

詳細の設定手順は別記事の「広告タグ直接入力時にアイコンを挿入する」で紹介しています。

メニュー

ヘッダーやフッターメニューにもアイコンを設定することができます。

例として以下の2つ紹介します。

スマホ固定フッターメニュー

以下のようなスマホで閲覧した際に下部に表示されるメニューにアイコンを設定できます。

設定方法としては、メニューの編集画面で「説明」欄にアイコンのクラス名を入力するだけでOKです。

アイコンのクラス名は公式サイトの「SWELLで使えるアイコンの一覧」を参考にしてください。

もう少し詳しい設定手順は別記事の「スマホ固定メニューにアイコンを表示する」で紹介しています。

その他のメニュー

スマホ固定フッター以外のメニューでは、メニュー項目の「ナビゲーションラベル」欄にアイコンのショートコードを記載します。

このように入力すると、以下のようにメニューでもアイコンが表示可能です。

もう少し詳しい設定手順は別記事の「スマホ固定メニュー以外にもアイコンを表示する」で紹介しています。

ウィジェット

ウィジェット内でもアイコンを使えるので以下の2種類を参考例として紹介します。

ウィジェットタイトル

タイトルが入力できるウィジェットでは、ショートコードを活用してアイコンを挿入できます。

プロフィールウィジェット

よくサイドバーなどに設置されるプロフィールウィジェット内のプロフィール文内にアイコンを挿入してみました。

これもやり方は簡単で、挿入したい箇所にアイコンのショートコードを挿入するだけでOKです。

SWELLの豊富なアイコンを活用しましょう

WordPressテーマSWELLで使えるアイコンの挿入方法や実際の使用例を紹介しました。

適度にアイコンを挿入することで、より視覚的にコンテンツの内容が伝わりや少なると思います。

SWELLにはかなりたくさんのアイコンが搭載されているので、作りたいコンテンツの内容に合ったアイコンが見つかると思います。

SWELLのVer.2.7.3で実装されたインラインアイコン機能も、文中にアイコンを簡単に挿入できるためとても便利です。

ぜひ、アイコンを活用して見やすい、伝わりやすいコンテンツを制作していきましょう。

最後まで読んでいただきありがとうございました。

---

SWELL公式サイトはこちらからどうぞ…！

SWELLの使い方や設定に関する記事

SWELLの便利機能を使いこなすためのSWELL使い方ガイド↓↓

SWELL全般の関連記事