成功
表示設定
デバイスごとにセクションを非表示または表示して、デスクトップとモバイルのレイアウトをすっきりさせます。
これらの設定を使って、セクションをデスクトップ、モバイル、またはその両方に表示するかを決めます。特に、よりシンプルなモバイルレイアウト、デスクトップ向けの表示、または同じコンテンツの画面サイズ別の個別バージョンを用意したい場合に便利です。テーマエディターでのセクションの仕組みについては、セクションとブロックに関するShopifyドキュメントを参照してください。
表示コントロールを使うと、セクションをすべての場所で表示したままにするか、デスクトップまたはモバイルで非表示にできます。これにより、テーマの設定からコンテンツを削除せずに、デバイスごとにページレイアウトを調整する実用的な方法が得られます。
よくある使い方は、同じコンテンツのデスクトップ版とモバイル版を別々に作成することです。たとえば、画面の大きい端末ではより詳しいレイアウトを使い、小さい画面ではより短く、見やすいバージョンを使うといった方法があります。この設定コンセプトの参考情報は、表示設定に関するCompany XYZドキュメントで確認できます。
あるデバイスでセクションを非表示にしても、自動的に2つ目のバージョンが作成されるわけではありません。デスクトップとモバイルで異なるコンテンツを表示したい場合は、個別のバージョンを追加し、それぞれを必要な場所にだけ表示するよう設定してください。
この設定は、次のような場合に特に役立ちます。
- 小さい画面での視覚的な混雑を減らす。
- モバイル専用のプロモーションまたは情報レイアウトを表示する。
- デスクトップの訪問者向けに、より複雑な構成を維持する。
- デバイスの種類ごとに異なるコンテンツ表示をテストする。
使用上の注意
Section titled “使用上の注意”- 代替バージョンは慎重に組み合わせます。 デスクトップ版とモバイル版を別々に作成する場合は、体験が一貫するようにメッセージと目的をそろえてください。セクションベースのレイアウトの作業でヘルプが必要な場合は、セクションのカスタマイズに関するShopifyドキュメントを確認してください。
- 重要なコンテンツは保護します。 あるデバイスでセクションを非表示にする場合でも、その訪問者にとって重要なメッセージやアクションが別の場所に表示されていることを確認してください。
- 小さい画面ではシンプルにします。 より短く、またはよりすっきりしたレイアウトが、顧客が内容を見て行動しやすくする場合は、モバイル専用の表示を使ってください。
- 両方のデバイス表示を確認します。 デスクトップとモバイルのコントロールは、レイアウト、配置、表示、メディアの動作にそれぞれ異なる影響を与えることがあるため、変更後は両方の表示をプレビューしてください。テーマエディタ機能の概要に関するShopifyドキュメントを参照すると、プレビューと編集のオプションを把握しやすくなります。
- フォールバックスタイリングを念頭に置きます。 設定を空欄のままにするかデフォルトのままにすると、通常はテーマのフォールバックスタイリングが維持されます。一方、明示的な色、グラデーション、またはメディアの上書きを選ぶと、その領域はより独立して動作します。
- 両方のデバイスでメディアの選択を確認します。 デスクトップ用とモバイル用で別々のメディアを設定する場合は、切り抜き、読み込み、フォールバック、読みやすさを確認し、各画面サイズでセクションが適切に表示されるようにしてください。