もくじ
ToggleElementorのアイコン ウィジェット
基本的な使い方1
アイコンウィジェットを編集画面に入れると、デフォルトで星のアイコンがセットされます。
①ゴミ箱:アイコンを削除したい場合にクリックします。
②Icon Library:アイコンライブラリーからアイコンを選べます。
そうなんです!迷っちゃうくらいっていうか、迷いますね。
これは、「Font Awesome(フォントオーサム)」と呼ばれるアイコンを文字として扱う事が出来る物です。文字と同様に扱えるので、サイズや色も変更できちゃいます!ただ、欠点が探しづらい・・・無料で使えるものだから我慢はしていますが、海外ライクな表現が日本人の直感とマッチしないのです。
それはさておき、使いたいアイコンを選択して「insert」をクリック!それだけです。
③Update SVG:SVG形式のファイルを読み込む事が出来る。
サイヤ人ゴッドみたいですね・・・(汗)
SVG形式の画像は、拡大縮小などに柔軟に対応します。普通のJPEGやPNGなどは、拡大しすぎると荒くなってしまうのですが、SVGは劣化しないのが特徴です。つまりはアイコンウィジェットのアイコンの様に、スタイルでサイズを変えたりする事が出来るという訳なのです!
詳しくは後ほどご紹介します。
基本的な使い方2
④表示と形状
アイコンのタイプを選択する事が出来ます。
表示では「重ねる」「フレームつき」が選択でき、形状では「円」「四角」を選択できます。それぞれを組み合わせて出来るの下のパターンです。
リンクと配置は割愛致します。
アイコンのスタイル設定1
出来る事を動画に凝縮
ホバー時の色とアクションを調整する事が出来るので、アクセントには良いですが、スマホだっとタップしてもらえない率高めです(涙)
あとは、ローテーション(回転)ですね。上のサンプルは20ずつ数値を設定してみました。
作った後で気付きました・・・違うアイコンにするんだった・・・(汗)
アイコンのスタイル設定2
基本的な使い方2で登場した「表示」で、「重ねる」「フレーム付き」を選択した場合、より多くの設定が可能となります。
まずは、パディングです。上のサンプルは「表示:重ねる」を選択しています。この場合のパディングは円の外周とアイコン本体の隙間を設定できます。
次は色の設置で、「サブカラー」が設定できます。上のサンプルは「表示:重ねる」です。
星あきたので・・・(ぼそっ)
メインカラーが周りの色(背景?)で、サブカラーがアイコン本体の色となります。
そのまま、「表示:フレーム付き」を選択した場合です。反転した様に、アイコン自体の色と外枠の色がメインカラーとなり、中身(背景)がサブカラーとなります。
最後はボーダー幅とボーダー丸みです。表示の「重ねる」と「フレーム付き」で設定可能になります。
ボーダー幅は字のごとく外枠の線の太さを設定でき、ボーダー丸みは外枠の角の丸みを設定する事ができます。
いろいろなウィジェットでアイコン?
アイコン関連のウィジェットは多く、基本的な扱いは同じです。アイコンウィジェットを使えれば、他のウィジェットでも使えこなせるので、是非マスターしてみて下さい!
厳密に言うと、他にもアイコンウィジェットの一部が使えるウィジェットはあります。
アイコンを増やしたい!
使えるアイコンを増やすには2つの方法があります。1つはSVGファイルをアップロードして使う方法(無料版OK)と、Elementor Pro版の「Custom Icon」を使う方法です。
こんな感じで、アイコンとしてSVG形式の画像を扱う事ができます。
SVGファイルをアップロードして使う方法
アイコンウィジェットを配置し、アイコンを選択するところで、SVGファイルをアップロードして使う事ができます。
(注意)初回使用時に警告メッセージが表示されます。
不明なソースからSVGファイルをアップロードすると、セキュリティ上の脅威になる可能性があります。関連するセキュリティリスクを理解して受け入れた後、信頼できるソースからのみファイルをアップロードし、この機能を有効にすることをお勧めします。
(引用元:https://docs.elementor.com/article/587-enable-svg-support-in-elementor)
実はこのSVG、XMLベースのベクター画像なので悪質なプログラムを忍ばせる事が出来るちゃうんですね。なので、信頼のおける自分を含む作成者のアイコンを使いましょう!
①何はともあれアイコンウィジェットを配置して、「Upload SVG」をクリック
②いつもの画像アップロードの様にSVGファイルをアップロードして選択!
③あとはデフォルトのアイコンと同様にセッティングするだけで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についてはすみません・・・(ぼそっ)