Wix エディタ:モバイルサイトにボックスを追加・カスタマイズする
読了時間:4分
ボックスは、モバイルサイトのコンテンツを枠で囲み、整理し、構造化するのに役立ちます。デスクトップエディタから引き継いだボックスを改良したり、モバイルエディタから追加したボックスをカスタマイズしたりできます。
モバイルエディタからボックスを追加した場合、枠線、影、色、間隔などを自由にカスタマイズできます。デスクトップサイトから引き継いだボックスを編集する場合は、アニメーションを編集するか、ボックスを非常時にすることしかできません。
ボックスのカスタマイズについては下記をご確認ください:
モバイルパーツとデスクトップパーツの見分け方:
モバイル専用パーツには、クリックするとモバイルアイコン
が表示されます。


デスクトップ版から引き継がれたボックス
デスクトップサイトにボックスを追加すると、モバイルサイトにも自動的にボックスが追加されます。アニメーションの追加やボックスの非表示も可能です。
注意:
ホバーアクションはモバイルではご利用いただけません。
デスクトップから引き継がれたボックスをカスタマイズする方法:
- モバイルエディタでボックスをクリックします。
- ボックスのカスタマイズ方法を選択します:
- アニメーションを追加する:
- 「アニメーション」アイコン
をクリックします。
- ボックスに適用するアニメーションを選択します。
- (オプション)「カスタマイズ」をクリックして、アニメーションの詳細設定を調整します。
- 「アニメーション」アイコン
- ボックスを非表示にする:
- 「非表示にする」アイコン
をクリックして、モバイルサイトから非表示にします。
- 「非表示にする」アイコン
- アニメーションを追加する:

ヒント:
パーツの非表示を解除するには、モバイルエディタ左側で「モバイル上で非表示」アイコン
をクリックします。その後、該当するパーツ横にある「表示」をクリックすると、モバイルサイトに表示されます。

モバイルエディタから追加されたボックス
モバイルサイトに直接コンテナボックスを追加できます。あらかじめ用意されたデザインの中から好きなものを選び、色、枠線、角、影、間隔などをカスタマイズすることができます。
モバイル専用ボックスを追加・カスタマイズする方法:
- 左側で「モバイルに追加」アイコン
をクリックします。
- 「ボックス」をクリックします。
- サイトに追加するボックスをクリックします。
- 「デザインを変更」アイコン
をクリックします。
- 「デザインをカスタマイズ」をクリックして、ボックスを編集します。
こちらをクリックして手順を確認しましょう
