Wix エディタ:モバイルサイトでライトボックスを表示・カスタマイズする

読了時間:4分
デフォルトでは、デスクトップサイトにあるライトボックスはモバイルサイトで自動的に非表示になります。
ライトボックスをモバイルサイトで非表示にするか、モバイルエディタからカスタマイズして最適化し、モバイルで表示するかを選択できます。

この記事では、次の項目について説明します:


モバイルサイトにライトボックスを表示する

モバイルサイトのコンテンツとレイアウトによっては、モバイルサイトの訪問者にライトボックスを表示することができます。ライトボックスはページとして機能するため、ページパネルからモバイルで表示されるようにライトボックスを設定できます。
気が変わったら、いつでも簡単に非表示にすることができます。

モバイルサイトにライトボックスを表示する方法:

  1. モバイルエディタにアクセスします。
  2. モバイルエディタ左側で「ページ をクリックします。
  3. ライトボックス」クリックします。
  4. 該当するライトボックスをクリックします。
  5. 設定」アイコン  をクリックします。
    注意:このオプションは、デスクトップエディタのライトボックス設定にある「ライトボックスの自動表示」下で「オン」を選択した場合にのみ表示されます。
  6. ライトボックスの自動表示」下で「オン」をクリックします。

ライトボックスを編集する

モバイルサイトのライトボックスに含めるコンテンツを編集して、小さな画面でも見栄えが良くなるようにしましょう。デスクトップサイトよりもモバイルサイトのライトボックスに表示されるテキストを少なくしたり、サイト訪問者がライトボックス閉じる方法を変更したりできます。

モバイル用ライトボックスを編集する方法:

  1. モバイルエディタにアクセスします。
  2. モバイルエディタ左側で「ページ をクリックします。
  3. ライトボックス」クリックします。
  4. 該当するライトボックスをクリックします。
    • ライトボックス内のパーツ(テキストや画像など)をクリックして、カスタマイズしたり、アニメーション効果を追加したり、モバイルサイトから非表示にしたりできます。
    • ライトボックスの外をクリックし、オーバーレイにアクセスし、「設定」アイコン  をクリックし、モバイルサイトでオーバーレイを表示するか、非表示にするか選択します。
    • 「X」アイコン(ライトボックスに含める設定にしている場合)をクリックして、アニメーションを追加するか、モバイルサイトで非表示にします。
    • 「閉じる」ボタン(ライトボックスに含める設定にしている場合)をクリックして、テキストのサイズと配置を変更したり、アニメーションを追加したり、モバイルサイトで非表示にしたりします。
重要:
モバイルエディタでは、ライトボックスで使用できるデザインオプションが制限されています。例:
  • モバイルサイトではライトボックスのオーバーレイを編集することはできません。
  • デスクトップで色や画像のオーバーレイを追加すると、モバイルサイトに自動的に適用されます。ただし、動画オーバーレイを追加すると、モバイルサイトでは動画から静止画に変換されます。
  • 選択した背景はモバイルサイトに自動的に適用され、モバイルエディタで変更することはできません。
注意:
ライトボックスの待機時間はサイトが完全に読み込まれた時点で開始します。待機時間を 0 に設定している場合でも、サイト読み込み中に若干の遅延が発生することがあります。

ライトボックスを最適化・更新する

デスクトップエディタでライトボックスに変更を加えた場合、モバイルエディタに表示されないことがあります。
ライトボックスはページとして機能するため、ページレイアウト最適化ツールを使用してライトボックスを更新し、デスクトップで行った変更を表示することができます。
重要:
新エディタを使用してサイトを構築している場合、ページレイアウト最適化ツールにはアクセスできません。これは、Wix が新エディタで自動的にモバイルレイアウトを最適化するためです。

ライトボックスを更新する方法:

  1. モバイルエディタにアクセスします。
  2. モバイルエディタ左側で「ページ をクリックします。
  3. ライトボックス」クリックします。
  4. 該当するライトボックスを選択して開きます。
  5. モバイルエディタ左側で「ページレイアウト最適化 をクリックします。
  6. 最適化する」をクリックします。
注意:
レイアウト最適化ボタンをクリックすると、ライトボックスのみが更新され、モバイルサイト全体は更新されません。変更内容が気に入らない場合は、モバイルエディタのトップバーにある「元に戻す」アイコン  をクリックしてください。

お役に立ちましたか?

|