ホバー画像リンク

リファレンス すべてのプラン 4 分で読めます

大きな画像の横にリンクのリストを配置し、カーソルを合わせると、そのリンクの画像に切り替わります。画像グリッド全体ほどのスペースを使わずに、カテゴリー（「新着」「売れ筋」「セール」）をビジュアルでプレビューできます。

ブロックを追加する

1. レイアウトを選ぶ

   プレビューのメガメニューパネルで ブロックを追加 をクリックします。リンクリスト をクリックし、Hover image links（ホバー画像リンク） にカーソルを合わせて 選択 をクリックします。最初は、見出し「Collections」と3つのサンプルリンクが入っています。

   

   (1) リンクリスト をクリック、(2) Hover image links を選ぶ。

2. 見出しとデフォルト画像を設定する

   項目を編集 の 一般 で、見出し を入力し、Default image（デフォルト画像） を選び、Button label on image（画像上のボタンラベル） を入力します。

   

   プレビューの ホバー画像リンク ブロックと、項目を編集に表示される設定。

3. 各リンクを設定する

   タイトル を入力し、リンク を選び、Image on hover（ホバー時の画像） を選びます。追加 をクリックしてリンクを追加、削除 をクリックして削除します。

4. 保存して公開する

   Style（スタイル） で画像を調整し、保存 と 公開 をクリックします。

設定

一般

見出しデフォルト: Collections

リンクの上に表示するテキスト。

Default imageデフォルト: なし

独自の Image on hover がないリンクに表示されます。

Button label on imageデフォルト: Shop now

画像上のリンクタイトルの下に表示されるテキスト。空にするとタイトルのみ表示されます。

幅デフォルト: 66.66%

ブロックがメガメニューの行のどのくらいを占めるか。自動 または 8.33% から 100%。

スタイル

Image position（画像の位置）デフォルト: 右

リンクの 右 または 左。

画像比率デフォルト: 4:3

1:1、4:3、3:4、16:9、9:16。

各リンク

タイトルデフォルト: New arrivals, Best sellers, Sale

リンクのテキスト。

リンクデフォルト: なし

リンクの移動先。

Image on hoverデフォルト: なし

買い物客がこのリンクにカーソルを合わせている間に表示される画像。

1ブロックにつき最大10個のリンクまで追加できます。各リンクは、ブロックの下の 要素 リストにも Add link（リンクを追加） ボタンとともに表示されます。ドラッグして並べ替えたり、（リストまたはプレビューで）クリックしてそのリンクだけを編集したりできます。リンクごとの 表示設定 も設定できます。ブロック全体の 表示設定 は、他のブロックと同じです。すべてのブロック共通の設定をご覧ください。

ヒント

• 同じ形の画像を使い、画像比率 もそれに合わせると、リンクを切り替えても画像エリアが動きません。
• リンクのタイトルは短くしましょう。タイトルは画像にも表示されます。

関連ページ

• リンクリストアイコン、画像、バッジを任意で付けられる、定番のメガメニューブロックであるリンクの列を追加します。
• 画像タイトル、説明、リンク付きのバナーやプロモーション画像を表示します。
• ブロックの概要リンク、画像、商品、カウントダウンなどのブロックを、メガメニューまたはタブに追加します。

このページは役に立ちましたか？

問題を報告