【Pick Up!!】『ブログ用語集』始めました!100以上の用語をサクッと解説!

SWELL|WEBアイコンを上手に使って1段上のサイトへ!

当ページのリンクには広告が含まれています。
SWELL標準装備のWEBアイコンを使ってみよう!
くま太君

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

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

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

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

WEBアイコン見本
WEBアイコンってこんなヤツ

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

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

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

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

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

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

目次

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

くま太君

2022年11月現在、
78種類のWEBアイコンがサクット使えちゃう!

コピペですぐに使えるように、一覧を用意してみたよ。

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

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

スクロールできます
アイコンクラス名ショートコード
icon-amazon[アイコン icon-amazon]
icon-codepen[アイコン icon-codepen]
icon-facebook[アイコン icon-facebook]
icon-feedly[アイコン icon-feedly]
icon-github[アイコン icon-github]
icon-googleplus[アイコン icon-googleplus]
icon-hatebu[アイコン icon-hatebu]
icon-instagram[アイコン icon-instagram]
icon-line[アイコン icon-line]
icon-medium[アイコン icon-medium]
icon-pinterest[アイコン icon-pinterest]
icon-pocket[アイコン icon-pocket]
icon-rss[アイコン icon-rss]
icon-tumblr[アイコン icon-tumblr]
icon-twitter[アイコン icon-twitter]
icon-wordpress[アイコン icon-wordpress]
icon-youtube[アイコン icon-youtube]
icon-swell[アイコン icon-swell]
icon-phone[アイコン icon-phone]
icon-info[アイコン icon-info]
icon-light-bulb[アイコン icon-light-bulb]
icon-cart[アイコン icon-cart]
icon-thumb_down[アイコン icon-thumb_down]
icon-thumb_up[アイコン icon-thumb_up]
icon-person[アイコン icon-person]
icon-mail[アイコン icon-mail]
icon-download[アイコン icon-download]
icon-megaphone[アイコン icon-megaphone]
icon-pen[アイコン icon-pen]
icon-more_arrow[アイコン icon-more_arrow]
icon-batsu[アイコン icon-batsu]
icon-check[アイコン icon-check]
icon-posted[アイコン icon-posted]
icon-modified[アイコン icon-modified]
icon-search[アイコン icon-search]
icon-close-thin[アイコン icon-close-thin]
icon-menu-thin[アイコン icon-menu-thin]
icon-alert[アイコン icon-alert]
icon-hatena[アイコン icon-hatena]
icon-index[アイコン icon-index]
icon-arrow_drop_down[アイコン icon-arrow_drop_down]
icon-arrow_drop_up[アイコン icon-arrow_drop_up]
icon-flag[アイコン icon-flag]
icon-settings[アイコン icon-settings]
icon-chevron-small-down[アイコン icon-chevron-small-down]
icon-chevron-small-left[アイコン icon-chevron-small-left]
icon-chevron-small-right[アイコン icon-chevron-small-right]
icon-chevron-small-up[アイコン icon-chevron-small-up]
icon-book[アイコン icon-book]
icon-minus[アイコン icon-minus]
icon-plus[アイコン icon-plus]
icon-lock-closed[アイコン icon-lock-closed]
icon-lock-open[アイコン icon-lock-open]
icon-home[アイコン icon-home]
icon-quill[アイコン icon-quill]
icon-books[アイコン icon-books]
icon-file-empty[アイコン icon-file-empty]
icon-file-text2[アイコン icon-file-text2]
icon-file-picture[アイコン icon-file-picture]
icon-file-music[アイコン icon-file-music]
icon-file-video[アイコン icon-file-video]
icon-file-zip[アイコン icon-file-zip]
icon-folder[アイコン icon-folder]
icon-price-tag[アイコン icon-price-tag]
icon-bubble[アイコン icon-bubble]
icon-bubbles[アイコン icon-bubbles]
icon-quotes-left[アイコン icon-quotes-left]
icon-quotes-right[アイコン icon-quotes-right]
icon-link[アイコン icon-link]
icon-attachment[アイコン icon-attachment]
icon-eye[アイコン icon-eye]
icon-bookmarks[アイコン icon-bookmarks]
icon-star-empty[アイコン icon-star-empty]
icon-star-half[アイコン icon-star-half]
icon-star-full[アイコン icon-star-full]
icon-heart[アイコン icon-heart]
icon-blocked[アイコン icon-blocked]
icon-share[アイコン icon-share]
SWELL公式サイトより抜粋

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

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

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

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

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

くま太君

使い方は超簡単!

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

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

こんな感じです。

[アイコン icon-swell]

結果:

[icon class="icon-mail"]

結果:

とっても簡単でしたね!

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

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

くま太君

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

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

WEBアイコン入れ方見え方
本文中への入れ方

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

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

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

くま太君

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

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

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

WEBアイコンフォントとは

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

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

kakudaiACドットイメージ
画像解像度のイメージ

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

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

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

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

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

くま太君

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

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

グローバルメニューはこれ!
グローバルメニューはこれ!

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

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

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

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

グローバルメニューWEBアイコンの設定
グローバルメニュー設定画面

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

[アイコン icon-home]
グローバルメニューWEBアイコンの表示
ヘッダー/グローバルメニュー

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

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

グローバルメニューWEBアイコンの設定方法2
グローバルメニュー設定画面

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

グローバルメニューWEBアイコンの設定方法4
グローバルメニュー設定画面

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

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

くま太君

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

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

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

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

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

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

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

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

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

☆読んでくれてありがとう!よかったらシェアしてね!☆
目次