SWELL｜WEBアイコンを上手に使って１段上のサイトへ！

くま太君

あったら見やすく、オシャレになるとっておき、
SWELL標準装備『WEBアイコンの種類と使い方』をご案内するね。
使い方は簡単だから、記事のアクセントに使ってみてもいいかも！

いわゆるWEBアイコンフォントと呼ばれるものですが、画像を使うよりも簡単・便利です。

当ページでは、コピペで使える！
SWELL標準のWEBアイコンの『ショートコード一覧』をご用意しました！

こんな感じのアイコン、見たことありませんか？

目線の誘導やテキスト内のワンポイントなど、使い所はたくさんありますね。

WordPressテーマ、SWELLでは、この便利なWEBアイコンを標準装備しています。

「Font Awesome」という有名なWEBアイコンフォントもありますが、こちらはちょっと下準備が必要。

その点SWELLでは、下準備が無くすぐに使え、簡単にWEBアイコンを使う事ができます。

ブログ作成に慣れてきたら、WEBアイコンを上手に使って、１段上のブログサイトを目指してみましょう！

ゼロブロ雑記帳

SWELL｜ショートカットは超便利！使えるおすすめ大公開！ SWELLでショートカットという便利な機能を駆使して時間短縮！ダイレクトにブロックを呼び出せるので簡単です。基本的なコマンドや使い方を簡単解説します！

この記事を読むと分かること
・SWELL標準装備のWEBアイコンの種類
・SWELL標準装備のWEBアイコンの使い方

SWLL標準装備のWEBアイコン一覧

くま太君

2022年11月現在、
78種類のWEBアイコンがサクット使えちゃう！
コピペですぐに使えるように、一覧を用意してみたよ。

まずは、SWELLの標準装備で使える、WEBアイコン一覧をみてみましょう。

一番右側の列『ショートコード』を、そのままコピーしてご使用いただけます。

これだけの種類が揃っていれば、「Font Awesome」という、別のWEBアイコンを使わなくても十分対応出来そうですね。

私も当サイト内では、このSWELL標準装備のWEBアイコンだけで、十分間に合っています。

ちょっと目線の誘導をしたり、ワンポイントで使うには、わざわざ画像を準備する必要もないので、とても便利です。

＼ 【広告】SWELLなら、設定も編集もサクサク快適！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！

SWELL公式サイトで購入できます

SWELL標準装備WEBアイコンの使い方

くま太君

使い方は超簡単！

[アイコン クラス名]
[icon class="クラス名"]

上記どちらかのショートコードで「クラス名」の部分に、「SWLLで使えるアイコン一覧」にある「クラス名」を入れるだけ！

こんな感じです。

[アイコン icon-swell]

結果：

[icon class="icon-mail"]

結果：

とっても簡単でしたね！

『SWELLで使えるアイコン一覧』の一番右側の『ショートコード』をそのままコピーしてご使用いただけます。

アイコンを文中へ入れる方法

くま太君

HTMLボックスを使わなくても、
そのまま文中でショートコードを入れればOK！

編集中のテキストの中へ、そのままショートコードを入れるだけです。

上記図の、実際の記入例です。

[アイコン icon-megaphone] この記事を読むと分かること

アイコンの扱い方は文字と同じ！

くま太君

WEBアイコンはテキストと同じ扱いが出来るんだ。
だから、色や大きさを変えるのも簡単！
テキストと同じ扱いだから、大きくしてもぼやけたりしないんだ。

いつものテキスト編集と同じやり方で、色を変えたり、文字の大きさを変更することができます。

この記事を読むと分かること
この記事を読むと分かること
この記事を読むと分かること

WEBアイコンフォントとは

文字と同じように表示できるアイコン。
HTMLやCSSで、サイズや色変更も文字と同じように編集できる。
画像ではないので拡大してもぼやけない。
ブラウザ表示はユーザー側の環境に左右されず、サーバーに設置されたフォントを読み込むことで、ブラウザが自動的に指定したフォントを表示する。
そのため文字化けなど起こりにくく、制作者側の意図した表示をすることができる。

画像は、その画像が持つ解像度（1ピクセルの中に何個ドットがあるか）によって、その鮮明さが変わります。

その画像が持つ画像解像度は、それぞれ決まっているので、ムリに画像を小さく・大きく変更すると、ある許容量を超えると、ぼやけてしまうのです。

その点、WEBフォントであるSWELL標準のWEBアイコンは、『文字』と同じ扱いなので、

・大きくしてもぼやけない
・記事の編集中にすぐに色変更できる

という、お手軽アイテムなのです。

アイコンをグローバルメニューで使う方法

くま太君

このSWELLのWEBアイコンは、
グローバルメニューでも使えるんだよ。

グローバルメニューは、上部ヘッダーにある、メニューのことです。

グローバルメニューの設定場所は、

WordPress管理画面
『外観』→『メニュー』

上記から、グローバルメニューの設定画面に移行します。

上の図のようにショートコードを記入すると、

[アイコン icon-home]

グローバルメニュー設定画面で、『説明』部分にWEBアイコンのショートコードを入れると、ナビゲーションラベル（ホーム）の下にアイコンが表示されました。

また、『ナビゲーションラベル』部分にも、WEBアイコンのショートコードを入れられます。

さらに、WEBアイコンのショートコードと、テキストの同時使いもOKです。

グローバルメニューはとても目に付くので、一手間かけてオシャレサイトにするのはいかがでしょうか？

今回のまとめ。SWELLのWEBアイコンは簡単で使いやすい！

くま太君

ショートコードを入れるだけで、
簡単にSWELL標準装備のWEBアイコンが使えたね！

一手間掛けてあげると、見やすくオシャレなサイトに早変わり！

SWELL標準装備のWEBアイコンは、

・画像の準備の手間がない
・テキストと同じやり方で色・サイズを変更可能
・他のWEBフォント「Font Awesome」のように、下準備なしですぐに使用可能

SWELL内の色んな所でこのWEBフォントのショートコードが利用できるので、ちょっと読者の目線を誘導したい時などにおすすめです。

・ただのテキストリンクよりも、アイコンが付いている方が、クリックしたくなるかも？！

一工夫でテキストが見やすくなる場合もあるので、SWELL標準装備のWEBフォント、おすすめです！

ここまでお読みいただき、ありがとうございました。

あわせて読みたい

SWELL｜サイトの目印！アイコンを付けてブラウザタブに存在感を出そう！ SWELLでのサイトアイコン（favicon）、画像の作り方や設定方法を画像を使って簡単解説！ブラウザのタブやブックマークなど、出番はたくさん！自分のWEBサイトの目印、シンボルマークを今すぐ設定しよう！

＼ 【広告】SWELLなら、設定も編集もサクサク快適！ ／
WordPressテーマ『SWELL』の詳細は公式サイトで！

SWELL公式サイトで購入できます