マウスオーバー設定の方法｜「INBOUND TOOLS」マニュアルサイト
ボタンをマウスオーバーさせたい
2種類の画像を用意するだけで、ボタンにカーソルを当てた時、画像や色が変化する動きをつけることができます。
事前に、カーソルを合わせてない状態の時（マウスオーバー前）の画像と、カーソルを合わせた時に変化する（マウスオーバー時の画像）画像の2種類を用意してください。
マウスオーバー前の画像
マウスオーバー時の画像
1. ボタンを設置したい場所をクリックし「ブロックを追加」をクリック
編集モードにし、ボタンを設置したいレイアウト部分を左クリックし、「ブロックを追加」を選びます。
2. 画像ブロックを選び、「画像設定」をクリック
画像ブロックを選んだら、「画像設定」をクリックし、隠れているオプション設定を全部開きます。
3. 画像ブロックを選び、「マウスオーバー時の画像」を設定する
「画像」部分で通常の画像を「マウスオーバー時の画像」両方をファイルマネージャーから選択し、設定します。「リンク先」や「alt」など、必要項目も入力し、「新規」をクリックします。
4. 編集モードを終了すると、画像がマウスオーバーされる
編集モードの状態だと、マウスオーバーはされないので、必ず編集モードを終了し、「この編集を下書き保存＆プレビュー」か「この編集を公開」を選択し、編集モードを終わらせます。
設定が正しく行われていれば、ボタンにカーソルを合わせればマウスオーバー時の画像が表示され、いわゆる「ホバーする」状態になります。
