Elementorのアイコンウィジェットの使い方
Elementorのアイコンウィジェットでできること
Elementorのアイコンウィジェットは、アイコンが追加できます。いろんなアイコンが用意されているので、様々な目的に使えますが、例えばあなたが使用しているSNSのアイコンを追加したり、カフェの設備情報（コンセントやWiFiなど）に関するアイコンを追加したり、といった使い方ができます。
コンテンツのアイコン設定
アイコン
「アイコン」の項目では、シンプルにアイコンを選びます。カーソルを置くと「Icon Library」と「Upload SVG」が表示されます。Elementorで用意されているアイコンを使う場合は「Icon Library」、アイコンをアップロードする場合は「Upload SVG」を使います。基本的には、「Icon Library」でOKだと思います。
表示
「表示」では、設置したアイコンの外観の形を変えることができます。「デフォルト」と「重ねる」、「フレーム」の3種類あります。「重ねる」を選ぶと塗りつぶされた状態になり、「フレーム」だとアイコンの周りに縁が表示されます。「重ねる」か「フレーム」のいずれかにすると、「形状」という項目が追加されます。「円」と「四角」の2種類ありますが、「丸」だとアイコンが丸くなり、「四角」だとアイコンが四角く変形します。
リンク
アイコンには、リンクを追加することができます。リンクを追加する場合は、この項目にURLを入力します。
新しいウィンドウで開く
右側にある「リンク設定」という歯車マークをクリックすると、「新しいウィンドウで開く」と「Nofollowを追加」が表示されます。「新しいウィンドウで開く」では、チェックを入れると、リンク先のページが新規ウィンドウで開かれます。
Nofollowを追加
ここにチェックを入れると、リンクがNofollow設定になるので、Googleのクローラーが追跡しないようになります。
配置
最後は、「配置」です。アイコンの位置を左にするのか、中央にするのか、右にするのか決められます。
スタイルのアイコン設定
「スタイル」では、アイコンの色などを設定します。
メインカラー
「普通」と「ホバー」がありますが、「ホバー」はマウスカーソルを置いた時の挙動を設定します。「メインカラー」では、「重ねる」を選んだ場合はアイコンの外側の色が、「フレームつき」を選ぶとフレームと中心のアイコンの色が、「メインカラー」で設定した色になります。
サブカラー
「重ねる」を選んだ場合は中心のアイコンの色が、「フレームつき」を選ぶとフレームと中心のアイコンの間の色が、「サブカラー」で設定した色になります。
ホバー時のアニメーション
「ホバー時アニメーション」ではカーソルを置いた時のアイコンのアニメーションを設定します。アニメーションを付ける場合は、ドロップダウンから好きなアニメーションを選択しましょう。
サイズ
「サイズ」ではアイコンの大きさを設定します。
パディング
「パディング」は、中心のアイコンとフレームのスペースを調節することができます。
ローテーション
「ローテーション」ではアイコンの角度を調節します。
ボーダー幅
「ボーダー幅」は、「フレーム付き」を選んだ場合に表示され、アイコンのボーダーの幅を調節できます。
ボーダー丸み
「ボーダー丸み」は、「重ねる」と「フレーム付き」の両方で表示され、アイコンの外枠の丸みを調節できます。「形状」で「円」を選んでも「四角」を選んでも、四角くしたり、丸くすることができます。
