fbpx

Elementor アラートウィジェットの使い方

何か重要なメッセージをサイトに表示させたいときに『アラート』ウィジェットが便利です。

アラートウィジェットはElementorの一般ウィジェットで無料で使用することができます。

ポップアップを使用するには有料版のElementor Proである必要がありますが、無料版でポップアップのような役割があるウィジェットが欲しいときは『アラート』ウィジェットが役に立ちそうですね。

アラートの全タイプのサンプル表示

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

また、アラートウィジェットの使い方を動画でご覧になりたい場合はこちらからどうぞ!

アラートウィジェットの挿入

アラートウィジェットをカラムにドラッグ&ドロップで挿入

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

アラートウィジェット挿入後の表示画面

こちらは『アラート』ウィジェット挿入後の表示画面です。

コンテンツタブの編集

コンテンツタブの編集

タイプ

タイプの一覧(情報/成功/警告/危険)と全サンプル

『タイプ』はアラートの種類を以下から選択することができます。

  • 情報(デフォルト):青
  • 成功:緑
  • 警告:黄色
  • 危険:赤

選択するタイプにより色も異なります。

しかし、アラートの背景色や文字色の変更はスタイルタブで詳細に行うことができますので、デフォルトの色を使用しない場合はどのタイプを選択しても同じことです。

タイトル・説明

タイトル・説明のテキストの編集

『タイトル・説明』はアラートの中のタイトルと説明文をそれぞれ変更することができます。

各タイプともにデフォルトで以下のように設定されています。

  • タイトル:これはアラートです
  • 説明:これは説明です。編集ボタンをクリックしてテキストを変更してください。

非表示ボタン

非表示ボタンのリストと、表示/非表示に設定したときの違いを説明した画像

『非表示ボタン』はアラートを消すための×ボタンを表示させるかどうかの選択です。

  • 表示(デフォルト):アラートの右上に、アラートを削除するための『×』が表示されます。
  • 非表示:『×』ボタンは非表示になります。またこの場合、閲覧者はアラートを消すことはできなくなります。

スタイルタブの編集・アラート

スタイルタブの編集・アラート

背景色

背景色を変更したときの表示画面

『背景色』ではアラートのボックスの色をカラーピッカーより自由に変更することができます。

枠線の色

枠線の色を変更したときの表示画面

『枠線の色』はアラートのボックスの左側のラインの色をカラーピッカーより自由に変更することができます。

左ボーダー幅

左ボーダー幅を『50』の値に変更したときの表示画面

『左ボーダー幅』はアラートのボックスの左側のラインの幅を最小0〜最大100の値の間で変更することができます。

上記は左ボーダー幅の値を『50』にしたときの表示サンプルです。

なお、値を『0』にするとラインの表示は無くなります。

※デフォルトの値は『5』に設定されています。

スタイルタブの編集・タイトル

スタイルタブ・タイトル編集後の表示画面とエディター

スタイルタブの『タイトル』ではタイトルのテキストの以下の項目を編集をすることができます。

  • 文字色:タイトルの文字色をカラーピッカーより自由に変更することができます。
  • 書体:タイポグラフィより書体やサイズを自由に編集できます。
  • テキストシャドウ:テキストにシャドウの色や濃淡、向きを編集できます。

これらの編集の仕方については、【Elementorの『テキストエディター』ウィジェットの使い方】の記事の同セクションを参考にしてください。

スタイルタブの編集・説明

スタイルタブ・説明編集後の表示画面とエディター

スタイルタブの『説明』では説明のテキストの編集をすることができます。

この編集項目については上記セクションのスタイルタブの『タイトル』で説明していることとまったく同じですのでそちらを参考にしてください。


『アラート』ウィジェットは閲覧者に何か重要なメッセージを伝えたい場合に役立つウィジェットです。

アラートウィジェットは、ボックスと文字だけの大変シンプルなウィジェットなので、もしElementor Proをすでに持っているという方は、Pro版でしか使用することのできない『ポップアップ』を使用すると良いでしょう。

ポップアップについてくわしく説明をした記事もありますのでよかったらご覧になってみてくださいね!

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

こんにちは、ナオミです!

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

目次

コメントを残す

メールアドレスが公開されることはありません。

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

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

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