メインコンテンツにスキップ

リンクやホバーアニメーションが動作しない時の修正方法

リンクやホバーアニメーションが動作しないときに確認したいポイントをまとめました。リンク設定、ボックスの重なり、アニメーション用ボックスの重ね順の3つを順番に確認して解消します。

リンクやホバーアニメーションが動作しない場合、多くはリンク設定の不備かボックス同士の重なり、アニメーション用ボックスの重ね順が原因です。

本記事では、それぞれの確認手順と修正方法を順番に説明します。

  1. リンクの設定が外れている

  2. 別のボックスが覆いかぶさっている

  3. 全体を覆うアニメーションボックスの重ね順が他の要素よりも大きい


1. リンク設定が外れていないか確認する

メニューやボタンをクリックしても別ページに移動しないときは、リンクが正しく設定されているかを確認します。

確認・解決方法

  1. 対象サイトのデザインエディタを開きます。

  2. 動作しないリンクやホバーアニメーションを設定したボックスを選択します。

  3. 右パネルで[設定]タブを開き、[リンク] の設定欄を確認します。パネルが閉じている場合は、右パネルを開いてください。

  4. リンクが未設定、またはリンク先が誤っている場合は、正しいリンク先を再設定します。リンク設定の方法は、各種リンクの設定方法を参照してください。

  5. 調整後、ライブプレビューでリンクが正しく動作するか確認します。

  6. 公開中サイトの編集を行なっている場合には、編集が完了したら公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。


2. 別のボックスが覆いかぶさっていないか確認する

ネガティブマージンなどのレイアウト調整により、リンクが設定されたボックスの上に別のボックスが重なってクリックできなくなる場合があります。

確認・解決方法

  1. 対象サイトのデザインエディタを開きます。

  2. 動作しないリンクやホバーアニメーションを設定したボックスを選択します。

  3. 画面上で、対象ボックスの上に別のボックスが被さっていないかを目視で確認します。

  4. レイアウトが複雑な場合は、レイヤーパネルを開き、ボックス同士の階層や配置状態を確認します。

  5. 上に重なっているボックスがある場合は、位置をずらす、サイズを調整するなどして、リンクボックスの上に乗らないよう配置を見直します。

  6. 配置を変更したら、必要に応じて重ね順の値も調整し、リンクボックスがクリックを受け取れる状態になっているか確認します。

  7. 調整後、ライブプレビューでリンクやホバーアニメーションが正しく動作するか確認します。

  8. 公開中サイトの編集を行なっている場合には、編集が完了したら公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。


3. アニメーションボックスの重ね順調整

ローディング演出など、ページ全体を覆うアニメーションボックスの重ね順が他の要素より大きいと、表示上は見えなくてもクリックやホバーを遮ってしまう場合があります。

確認・解決方法

  1. デザインエディタを開き、ページ全体を覆うローディング用ボックスやホバーアニメーション用のボックスを選択します。

  2. 右パネルで[ボックス]タブを選択し、[ボジション]設定で重ね順の値がリンクを設定したボックスよりも大きい値になっていないか確認します。

  3. 通常表示時(アニメーション終了時)にアニメーションボックスが前面に残らないよう、重ね順の数字を他のボックスより小さく設定します。

    例:アニメーションボックスが「-3」で、他のボックスが「-4」の場合は、アニメーションボックス側の値を「-5」など、より小さな値に調整します。

    • 透明度のみを変更して非表示にしている場合でも、重ね順の値が高いままだとクリックを妨げることがあります。必要に応じてスケールを 0 にするなど、表示とクリック領域の両方を考慮したアニメーション方法を検討してください。

  4. ライブプレビューでリンクやホバーアニメーションが正しく動作するか確認します。

  5. 公開中サイトの編集を行なっている場合には、編集が完了したら公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。


上記の方法を試しても問題が解決しない場合は、エディタ右下の[?]からサポートチームへお問い合わせください。

こちらの回答で解決しましたか?