Google chrome（グーグル ク...
続きを読む
Elementorとは何？？特徴とインストール方法を紹介
2024/02/21
ワードプレスやWEB制作界隈で近年急速に耳にするようになった「Elementor（エレメンター）」とは何?? 詳しく紹介します！
ワードプレスのWEBサイトやブログでボタンを作成するときに、マウスをかざすと色が変わったり、ボタンが拡大したりするエフェクトを追加する方法を紹介します。
それぞれのエフェクトの設定方法も詳しく解説しますので、ぜひ参考にしてみてください！
↑上のボタンのように、マウス（カーソル）をかざすとボタンが拡大するエフェクトの設定方法を解説します。
↑ワードプレスのブロックエディタで設定する場合は、ボタンを設置したい投稿または固定ページの編集画面で「ボタン」を設置します。
↑まずはボタンの設定から行なっていきます。
ボタンのリンク先は、ボタンメニューの中央あたりにある「リンクマーク」をクリックしリンク先のURLを入力します。
ボタンの色やサイズなど、見た目に関する部分は画面右側で調整可能です。
今回の例では、背景色は「黒」、テキストは「白」に設定しています。
↑画面右側の設定画面で「ブロック」を選択した状態で、歯車マークをクリックし「高度な設定」のプルダウンを開いて「追加CSSクラス」に「grow-button」と入力します。
ここまで入力したら、一度保存しておきます。
↑ワードプレスのメニューに戻り、「外観」から「カスタマイズ」をクリックします。
↑カスタマイズの画面に進んだら、「追加CSS」をクリックします。
↑追加CSSの部分に下記のコードをコピーして貼り付け、「公開」をクリックします。
.grow-button {
display: inline-block;
transition: transform 0.3s ease;
}
.grow-button:hover {
transform: scale(1.1); /* マウスオーバー時にボタンを1.1倍に拡大 */
}
ここまで設定したら、マウスをかざした時にボタンが拡大するエフェクトが実装することができます！
ワードプレスのページビルダープラグイン「Elementor」を使えば簡単にエフェクトを加えることができます！
ワードプレスやWEB制作界隈で近年急速に耳にするようになった「Elementor（エレメンター）」とは何?? 詳しく紹介します！
↑Elementorのウィジェットから「ボタン」を選択し配置 します。
↑ボタンを選択した状態で「スタイル」をクリックし、「ホバー時のアニメーション」の部分のプルダウンをクリックします。
↑「ホバー時のアニメーション」のプルダウンから「Grow」を選択すると、マウスをかざした時にボタンが拡大するエフェクトを実装できます！
ボタンの背景色・テキストの色を変更するエフェクトは、Elementorを使うととても簡単です！
↑Elementorでボタンを設置したら、「スタイル」を選択し「普通」の方（マウスをかざしていない状態）の設定をしていきます。
↑マウスをかざした時の設定は「マウスオーバー」をクリックして行います。
下の部分の「色」を変更すると、マウスをかざした際にボタンの背景色を変更することができます。
↑マウスをかざした時の設定は「マウスオーバー」をクリックして行います。
下の部分の「文字色」を変更すると、マウスをかざした際にボタンの文字色を変更することができます。
今回の記事では、ワードプレスでボタンに「拡大」のエフェクトを設定する方法、また、ワードプレスのページビルダープラグイン「Elementor」を使ってボタンの背景色・文字の色をマウスオーバー時に変更する方法を紹介しました。
ボタンのエフェクトは、UIの観点からもユーザーにボタンをクリックしてもらうように誘導する（＝ここがクリックできますよ〜とわかるようにする）ためにも重要です。
ぜひ今回の方法を参考にしてみてください！
2025-01-25
Saturday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
Elementorの新テーマ「Hello...
続きを読む
