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

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

ウェブ制作において、アイコンは視覚的にメッセージを伝える重要な役割があります。
Elementorには多種類のアイコンが搭載されており、色・形・サイズなど多種多様にデザイン、またマウスオーバー時のアニメーション設定もできてしまいます。
この記事ではElementorでのアイコンウィジェットでのアイコンの作り方、設定を詳しく説明していきます。

また、TOFUラボのメンバーの藤原さんによるアイコンと見出しを掛け合わせて作る技を以下の動画でご覧いただけます。

>>円形や星形などの図形をアイコンウィジェットを使って飾り付けした、かわいいh3の見出しデザインの作り方の実演動画

>>インラインでラインのアイコンウィジェットを使って作る、メリハリのあるh3の見出しデザインの作り方を実演

>>アイコンウィジェットやスペーサーウィジェットと、背景色を設定した見出しウィジェットを重ねて作るh3の見出しデザインの作り方の実演

>>ElementorのアイコンウィジェットからSVGデータをWordPressにアップロードし画像として使用する方法の実演と、Webサイトを軽くするSVGデータのメリット

サイト制作のアイディアとして役に立つのでぜひ参考にしてください!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

アイコンウィジェットの挿入

アイコンウィジェットをカラムに挿入

アイコンウィジェットをドラッグ&ドロップでカラムに挿入します。

アイコンウィジェット挿入後の画像

アイコンウィジェットをカラムに挿入すると、このような画面表示になります。

『コンテンツ』でアイコンを編集する

コンテンツの編集

コンテンツで何ができるのかを説明します。

アイコンライブラリー

アイコンライブラリー

デフォルトで星のアイコンが表示されるので、変更する場合はアイコンライブラリーをクリックします。

アイコンライブラリーのアイコン一覧


アイコンライブラリーの一覧の中から自分の使いたいアイコンを選択し、INSERT(挿入)をクリックします。

SVGのアップロードについて

SVGをアップロード

SVGのアイコンを持っていれば、ここららアップロードすることができます。

時にSVGのアップロードを許可していないWoedPressもあるので、その時はGoogle検索をしてください。(よくある問題につき、たくさんの人が解決策をアップロードしています。)

アイコンの表示と形状

表示

アイコンの表示

表示でアイコンを囲む方法を変えます。

  • デフォルト:何もなし
  • 囲む:マークに囲みができ白抜きで表示される
  • フレーム付き:マークを囲む枠線が表示される

形状

アイコンの形状

形状でアイコンを囲む物の形を変えます。

  • 正方形

表示・形状の組み合わせ例

形状の組み合わせ例

表示と形状の組み合わせ次第で色々なアイコンの種類ができます。

リンクの設定

アイコンをクリックした時に何が起こるのかを設定します。

リンクのURLの挿入

アイコンに貼り付けたいリンクのURLを挿入します。

リンクの設定

『リンクの設定』をクリックすると以下の表示が出ます。

  • 新しいウィンドウで開く(アイコンをクリックした時に新しいウィンドウでリンクを開きます)
  • Nofollowを追加(SEOに関わることで、貼り付けたリンクのサイトと自分のサイトに関連性ないことを示します)

いずれも必要とするものに、左側にチェックボックスに☑︎をつけます。

カスタム属性

JavaScriptで何かすることがなければ、ここは無視してください。

配置

アイコンの配置

カラム内で

  • 真ん中

へのアイコンの配置が可能です。

『スタイル』の編集

スタイルの編集

スタイルで何ができるのかを説明します。

メインカラーとザブカラー

メインカラー/サブカラーの説明

メインカラー:アイコンのマークと枠線の色が設定できます。
サブカラー:アイコンの枠の内側の色の色が設定できます。

メインカラー/サブカラー色味の変更

色の選択は、メインカラー・サブカラー共に各色のついたボックスをクリックするとカラーピッカーが表示され、自由に色の変更をすることができます。

※グローバルカラーについては別の記事で説明しています。

マウスオーバー

アイコンにポインターが触れた時の色が変更できます。

色の変更は、メインカラー・サブカラーの時と同様カラーピッカーで自由に変更が可能です。

マウスオーバー後の画像サンプル

ホバー時のアニメーション

※ホバーとは、画像やリンクにポインターを合わせたときに、クリックしなくてもアニメーションが始まったりするような変化が起こる表現のことを指します。

ホバー時のアニメーション設定

▼をクリックし、自分の好きなアニメーションを選択します。

ホバーのアニメーション一覧

※動画のアニメーションはBUZZを選択しています。

サイズ

アイコンのサイズの変更の仕方

カーソルを左右にスライドさせて、アイコンのサイズを変更することができます。

サイズの変更の画像サンプル

パディング

パディングの説明

アイコンのマークと枠の間のスペースを変えることができます。

パディングの変更の仕方

パディングの変更の仕方はサイズの変更と同様、カーソルを左右ににスライドです。

回転

回転の仕方
回転の説明

マークを360度回転させることができます。

枠線の幅

枠線の幅の変更

▲▼のボタンで枠線の幅を変更することができます。

枠線の幅を変更画像サンプル

枠線の幅を部分的に、別の値に変更することもできます。

枠線の幅/値をまとめてリンクを解除

『値をまとめてリンク』を解除すると、上下左右の値を別々の値で枠線の太さを変更することができます。

右側枠線の値を変更した状態サンプル

枠線の丸み

枠線の丸みの変更
枠線の丸みをつけた画像サンプル

操作の仕方は枠線の幅の変更の仕方と同じです。
※アイコンの形状が正方形の時のみ使用が可能です。


この様に、多種多様の設定で何通りものオリジナルアイコンを作ることができます。
ぜひアイコンウィジェットを活用し、デザイン性・利便性の高いウェブ制作に役立ててください。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通