WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorのアイコン 完全解説

Elementorのアイコン ウィジェット

icon-widget

基本的な使い方1

icon-widget2

アイコンウィジェットを編集画面に入れると、デフォルトで星のアイコンがセットされます。

①ゴミ箱:アイコンを削除したい場合にクリックします。

②Icon Library:アイコンライブラリーからアイコンを選べます。
iconlibrary

おじさん
おじさん
ほぉ〜たくさんありますなぁ。

そうなんです!迷っちゃうくらいっていうか、迷いますね。

これは、「Font Awesome(フォントオーサム)」と呼ばれるアイコンを文字として扱う事が出来る物です。文字と同様に扱えるので、サイズや色も変更できちゃいます!ただ、欠点が探しづらい・・・無料で使えるものだから我慢はしていますが、海外ライクな表現が日本人の直感とマッチしないのです。

それはさておき、使いたいアイコンを選択して「insert」をクリック!それだけです。

③Update SVG:SVG形式のファイルを読み込む事が出来る。

スーパーバイザーゴッド
おじさん
おじさん

サイヤ人ゴッドみたいですね・・・(汗)

SVG形式の画像は、拡大縮小などに柔軟に対応します。普通のJPEGやPNGなどは、拡大しすぎると荒くなってしまうのですが、SVGは劣化しないのが特徴です。つまりはアイコンウィジェットのアイコンの様に、スタイルでサイズを変えたりする事が出来るという訳なのです!

詳しくは後ほどご紹介します。

基本的な使い方2

icon-widget3

④表示と形状

アイコンのタイプを選択する事が出来ます。
表示では「重ねる」「フレームつき」が選択でき、形状では「円」「四角」を選択できます。それぞれを組み合わせて出来るの下のパターンです。

icon-widget4

リンクと配置は割愛致します。

 

アイコンのスタイル設定1

出来る事を動画に凝縮

ホバー時の色とアクションを調整する事が出来るので、アクセントには良いですが、スマホだっとタップしてもらえない率高めです(涙)

icon-style2

あとは、ローテーション(回転)ですね。上のサンプルは20ずつ数値を設定してみました。

おじさん
おじさん
星のせいで、わかりづらいと思ったでしょ?

作った後で気付きました・・・違うアイコンにするんだった・・・(汗)

アイコンのスタイル設定2

基本的な使い方2で登場した「表示」で、「重ねる」「フレーム付き」を選択した場合、より多くの設定が可能となります。

iconstyle_3

まずは、パディングです。上のサンプルは「表示:重ねる」を選択しています。この場合のパディングは円の外周とアイコン本体の隙間を設定できます。

iconstyle_4

次は色の設置で、「サブカラー」が設定できます。上のサンプルは「表示:重ねる」です。

なんか怖っ・・・
おじさん
おじさん

星あきたので・・・(ぼそっ)

メインカラーが周りの色(背景?)で、サブカラーがアイコン本体の色となります。

iconstyle_5

そのまま、「表示:フレーム付き」を選択した場合です。反転した様に、アイコン自体の色と外枠の色がメインカラーとなり、中身(背景)がサブカラーとなります。

iconstyle_6

最後はボーダー幅とボーダー丸みです。表示の「重ねる」と「フレーム付き」で設定可能になります。

ボーダー幅は字のごとく外枠の線の太さを設定でき、ボーダー丸みは外枠の角の丸みを設定する事ができます。

いろいろなウィジェットでアイコン?

icon-widgetlist

アイコン関連のウィジェットは多く、基本的な扱いは同じです。アイコンウィジェットを使えれば、他のウィジェットでも使えこなせるので、是非マスターしてみて下さい!

厳密に言うと、他にもアイコンウィジェットの一部が使えるウィジェットはあります。

 

アイコンを増やしたい!

使えるアイコンを増やすには2つの方法があります。1つはSVGファイルをアップロードして使う方法(無料版OK)と、Elementor Pro版の「Custom Icon」を使う方法です。

svguplord

こんな感じで、アイコンとしてSVG形式の画像を扱う事ができます。

SVGファイルをアップロードして使う方法

アイコンウィジェットを配置し、アイコンを選択するところで、SVGファイルをアップロードして使う事ができます。

(注意)初回使用時に警告メッセージが表示されます。

不明なソースからSVGファイルをアップロードすると、セキュリティ上の脅威になる可能性があります。関連するセキュリティリスクを理解して受け入れた後、信頼できるソースからのみファイルをアップロードし、この機能を有効にすることをお勧めします。

(引用元:https://docs.elementor.com/article/587-enable-svg-support-in-elementor

実はこのSVG、XMLベースのベクター画像なので悪質なプログラムを忍ばせる事が出来るちゃうんですね。なので、信頼のおける自分を含む作成者のアイコンを使いましょう!

①何はともあれアイコンウィジェットを配置して、「Upload SVG」をクリック
icon_svgup

②いつもの画像アップロードの様にSVGファイルをアップロードして選択!
icon_svgup2

③あとはデフォルトのアイコンと同様にセッティングするだけでOK

(注意)一部のSVGアイコン配布サイトのアイコンだと、色の設定ができなかったり、サイズの設定が無効化される場合があります。

無料で安心に使えるアイコン配布サイト紹介!

Material Icons

https://material.io/resources/icons/

Googleが運営するアイコン提供サイトなので安心です。アンドロイド端末などで使われているアイコンを中心に配布されています。

Streamline 3.0

https://www.streamlineicons.com/index.html

無料会員登録するとメールで300種類のSVG形式のアイコンがもらえます!

unDraw

https://undraw.co/illustrations

アイコンではないのですが、イラストをSVGで配信しています。
※色の設定は反映されません。

Custom Icons(Elementor Proのみ)

アイコンを追加する方法としてPro版の場合、Custom Iconsという機能があります。カスタムフォントと同じ感覚で、アップロードして使う感じです。
これについては現在検証中なので、次回の機会に紹介したいと思います。

おじさん
おじさん
これが噂の大人の事情?!

イヤミっぽいですね・・・(苦笑)

まとめ

いかがでしたでしょうか?iconはサイズを変更しても荒くならないメリットもあり、画像より便利なシーンが多く存在します。SVGがアップロード出来るようになり、さらに活用範囲が広がると思います。

ぜひ、使い方をマスターして素敵なサイトを作ってみて下さい♩

Custom Iconについてはすみません・・・(ぼそっ)

この記事の関連講座

Elementorを使うためのWordPress講座
ブログの作り方講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。