マウス オーバー効果を適用して、画像に訪問者の注意を惹き付けましょう。

ホバー効果とは、画像の上にカーソルを合わせると情報が表示されたり、動きを生み出したりするものです。これにより、サイトのタイトルやキャプションの表示にちょっとしたインタラクションとアニメーションが追加されます。画像を隠したりページ上の余分なスペースを占有したりするのを避けたい場合に最適な方法です。

どのサイトでも、画像ブロックとスライドショー ギャラリー ブロックで、ホバー効果を使用できます。サイトのバージョンとテンプレートによっては、サイトの他のエリアでもホバー効果がサポートされている場合があります。このガイドでは、各エリアの詳細について説明します。

ヒント: ほとんどのモバイル端末はホバー効果をサポートしていないため、サイトへのアクセスに使用する端末によっては訪問者のエクスペリエンスが異なる場合があります。

画像ブロック

創造エディター セクションに追加された画像ブロックは、ホバー効果や組み込みキャプションをサポートしていません。キャプションを作成するには、テキスト ブロックを使用して、画像ブロックに隣接またはオーバーレイするようにテキストを追加します。

インライン画像ブロックにカーソルを合わせると、画像のキャプションを表示できます。

1. 新しい画像ブロックを追加するか、既存の画像ブロックを開きます。
2. [デザイン] タブをクリックし、[インライン] を選択します。
3. [コンテンツ] タブをクリックし、[キャプション] ドロップダウン メニューから [ホバー時にキャプションをオーバーレイ] を選択します。
4. 画像ブロックにカーソルを合わせます。表示される黒いキャプション オーバーレイで、[ここにキャプションを入力...] をクリックして、キャプションを入力します。
5. ページを保存すると、カーソルを合わせたときにキャプションが表示されるようになります。その後、スタイル微調整オプションを使用して画像キャプションのスタイルを設定します。

スライドショー ギャラリー ブロック

スライドショー ギャラリー ブロックにカーソルを合わせると、画像のタイトルと説明を表示できます。

• ホバー効果は、スライドショー ギャラリー ブロックのデザインでのみ使用できます。
• タイトルと説明は、480ピクセル未満のモバイル端末では表示されません。
• カーソルを合わせたときに表示されるように設定されたキャプションは、タブレットなどの大型モバイル端末や、横長モードの小型モバイル端末でなければ表示されない場合があります。一部のモバイル端末では、キャプションは常に表示されるか、タップまたは長押しで表示されます。

テキストを追加してホバー効果を有効にするには、次の手順に従ってください。

1. 新しいスライドショー ギャラリー ブロックを追加するか、既存のスライドショー ギャラリー ブロックを開きます。
2. [コンテンツ] タブで、画像にカーソルを合わせ、をクリックします。
3. タイトルと説明を入力します。オプションでクリックスルーURLを追加することもできます。
4. [保存] をクリックします。
5. [デザイン] タブをクリックします。
6. [タイトルと説明を表示] にチェックを入れます。
7. [タイトルと説明の位置] ドロップダウン メニューから位置を選択します。
8. [ホバー時に表示] をクリックします。
9. [適用] をクリックします。

ポートフォリオ ページ

一部のポートフォリオ ページ レイアウトはホバー効果をサポートしています。ポートフォリオ ページ エディターから、以下のいずれかのレイアウトを選択します。

• ホバー: 背景 - プロジェクトのタイトルを縦並びレイアウトまたはインライン レイアウトで表示します。タイトルにカーソルを合わせると、セクションの背景がプロジェクトのアイキャッチ画像に置き換わります。
• ホバー: 固定 - プロジェクトのタイトルを縦並びレイアウトまたはインライン レイアウトで表示します。タイトルにカーソルを合わせると、プロジェクトのアイキャッチ画像がセクション内の固定位置に小さく表示されます。
• ホバー: カーソルに追従 - プロジェクトのタイトルを縦並びレイアウトまたはインライン レイアウトで表示します。タイトルにカーソルを合わせると、プロジェクトのアイキャッチ画像が小さく表示され、カーソルの移動に合わせて表示されます。

詳細については、「ポートフォリオ ページ」を参照してください。

ストア ページ

ホバー効果の動作はサイトのバージョンによって異なります。

ギャラリー ページ (バージョン7.0)

一部のテンプレートは、ギャラリー ページのホバー効果をサポートしています。サイト スタイルを使用して、これらの効果を有効にして調整できます。

画像のタイトルと説明は、以下のテンプレート ファミリーのスライドショーおよびグリッド デザインにカーソルを合わせると表示されます。

• Adirondack
• Aviator
• Bedford
• Brine
• Farro
• Five
• Galapagos
• Native
• Pacific
• Skye
• York

ホバー効果の有効化とカスタマイズ

ギャラリー ページでサイト スタイルを開き、[ギャラリー用スタイル] まで下にスクロールします。[ギャラリー デザイン:] をクリックし、[スライドショー] または [グリッド] を選択します。

• スライドショー - [ギャラリー情報オーバーレイ] ドロップダウン メニューから [ホバー時に表示] を選択します。これで、カーソルを合わせるとタイトルと説明が表示されるようになります。カーソルを合わせたときに表示されるように設定されたキャプションは、タブレットなどの大型モバイル端末や、横長モードの小型モバイル端末でなければ表示されない場合があります。一部のモバイル端末では、キャプションは常に表示されるか、タップまたは長押しで表示されます。
• グリッド - 画像にクリックスルーURLがない限り、ライトボックスで画像を開いた場合に、カーソルを合わせるとタイトルと説明が表示されます。詳細については、「ライトボックスで開く画像の設定」を参照してください。

テンプレートごとの他のギャラリー ページの効果

ギャラリー ページでは、以下のテンプレート ファミリーに特別なホバー効果があります。

• Forte - ギャラリー ページのカルーセルにカーソルを合わせると、ナビゲーション矢印が表示されます。キャプションにカーソルを合わせると、キャプションが上にスライドし、長い説明を読むことができます。
• Momentum - フルスクリーン時にカーソルを合わせると矢印ナビゲーションが表示されます。
• Tremont - カーソルを合わせるとキャプションが表示されます。
• Wexley - ギャラリー ページで画像にカーソルを合わせると、画像タイトルとカラー オーバーレイが表示されます。

インデックス ページ (バージョン7.0)

インデックス ページでは、以下のテンプレート ファミリーに特別なホバー効果があります。

• Avenue - サムネイルにカーソルを合わせると、不透過度が変わります。また、ホバー時にページのナビゲーション タイトルを表示させることもできます。
• Flatiron - サムネイルにカーソルを合わせると、画像がズームしたりパンしたりします。
• Montauk - サムネイルにカーソルを合わせると、不透過度が変わります。
• Tremont - インデックス ナビゲーションでページ タイトルにカーソルを合わせると、そのページのアイキャッチ画像が背景画像として表示されます。
• York - サムネイルにカーソルを合わせると、画像がフェードし、タイトルが表示されます。

詳細については、それぞれのテンプレート ガイドを参照してください。