Wix エディタ:ギャラリー画像にテキストを追加してカスタマイズする

読了時間:6分
ギャラリー画像にテキストを追加することで、訪問者や検索エンジンに詳細な情報を提供することができます。タイトル、詳細、リンクを追加し、ギャラリーのデザインに合わせて外観と配置をカスタマイズすることが可能です。
この記事では、下記の項目について説明します:

ギャラリー画像には、タイトル、詳細、リンクの 3種類のテキストを追加することができます。タイトルは画像の代替テキストとしても使用され、タイトルと詳細はともにスクリーンリーダーと検索エンジンで読み取ることができます。
また、画像にリンクを追加したり、訪問者がクリックした際にリンク先が開くように設定することも可能です。ギャラリーのテキストについての詳細はこちら

ギャラリー画像にテキストを追加する方法:

  1. エディタでギャラリーをクリックします。
  2. 画像を変更」をクリックします。
  3. テキストを追加したい画像をクリックします。
  4. 画像のタイトル、詳細、リンクを該当する項目に入力します。
  5. 完了」をクリックします。

ギャラリー画像のレイアウトに「メーソンリー」または「アニメーション」を使用している場合は、表示させるテキストを選択することができます。タイトルや詳細を表示させて訪問者に説明を加えたり、テキストを非表示にしてよりクリーンでミニマルな外観にすることが可能です。
注意:
ギャラリーのテキストを有効にすると、通常時とホバー時の両方に表示されます。

ギャラリーに表示させるテキストを選択する方法:

  1. ギャラリーをクリックします。
  2. 設定」アイコン をクリックします。
  3. テキスト」下で表示させたいテキストを選択します:
    • タイトルと詳細を表示:ギャラリーに画像のタイトルと詳細を表示させます。
    • タイトルのみ表示:ギャラリーに画像のタイトルのみ表示させます。
    • 詳細のみ表示:ギャラリーに画像の詳細のみ表示させます。
    • 表示しない:ギャラリーにテキストは表示されません。
メーソンリーギャラリーのレイアウトパネル。タイトルのみ表示させるオプションが選択されています。
備考:
  • デザインパネルからサイズを調整して、追加のギャラリーでテキストを有効にすることもできます。ギャラリーの種類によっては、通常時とホバー時の両方、もしくはホバー時のみテキストが表示されます。ギャラリーのテキストについての詳細はこちら
  • タイトルと詳細を非表示にした場合でも、スクリーンリーダーと検索エンジンはそれらの文字を読み取ることができます。訪問者が画像をクリックした際にポップアップで開くように設定すると、テキストもそのビュー内に表示されます。

テキストのデザインをカスタマイズする

テキストを設定して表示させる項目を選択したら、ギャラリーとページの見た目に合わせてデザインをカスタマイズしてみましょう。選択したギャラリーの種類に応じ、フォントや色などの設定を調整することができます。

テキストのデザインをカスタマイズする方法:

  1. エディタでギャラリーをクリックします。
  2. デザインを変更」アイコン をクリックします。
  3. デザインをカスタマイズ」をクリックします。
  4. テキスト」タブを選択します。
  5. テキストの見た目を調整する方法を選択します:
    • タイトルの色:テキストの色を選択し、視認性を調整します。
    • スタイル:テキストのフォント、サイズ、書式をまとめて変更します。
    • フォント:テキストのフォントを選択します。
    • 文字サイズ:テキストのサイズを調整します。
    • 書式設定:太字や斜体などの書式をテキストに追加します。
    • テキストボックスの不透明度・色:テキストボックスの不透明度と色を選択し、視認性を調整します。
グリッドギャラリーのデザインパネル。フォントのドロップダウンボタンにマウスオーバーしています。
注意:
表示されるオプションは、選択したギャラリーの種類により異なります。

テキストの配置を設定する

ギャラリー画像のテキスト配置を選択して、ライブサイト上での位置を設定します。「メーソンリー」、「アニメーション」、および特定のグリッドギャラリー(「ポラロイド」など)のテキスト配置を設定することができます。

テキストの配置を変更する方法:

  1. エディタでギャラリーをクリックします。
  2. レイアウト」アイコン をクリックします。
  3. テキスト配置」下で配置を選択します:
    • :画像の左側にテキストを配置します。
    • 中央:画像の中央にテキストを配置します。
    • :画像の右側にテキストを配置します。
メーソンリーギャラリーのレイアウトパネル。テキストを中央に配置するオプションが選択されています。

「もっと見る」ボタンのテキストをカスタマイズする

エディタでグリッドギャラリーに多くの画像を追加すると、一部の画像が非表示になり、「もっと見る」ボタンが表示されます。ギャラリーのニーズに合わせてボタンのテキストを変更し、訪問者に続きのコンテンツを閲覧してもらえるようにしましょう。

ボタンのテキストを変更する方法:

  1. エディタでギャラリーをクリックします。
  2. 設定」アイコン をクリックします。
  3. ボタンのテキスト」下にテキストを入力します。
グリッドギャラリーの設定パネル。「ボタンのテキスト」下の、テキスト入力欄にマウスオーバーしています。
ボタンのテキストを変更したら、ページ、ギャラリー、スタイルに合わせて外観をカスタマイズします。テキストのフォント、サイズ、色を変更して好みの見た目にしたり、ギャラリーのスタイルをさらにカスタマイズすることができます。

ボタンのデザインをカスタマイズする方法:

  1. ギャラリーをクリックします。
  2. デザインを変更」アイコン をクリックします。
  3. デザインをカスタマイズ」をクリックします。
  4. テキスト」をクリックします。
  5. 画像の詳細」セクションまでスクロールダウンします。
  6. フォントと文字サイズを変更します:
    • フォント」下のドロップダウンメニューをクリックして、新しいフォントを選択します。
    • 文字サイズ」下のスライダーをドラッグして、フォントサイズを調整します。
      注意:これらの変更により、詳細テキストのフォントとフォントサイズも変更されます。
  7. その他」のセクションまでスクロールダウンします。
  8. もっと見る」ボタン横のカラーボックスをクリックして、新しい色を選択します。
グリッドギャラリーのデザインパネル。「テキスト」タブがハイライトされ、カラーボックスにマウスオーバーしています。

お役に立ちましたか?

|