アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で5桁のアクセスを達成することができました。
SWELLは独自のアイコンが使える点が魅力です。
アイコンを効果的に活用すれば、訪問者の目を惹きつけ、分かりやすいコンテンツに改善できます。
本記事では、SWELLを3年間使い100記事以上執筆してきた筆者が、SWELL標準アイコンからFont Awesomeアイコンまで、アイコン一覧と具体的な設定手順を徹底解説します。
この記事を読んで実践すれば、SWELLのアイコンが使いこなせるようになります。
そして、あなたのサイトはとても見やすくなり、読者の滞在時間もアップしますよ。
それでは始めていきましょう！
まだSWELLを使っていないあなたは、以下の記事をごらんください。
SWELLで使えるアイコンと使い方
SWELLでは、79種類の豊富なアイコンを簡単に使用できます。
主な使用方法は3つあるので、用途に応じて使い分けましょう。
テキストの中でアイコンを使用
段落ブロックの文章の中にアイコンを挿入したい場合は、インラインアイコン機能を活用しましょう。
この機能ではブロックツールバーのアイコンボタンをクリックして挿入します。
まず、段落ブロックに何かしらの文字を入力してください。
というのも、文字がないとブロックツールバーが表示されないからです。
ブロックツールバーの「アイコン」ボタンをクリックすると、アイコン選択画面が表示されます。
一覧から使いたいアイコンをクリックしてください。
すると、テキスト内に選択したアイコンが挿入されます。
ブロック内でアイコンを使用
SWELLの独自ブロックでは、ブロック設定からアイコンを簡単に追加できます。
対応しているブロックは、以下のようなものがあります。
- SWELLボタンブロック
- キャプションブロック
- ボックスメニューブロックなど
今回は、SWELLボタンブロックを例にとって手順を確認していきましょう。
SWELLボタンブロックを選択してください。
ブロックツールバーの「アイコン」ボタンをクリックすると、アイコン選択画面が表示されます。
ブロックサイドバーの「アイコン選択」項目から、使用したいアイコンを選びます。
プレビューを確認しながら選択できるため、デザインに合ったアイコンを見つけやすいですよ。
ショートコードでアイコンを使用
ショートコードを使用すれば、ウィジェットやメニューなど、様々な場所にアイコンを配置できます。
コードをコピーして貼り付けるだけなので、初心者でも簡単に設置できます。
使い方は簡単です。
[icon ここにアイコンクラス名]
または
[アイコン ここにアイコンクラス名]
とするだけです。
また、Font Awesomeのアイコンを使う場合は、
[icon class="アイコンクラス名"]
または
[アイコン class="アイコンクラス名"]
と設定すれば、アイコンを呼び出すことができます。
例えば、[icon icon-amazon]と入力すると「」と表示されます。
同様に、[icon class="icon-amazon"]と入力しても「」と表示されます。
SWELLで標準で提供されているアイコンのクラス名についてはｈ2：SWELLアイコン一覧【80個】で用意しています。
クリックするだけでクラス名をコピーできるようになっていますので、ぜひ活用してくださいね。
SWELLアイコンの挿入例
実際にSWELLアイコンを活用した具体的な挿入例をご紹介します。
各パターンの使い方を覚えて、サイトの見た目を向上させましょう。
その①SWELLブロック
SWELLの独自ブロックでアイコンを活用する方法を解説します。
ほとんどのブロックにアイコンを挿入することが可能ですが、今回は次のSWELLブロックにアイコンを挿入する手順を解説します。
キャプションボックスブロック
キャプションボックスにアイコンを追加すると、注意喚起や重要な情報を視覚的に強調できます。
具体的な手順は以下の通りです。
ブロック挿入画面から「キャプションボックス」ブロックを選択してください。
ブロックサイドバーの「アイコン選択」から好みのアイコンを選択します。
注意事項には「icon-alert 」、お知らせには「icon-megaphone 」がおすすめです。
プレビューでアイコンが正しく表示されているか確認しましょう。
ボックスメニューブロック
ボックスメニューブロックでは、各メニュー項目にアイコンを設定することで、ナビゲーションの使いやすさが向上します。
挿入する手順は以下の通りです。
ブロック挿入画面から「ボックスメニュー」ブロックを選択してください。
各メニュー項目の設定で、メニューの内容に応じたアイコンを選択しましょう。
例として「icon-home」「icon-mail」「icon-info」を挿入してみました。
列数は「3」に設定してあります。
なお、ボックスメニューの使い方については以下の記事を参考にしてください。
タブブロック
タブブロックのタイトル部分にアイコンを挿入すると、各タブの内容を直感的に理解できます。
アイコンの挿入手順は以下の通りです。
ブロック挿入画面から「タブ」ブロックを選択してください。
ブロックツールバーの「アイコン」をクリックして、タブタイトルの先頭にアイコンを配置してください。
挿入例として、料金プランのタブには「icon-cart」、特徴説明のタブには「icon-star-full」を入れてみました。
アッフィーアッフィー：アイコンと文字の間に半角スペースを入れると、見た目がより美しくなりますよ。
その②メニュー
サイトのメニューにアイコンを追加する方法をご紹介します。
ヘッダーやフッターメニューでアイコンを活用することで、ユーザビリティが大幅に向上するでしょう。
ヘッダーメニュー
グローバルナビゲーションにアイコンを追加すると、ナビゲーションが分かりやすくなります。
グローバルナビゲーションへアイコンを追加する手順は以下のとおりです。
WordPress管理画面の「外観」→「メニュー」をクリックしてください。
メニュー画面が表示されたら、編集したいメニュー（グローバルナビ）を選択してください。
グローバルナビの「ホーム」の「ナビゲーションラベル」欄に、ショートコードとテキストを組み合わせて入力します。
「[icon icon-home] ホーム」
または
「[icon class="icon-home"] ホーム」
「プロフィール」「お問い合わせ」についても同じようにショートコードを入力します。
すると下図のように表示されます。
アッフィーアイコンとテキストの間に半角スペースを入れましょうね。
サイトを表示させると次のようになります。
スマホの固定フッターメニュー
スマホの最下部に表示されるフッターメニューにも、アイコンを設定できます。
スマホ固定フッターメニューへのアイコンの設定手順は以下のとおりです。
スマホ固定フッター用のメニューを選択してください。
ホームの「説明」欄にアイコンのクラス名（「icon-home」）のみを入力します。
アッフィークラス名だけで自動的にアイコンが表示される仕組みになっています
「プライバシーポリシー」「お問い合わせ」についても、「説明」欄にアイコンのクラス名のみを入力します。
プレビューをスマホ表示にして確認してみてください。
なお、スマホ表示については以下のように表示させましょう。
Chromeを使っている場合は、以下の手順でデベロッパーツールを開きましょう。
画像のようにクリックしましょう。
すると、左の画面がスマホ表示になります。
EdgeブラウザとしてEdgeを使っている場合は、以下の手順になります。
まずは「開発者ツール」を開きます。
画像のようにクリックしましょう。
すると、左の画面がスマホ表示になります。
その③ウィジェット
ウィジェットエリアでもアイコンを使えます。
参考例として、次の２種類をご紹介します。
ウィジェットタイトル
タイトルが入力できるウィジェットでは、ショートコードを使ってアイコンを追加することができます。
ウィジェットのタイトルにアイコンを追加する手順は次の通りです。
「外観」⇒「ウィジェット」をクリックしてウィジェットの画面を表示します。
共通サイドバーに設置したカテゴリーを開きます。
「タイトル」欄にショートコードを含めたタイトルを入力します。
【例】
「[icon icon-toc] カテゴリー」
サイドバーを確認すると、アイコンが付いたタイトルが表示されます。
プロフィールウィジェット
プロフィールウィジェットでは、プロフィール文内にもアイコンを挿入できます。
プロフィールウィジェットにアイコンを挿入する手順も見ていきましょう。
「[SWELL] プロフィール」ウィジェットを選択してください。
プロフィール文内にショートコードを挿入します。
これで、プロフィールを表示するとアイコンが表示されますよ。
アッフィーここで紹介したのは一例です。工夫次第でいろいろな活用方法がありますよ！
SWELLアイコンの使い方【FontAwesome編】
SWELLでFont Awesomeアイコンを活用する方法を3つのステップで解説します。
豊富なアイコンを使えるようになるため、表現の幅が大幅に広がるでしょう。
最初のステップでは、SWELL設定でCSSファイルを読み込む設定を行います。
まず、WordPress管理画面から「SWELL設定」をクリックしてください。
上部タブの「Font Awesome」をクリックして、Font Awesome設定画面を開きます。
「Font Awesomeの読み込み」から「CSSで読み込む」を選択しましょう。
バージョンは最新の「v6」のままで問題ありません。
設定後は「変更を保存」をクリックしてください。
このステップでは、Font Awesome公式サイトから使用したいアイコンを探し、そのクラス名をコピーします。
Font Awesome公式サイトにアクセスし、使いたいアイコンを探しましょう。
使いたいアイコンをクリックして詳細ページを開きます。
アッフィー：「PRO」と表示されているアイコンは有料です。記載のないものを選びましょう。
アイコンの詳細ページで「<i class=”fa-solid fa-headphones”></i>」のようなコードが表示されます。
この「fa-solid fa-headphones」部分がクラス名なので、メモ帳などに一時保存してから、クラス名だけをコピーしましょう。
このステップでは、コピーしたクラス名をSWELLのショートコード形式に変換して記事内に挿入します。
コピーしたクラス名を、「[icon class="fa-solid fa-headphones"]」の形式に変換して、段落ブロックやその他のブロック内に入力してください。
プレビューで正しくアイコンが表示されているか確認しましょう。
SWELLで使えるアイコン一覧
SWELLで利用できるアイコンの種類とクラス名をご紹介します。
SWELLアイコン一覧【80個】
まずは、SWELLでフォントファイルとして読み込んでいるアイコンを紹介します。
アッフィー文字をクリックすればコピーできますよ
FontAwesomeアイコン【30個】
Font Awesomeのアイコンは、有料プランと無料プランがあります。
無料で使えるアイコンでも、約2,000個もあります！
今回は、無料の中でもよく使うと思われるアイコンを紹介しますね。
アッフィー文字をクリックでコピーできますよ
【Q&A】SWELLのアイコンに関する「よくある質問」
SWELLアイコンの使用中によくある疑問点について、具体的な解決方法をご紹介します。
初心者でも安心して対処できるよう、詳しく解説していきましょう。
SWELLアイコンが表示されないときの対処法は？
アイコンが表示されない場合、主に4つの原因が考えられます。
- WordPressのバージョンが古い
- SWELLのバージョンが古い
- ショートコードが間違っている
- クラス名が間違っている
多いのは、3番目、4番目の原因です。
また、 FontAwesomeアイコンを使う場合には、SWELL設定でCSSファイルを読み込む設定が必要です。
この設定を忘れると表示されないので注意しましょう。
アッフィーいずれにしても、人的ミスが多いですね
SWELLでSNSアイコンを表示する設定は？
SNSアイコンを表示するには、カスタマイザーのSNS情報設定で各SNSのURLを入力する必要があります。
設定後は、ヘッダーやサイドバーなど複数の場所に自動で表示されるようになります。
ここではX（旧Twitter）のアイコンを設定する手順を見ていきましょう。
「外観」→「カスタマイズ」をクリックして、カスタマイザー画面を開いてください。
「SNS情報」をクリックし、X（旧Twitter）のURLを入力します。URLを入力するだけで、該当するSNSアイコンが自動表示されます。
フッターなどでSNSアイコンが正しく表示されているか確認しましょう。
SWELLのサイトアイコンの推奨サイズは？
サイトアイコンはファビコンと呼ばれます。
SWELLのサイトアイコン（ファビコン）の推奨サイズは512×512pxの正方形です。
これはWordPress標準の推奨サイズで、ブラウザのタブやスマホのホーム画面で美しく表示されます。
ファビコンを設定する手順を見ていきましょう。
Canvaで512×512pxの正方形画像を作成しましょう。
PNG形式がおすすめ。
下図は当サイトのファビコン画像です。
「外観」→「カスタマイズ」をクリックしてください。→「WordPress設定」→「サイト基本情報」の順に進み、「サイトアイコン」から画像をアップロードしてください。
「WordPress設定」⇒「サイト基本情報」をクリックしてサイト基本情報画面を開きます。
「サイトアイコン」から画像をアップロードしてください。
アイコンが正しく表示されているか確認しましょう。
設定後は自動的に各サイズに最適化されます。
まとめ：SWELLアイコンの活用でサイトをさらに魅力的に！
この記事では、SWELLテーマで利用できる110種類のアイコン一覧と、その具体的な使い方を徹底解説しました。
SWELLのショートコードのアイコンから使用できる場合と、ブロック自体にアイコンの入力場所があるパターンがあり、使うコードは以下の通りです。
[icon XXXX]
または
[icon class=”XXXX”]
（注）XXXX部分にアイコンのクラス名を入力
クリックするだけでクラス名をコピー出来るようにしてあるので、活用してくださいね。
ぜひ本記事を参考に、SWELLアイコンを使いこなして、より魅力的なWebサイトを構築してください。
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、アイコン設定が簡単なSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
