Wix プロギャラリー:モバイルでの問題のトラブルシューティング

読了時間:8分
モバイルで発生したプロギャラリーに関する一般的な問題のトラブルシューティング方法については、下記をご覧ください。
この記事では、以下の問題のトラブルシューティング方法について説明します:

サイトのモバイルビューで、ギャラリーが大きすぎたり小さすぎたりする場合があります。その際はモバイルエディタ内でハンドルをドラッグするか、エディタツールバーを利用してサイズを調整することができます。

ギャラリーのサイズを調整する方法:

  1. エディタ上部で「モバイルエディタに切り替え」アイコン をクリックします。
  2. プロギャラリーをクリックします。
  3. 右上で「ツール」をクリックします。
  4. ツールバー」横のチェックボックスを選択します。
  5. 該当する欄( W H )に希望の幅と高さを入力します。
「高」と「幅」がハイライトされたモバイルエディタのツールバー。

選択したカスタムレイアウトによっては、モバイルでギャラリー画像がクロップされることがあります。この現象は、レイアウトのサムネイルの向きがアップロードした画像の向きと異なる場合に発生することがあります。
たとえば、すべての画像を縦の向きで表示する「カラム」レイアウトを選択したが、画像は横の向きでアップロードされたとします。その場合サムネイルの枠内に収まるように、画像の一部が切り取られる場合があります。

画像が切り取られないようにする方法:

  1. エディタ上部で「モバイルエディタに切り替え」アイコン をクリックします。
  2. プロギャラリーをクリックします。
  3. 設定」をクリックします。
  4. レイアウト」タブをクリックします。
  5. サムネイルのサイズ変更」下で「フィット」をクリックします。
「フィット」オプションがハイライトされたモバイルの「レイアウト」タブのスクリーンショット。
画像をクロップしたままにする場合の追加オプション:
  • 画像の焦点を調整することで、クロップされる部分をより適切に制御することができます。
  • ギャラリーに適用されている画像の比率(16:9、4:3、1:1、3:4、9:16)を、アップロードした画像の比率と向きに合わせて調整します。
    A screenshot of the Layout tab on mobile highlighting the Image ration options.

プロギャラリーのタイトルと詳細のホバー効果は、モバイルビューには適用されません。このエフェクトを有効にした場合、モバイル機器からギャラリーを閲覧している訪問者は、テキストを表示するには一度タップし、画像全体またはリンクを開くにはもう一度タップする必要があります。

ギャラリーアイテムをシングルタップで開く方法:

  1. エディタ上部で「モバイルエディタに切り替え」アイコン  をクリックします。
  2. プロギャラリーをクリックします。
  3. 設定」をクリックします。
  4. デザイン」タブをクリックします。
  5. テキスト」をクリックします。
  6. 情報に 1 タップした際の動作」下で「変更なし」選択します。
  7. 公開」をクリックします。
「デザイン」タブの「テキスト」設定にある「変更なし」オプション。
シングルタップでアイテムまたはリンクが開くようにするその他の方法:
  • モバイルでギャラリーアイテムのタイトルと説明を非表示にします。PC 版のサイトには影響しません。
  • 画像の上下左右のいずれかにテキストを配置します。

カラーオーバーレイによって画像が完全に隠れてしまうことがあります。その色がページまたはセクションの背景と同じである場合、ギャラリーはページ上に空白のスペースとして表示されます。
画像が部分的に表示されている場合は、プロギャラリーの下に隙間や空白のスペースが表示されることがあります。これは、テキストまたは情報バーが大きすぎるために発生します。情報バーを画像に適切なサイズに縮小することで修正できます。

ギャラリー下の情報バーのサイズを小さくする方法:

  1. エディタ上部で「モバイルエディタに切り替え」アイコン  をクリックします。
  2. プロギャラリーをクリックします。
  3. 設定」をクリックします。
  4. レイアウト」タブをクリックします。
  5. レイアウトを編集」をクリックします。
  6. 情報バーのサイズを小さい値に設定するか、0 に設定して空のスペースを削除します。
設定パネルの「レイアウト」タブで、「情報バーのサイズ」オプション。

モバイル上でのギャラリーのテキストデザインが、PC 版のサイトのテキストと異なって見える場合があります。これは、モバイルテキストを PC とは別にモバイルエディタで設定する必要があるためです。

モバイルでテキストを編集する方法:

  1. エディタ上部で「モバイルエディタに切り替え」アイコン  をクリックします。
  2. プロギャラリーをクリックします。
  3. 設定」をクリックします。
  4. デザイン」タブをクリックします。
  5. テキスト」をクリックします。
  6. 利用可能なオプションを使用してテキストをカスタマイズします。
「デザイン」タブの「テキスト」で利用可能なカスタマイズオプション。

ギャラリーの上に個別のテキストやボタンなどのパーツを追加することはおすすめしません。ブラウザやデバイスによってパーツのレンダリングの程度が異なるため、パーツを重複して配置した場合、すべての訪問者に同じ画面が表示されない場合があります。

配置に関する問題を回避するために、プロギャラリーに事前設定済みのテキストカスタムボタン機能を使用することをおすすめします。
ライブモバイルサイトのカスタムボタン。

モバイルサイトでは、ギャラリーアイテムのタイトルや詳細が表示されない、または切れて表示されてしまう場合があります。これは、グリッド、スライダー、ストリップ、カラムレイアウトのギャラリーで、
ギャラリーのテキストボックスの高さが低すぎて、すべてのテキストを十分に表示できない場合に発生します。
この問題を解決する方法はいくつかありますが、選択した情報の位置(ギャラリーテキストの表示位置)によって方法が異なります。
「デザイン」タブで利用可能な「表示位置」オプションのスクリーンショット。

テキストを画像の下または上に配置する場合:

  • タイトル / 詳細のフォントサイズを小さくする、またはギャラリーのレイアウトを調整してギャラリー画像のサイズを拡大します。たとえば、グリッドレイアウトのギャラリーを使用している場合は、ギャラリーのサムネイルサイズを変更したり、行ごとの画像数を調整したりできます。
  • PC 版のエディタに移動し、テキストボックスの高さを広げます。この変更はモバイルサイトにも適用されます。
  • テキストの横方向および縦方向の余白設定により、モバイルでテキストが切れることがあります。これらの設定はデスクトップから引き継がれます。設定を調整するには、デスクトップエディタに移動し、デザインパネルの「テキスト」タブでテキストの余白設定を変更してください。
デスクトップエディタの「デザイン」タブにある「テキストボックスの高さを調整」のスクリーンショット。

テキストを画像に重ねて表示する場合:

タイトル / 詳細のフォントサイズを小さくする、またはギャラリーのレイアウトを調整してギャラリー画像のサイズを拡大します。たとえば、グリッドレイアウトのギャラリーを使用している場合は、ギャラリーのサムネイルサイズを変更したり、行ごとの画像数を調整したりできます。

モバイルでの動画の自動再生に問題がある

iPhone、Android、タブレットでは音楽や動画が自動的に再生されないことがあります。これは、サイト閲覧者にデータ使用料が加算されることを防ぐため、Apple や Chrome が自動再生機能をブロックしているために起こります。サイト閲覧者が再生ボタンを押さない限り、データは読み込まれることはなく、オーディオプレーヤーは再生されません。
訪問者が iOS デバイスで低電力モードを有効にしている場合、自動再生機能も無効になります。

1つのページに複数のギャラリーがある


ギャラリーは、一度に複数のメディアファイルを表示するように最適化されています。アイテム数の少ないギャラリーを複数配置するのではなく、ページごとに複数のメディアアイテムを含む 1つのギャラリーを配置することをおすすめします。
1つのページに複数の個々のパーツを配置すると(パーツが同一であっても)、サイトのパフォーマンスに影響を与える可能性があります。
ヒント:
単一の画像や動画を表示する場合は、「追加」パネルから画像または動画パーツを追加することをおすすめします。個別のギャラリーが必要な作品のポートフォリオを表示する場合は、Wix ポートフォリオまたは動的ページの使用をおすすめします。

まだサポートが必要な場合

モバイルのプロギャラリーで継続して問題が発生している場合、次の情報を含めてお問い合わせください:

お役に立ちましたか?

|