Elementorのアイコンボックスの使い方

Elementor『アイコンボックス』ウィジェットの使い方

アイコンボックスウィジェットは、アイコンウィジェット・見出しウィジェット・テキストエディターウィジェットが三位一体となったハイブリッド型ウィジェットです。

この記事では、アイコンボックスウィジェットの使い方を説明していきます。

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

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

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

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

アイコンボックスウィジェット挿入後の表示画面

アイコンボックスウィジェットを挿入すると、この様な表示画面になります。

『コンテンツ』の編集

アイコンボックス・コンテンツの説明

コンテンツでできることを説明していきます。

アイコンボックス

コンテンツのアイコンボックスの説明

アイコン

コンテンツのアイコンの説明

アイコンでは、アイコンの選択が可能です。
アイコンの変更の仕方については【Elementor アイコンウィジェットの使い方】の記事の
アイコンライブラリー・SVGのアップロードにて詳しく説明しています。

表示 / 形状

コンテンツの表示と形状の説明

表示と形状では、アイコンを囲む図形などを追加できます。
詳しくは、【Elementor アイコンウィジェットの使い方】の記事のアイコンの表示と形状で詳しく紹介していますのでそちらを参考にしてください。

タイトル ・説明

コンテンツのタイトルと説明(テキスト)について

タイトル(見出し)と説明(テキスト)の文章を変更することができます。

リンク / カスタム属性

コンテンツのリンクとカスタム属性の説明

詳しくは【Elementor アイコンウィジェットの使い方】の記事のリンクの設定と、カスタム属性の説明をご覧ください。

アイコンの位置

コンテンツのアイコンの位置について

アイコンの位置をカラム内の

  • 中央

に配置することができます。
さらに詳しい説明は【Elementor『画像ボックス』ウィジェットの使い方】の記事のアイコンの位置で紹介しています。

タイトルHTMLタグ

コンテンツのタイトルHTMLタグの設定

基本的にはどのタグを使ってもいいです。
ですがスタイルを他のタグで変えていたりする場合、もしかしたらデフォルトのH3タグから別のタグに変更した時に、表示が変わったりすることもありますので気をつけてください。

コンテンツの編集の表示 / 形状〜タイトルHTMLタグの編集の仕方は、
Elementor『画像ボックス』ウィジェットの使い方】の記事のコンテンツの編集の編集の表示 / 形状〜タイトルHTMLタグの編集の仕方と同じです。

『スタイル』の編集

アイコンボックス・スタイルの編集

スタイルでできることを説明します。

アイコン

スタイルのアイコンの編集

メインカラー / サブカラー

スタイルのメインカラーとサブカラーの説明

メインカラーでアイコンを囲むものの色、サブカラーでアイコンの色(アイコンの表示で囲むを選択した場合は枠線もアイコンの色と同様)を変えることができます。


メインカラー・サブカラーの更に詳しい説明は【Elementor アイコンウィジェットの使い方】記事にて、またマウスオーバー時の色の設定、説明についてもこちらの記事を参考にしてください。
また、グローバルカラーズについての詳しい説明は【ElementorのGlobal ColorsとGlobal Fontsの使い方】の記事にて紹介しています。

間隔

スタイルの間隔の説明

間隔では、アイコンとタイトル(見出し)の間の間隔が調整できます。
詳しくは【Elementor『画像ボックス』ウィジェットの使い方】の記事にて紹介しています。

サイズ

スタイルのアイコンのサイズ変更の仕方

サイズでは、アイコン全体のサイズが変更できます。
カーソルを横にスライドすることで大小サイズを調節することができます。

パディング

スタイルのパディングの説明

パディングでは、カーソルを横にスライドでアイコンと外枠の間のスペースを変更することができます。

※この時に、アイコンの大きさは変更しません。

回転

スタイルの回転の説明

回転では、カーソルを横にスライドでアイコンを360度回転させることが可能です。

枠線の丸み

アイコンボックス・スタイル/枠線の丸みについて

枠線の丸みでは、上下左右の値を変えることで枠線の角を丸くすることができます。
こちらはアイコンの形状で四角を選択した時のみ有効です。

また、こちらでは紹介をしていませんが、アイコンの表示で『フレーム付き』を選択した場合、『枠線の幅』も変更が可能です。

サイズ・パディング・回転・枠線の丸み・枠線の幅については、
Elementor アイコンウィジェットの使い方】の記事で更に詳しく説明していますのでそちらを参考にしてください。

コンテンツ

こちらのスタイルタブのコンテンツに関しましては、
Elementor『画像ボックス』ウィジェットの使い方】のスタイルタブ・コンテンンツの内容と全く同じなのでそちらを参考にしてください。

TOFUラボ・アイコンボックスに関するメンバー質問

TOFUラボ内のメンバーからの質問に

Elementorのアイコンボックスウィジェットで作成したアイコンとテキストをモバイル表示の際に横並びにしたいのですが、方法はありますか?

という質問がありました。

※上記のリンクにアクセスすると解決方法がご覧いただけます。また、この他にもTOFUラボのメンバーによるQ&Aをまとめた『質問と回答』のページがありますので、サイト制作に迷った時の答えや、新しいヒントがもしかしたら見つかるかもしれません!



Elementorの基本ウィジェットのアイコンウィジェット・見出しウィジェット・テキストエディターウィジェットで、アイコンボックスウィジェットと同じことはできますが、少々面倒になります。

上記の3つ要素が合わさった『アイコンボックスウィジェット』は、ウェブ制作において良く使われるものですので、知っておいて損はないウィジェットでははないでしょうか。

より良いウェブ制作にぜひ活用してみてください!

Naomi Suzuki

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

目次

コメントする

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

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

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

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

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