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

Elementor一般『アイコンリスト』ウィジェットの使い方

今回はElementor一般『アイコンリスト』ウィジェットの使い方を説明します。

アイコンを整理して、リンクをつけたりと便利な機能です。

マウスオーバーも設定できて見た目もオシャレ。
この機会に使い方をマスターしましょう。

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

Elementor一般『アイコンリスト』ウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ!

コンテンツタブの説明

アイコンリストウィジェットのコンテンツタブはこのようになっています。
アコーディオンウィジェットなどと似ていますね。

レイアウトは2つ

このレイアウトによってスタイルタブも一部変わってきます。
2つのレイアウトは以下のようになります。

デフォルトレイアウト

レイアウト、デフォルト状態

まずウィジェットを挿入すると、上のような画面になります。
これはレイアウトがデフォルトに設定されている状態です。

デフォルトはアイコンが縦に並んでいますね。

インラインレイアウト

レイアウト、インライン状態

レイアウトをインラインに変えてみました。
するとアイコンが横並びになります。

リストアイテムの複製や削除

リスト項目の複製と削除

アイコンアイテムを複製したい時は、左側の複製マークをクリックしてください。
削除したい時は×マークです。

新しいアイコンアイテムの作り方

リスト項目を新しく追加する

アイテムの複製ではなく、新しく追加したい場合は四角の『項目を追加』をクリックしてください。

新しいリストの設定方法

すると上の四角のようにリストの設定が開きます。
同時に右側の画面にも新しくアイテムが追加されました。

『テキスト』

リスト名を入力

テキストの項目では、四角の場所に直接入力すると右側のテキストにも反映されます。

『アイコン』

アイコンの選択

アイコンの項目で、好きなアイコンを選びましょう。
カーソルをアイコンが表示されている場所に持っていくと、上の画面のようにアイコンライブラリーがクリックできるようになります。

アイコン選択画面

アイコンライブラリーが開きました。
好きなアイコンを選んだら、右下にある緑のINSERTボタンをクリックしましょう。

選択したアイコンが挿入される

選んだアイコンが表示され、右側の画面にも同じアイコンが挿入されます。

『リンク』

リンクの設定

アイコンのリンクを設定できます。
四角の欄に指定したいリンクを直接入力してください。

リンクについてのくわしい説明は、『アイコンボックス』ウィジェットの記事で詳しく説明しています。
内容が重複しますのでそちらをご覧ください。

リンクをクリックできる幅を決定

リンクの幅:全幅

Apply link Onでリンクが有効になっている幅を決めていきます。
デフォルトレイアウトだと、全幅はカラムの横幅全部でリンクが有効になっています。

リンクの幅:インライン

丸印をインラインにすると、テキストの幅がリンクになり、上の画面で言うと四角の右側の余白はリンクになっていません。

1度自分で確認してみてくださいね。

スタイル設定

スタイルタブの説明

スタイルタブは

  • リスト
  • アイコン
  • テキスト

の項目が編集できます。

『リスト』の項目では、コンテンツタブで設定したレイアウトの状態がデフォルトかインラインかで少し変わるので分けて説明します。

デフォルトレイアウトの『リスト』編集

レイアウトデフォルト

コンテンツタブでレイアウトをデフォルトにした場合です。
左側がグレーになっていとデフォルトが選択されている状態になります。

『スペースの間隔』

スペース間隔の説明

スペースの間隔は、丸で囲んだ場所のことを指しています。
リストの上下のスペースですね。

『配置』

配置は左・中央・右を選べます。
各場所を選んだ時の画面は以下のようになります。

配置:左

配置:左

配置:中央

配置:中央

配置:右

配置:右

『区切り線』

区切り線について

区切り線は丸で囲んだところをオンにすると、設定画面が開きます。

区切り線のスタイル4種

区切り線のスタイルは

  • 単色
  • ダブル
  • ドット
  • 破線

の4種類。今回はわかりやすく単色で説明します。

区切り線の太さと色

色が白だと背景と被って分かりづらかったので、先に丸で囲んだところで変えました。
太字とありますが、単純に線の太さと考えて大丈夫です。
矢印のようにボタンをスライドさせて、太さを調節しましょう。

区切り線の幅

幅は100でカラムの全幅になります。
ボタンを左右にスライドさせ、好きな長さに設定しましょう。

インラインレイアウトの『リスト』編集

レイアウトインラインのリスト

レイアウトをインラインにした場合です。
コンテンツタブのレイアウトの項目で、右側を選ぶとインラインになります。

『スペースの間隔』

スペースの間隔の説明

スペースの間隔のボタンを右へスライドさせていくと、丸で示した場所の間隔が広がっていきます。
レイアウトがデフォルトの時は上下の間隔でしたが、インラインは左右の間隔ということになります。

『配置』

配置で選べるのはデフォルトと変わりません。
見た目の印象が大分違うので、各配置を選んだ時の画面を載せておきます。

配置:左

インライン:配置左

配置:中央

インライン:配置中央

配置:右

インライン:配置右

『区切り線』

高さの説明

スタイル・太字・色はレイアウトがデフォルトの状態と同じですので省きました。

高さは区切り線の長さを指しています。
デフォルトの状態では高さがリストアイテムの高さと同じになり、高さを調節するとラインの長さが変わります。

区切り線の高さ50

高さを50にするとこのようになります。
バランスを考え、高さを調節してください。

『アイコン』の編集

アイコンの編集出来る項目

アイコンの項目で編集できるのは、色・マウスオーバー・サイズ・配置となります。

『色』

アイコンの色

色はそのままの意味で、アイコンの色を変えられます。
丸で囲んだところで、好きな色を選びましょう。
アイコン右側のテキストの色は変わりませんので、注意してください。

『マウスオーバー』

マウスオーバー

マウスオーバーは、カーソルが該当のアイコンの上に来た時の色。
カーソルが消えてしまっていますが、上の画像で王冠マークのアイコンだけ色が変わっています。
これがマウスオーバーしたときの状態になります。

『サイズ』

アイコンサイズ

サイズは矢印のように、ボタンをスライドさせることで変えられます。
テキストとのバランスを考えて設定してください。

『配置』

アイコン配置、左
アイコン配置、中央
アイコン配置、右

アイコンの配置も左・中央・右から選べます。
アイコンのみの配置になります。
分かりづらいので、各配置に設定した画像を並べてみました。

『テキスト』の編集

テキストの編集出来る項目

テキストの項目は上のようになっています。

『文字色』と『マウスオーバー』

テキストの文字色とマウスオーバーの説明

テキストも通常時の色とマウスオーバーの色をそれぞれ設定できますが、仕組みはアイコンの時と同じなので詳しい説明は省きます。

上の画像で言うと、濃い赤が通常時、紫がマウスオーバーした状態になります。

『テキストインデント』

テキストインデントの説明

テキストインデントはアイコンとテキストの間の間隔です。
ボタンを右にスライドさせると、間隔が広がっていきます。

『書体』

書体の項目

書体は丸で囲んだ鉛筆マークをクリックして設定してください。
テキストエディターウィジェットの記事で詳しく説明されています。

以上がアイコンリストウィジェットの説明です。
ぜひ使ってみてください。

また高度な設定については、どのウィジェットも共通なので割愛します。

Naomi Suzuki

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

目次

コメントする

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

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

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

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

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