テキスト付き画像

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. セクションのカスタマイズに関するShopifyドキュメント
3. Company XYZのImageブロックに関するドキュメント
4. Company XYZのRich textブロックに関するドキュメント
5. Company XYZのヘッダー設定に関するドキュメント
6. Company XYZのセクション余白設定に関するドキュメント
7. Company XYZのセクション背景設定に関するドキュメント
8. Company XYZの区切り線設定に関するドキュメント
9. Company XYZの表示設定に関するドキュメント
10. Company XYZのレイアウト幅設定に関するドキュメント
11. テーマエディターに関するShopifyドキュメント

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

Shopify Academy動画：ストアのカスタマイズ

このセクションを使用すると、画像と文章のコンテンツをすっきりとした分割レイアウトにまとめられます。ブロックの順序を変更してどちらの側を先に表示するかを切り替えた後、さまざまなコンテンツタイプや画面サイズに合わせて、配置、積み重ね、余白、カラー設定を調整できます。ストアのレイアウトにおけるこのセクションの位置付けについて詳しくは、セクションとブロックに関するShopifyドキュメントを参照してください。

基本設定

これらの設定では、個々のブロックをスタイル設定する前に、レイアウトとして両側がどのように動作するかを調整します。

1. コンテンツの配置では、画像とテキストを縦方向にどのように揃えるかを設定します。上揃えは通常、長い文章に適しており、中央揃えは短いプロモーションコンテンツに適しています。
2. スティッキーコンテンツを使用すると、デスクトップでスクロールしている間、短い側を表示し続けられます。一方の側が他方よりもかなり長い場合、たとえば1枚の画像の横に長いテキスト領域を配置する場合に特に便利です。
3. モバイルで積み重ねるを有効にすると、小さい画面でレイアウトが1列になります。横並びのコンテンツが窮屈に感じられる場合や、読み進める順序を明確にしたい場合に使用してください。
4. デスクトップで積み重ねるを有効にすると、大きな画面でも縦方向のレイアウトになります。よりエディトリアルな表現や、画像をテキストの明確な上または下に配置したい場合に適しています。

スティッキーコンテンツはデスクトップ専用で、積み重ねが有効な場合は適用されません。スティッキー効果を使用する場合は、デスクトップでセクションを横並びにしてください。

セクション固有の設定

カラー設定

これらのカラー上書き設定を使用すると、より広範なテーマカラーに完全に依存せず、このセクション独自のテキストスタイルを設定できます。画像、背景、またはコンテンツのトーンにより強いコントラストやブランド感のある表現が必要な場合に特に便利です。

1. アイコン、テキスト、サブ見出しの色をまとめて調整し、セクション全体の視覚的な統一感を保ちます。
2. 色を変更した後は、特にオーバーレイや背景画像も使用している場合、読みやすさを再確認してください。
3. ページ全体で上書き設定を必要な箇所にのみ使用し、単にスタイルが異なるからではなく、理由があってこのセクションが目立つようにします。

対応ブロックタイプ

1. Image
2. Rich text

このセクションでは最大4つのブロックをサポートしますが、通常は1つのビジュアルブロックと1つのテキストブロックによるシンプルな2分割レイアウトが最も効果的です。編集の基本については、セクションのカスタマイズに関するShopifyドキュメントを参照してください。

Imageブロック

Imageブロックはレイアウトのビジュアル側を提供し、画像の形状、サイズ、アスペクト比、キャプション、オーバーレイ、表示に関するコントロールを備えています。Company XYZのImageブロックに関するドキュメントを参照してください。

1. 画像の最大幅とアスペクト比を組み合わせて使用し、画像の存在感を調整します。
2. キャプションは、ラベル、補足説明、クレジットなど、有用なコンテキストを加える場合にのみ追加してください。
3. 画像を鮮明で詳細に見せる必要がある場合は、オーバーレイ設定を控えめに使用してください。

Rich textブロック

Rich textブロックはレイアウトの文章側を提供し、見出し、本文、アイコン、ボタン、オプションのブロックレベルの背景スタイルを含みます。Company XYZのRich textブロックに関するドキュメントを参照してください。

1. このブロックは、メインメッセージ、補足情報、明確な次のアクションに使用します。
2. ブロック背景を追加する場合は、画像と競合せず、画像を引き立てることを確認してください。
3. レイアウトが過度に煩雑にならないよう、ボタンのスタイルをアクションの重要度に合わせます。

標準セクション設定

ヘッダー設定

ヘッダー設定では、メインレイアウトの上にオプションの導入部分を追加できます。ブロックコンテンツが始まる前に、画像とテキストに共通の見出し、キャプション、アイコン、またはセクションレベルのアクションが必要な場合に使用してください。

余白設定

余白設定では、セクションの上下のスペースを調整します。大きめの余白は画像主体のレイアウトにゆとりを与え、関連するコンテンツブロックが続く中にこのセクションを配置する場合は、狭めの間隔が適しています。

セクション背景設定

セクション背景設定では、セクション全体の背後に色、グラデーション、画像、動画を追加できます。これらの設定で視覚的な雰囲気を強められますが、コントラストやレイアウトの開放感に影響することもあります。

注意

セクションにすでに強い画像がある場合、目立つ背景画像や動画によってレイアウトが混雑して見えることがあります。コンテンツが読み取りにくくなった場合は、背景または前景メディアのいずれかをシンプルにしてください。

区切り線設定

区切り線設定では、セクションの上部または下部に線を追加できます。このレイアウトを類似したコンテンツ領域の間に配置する場合に、境界を明確にするために使用してください。

表示設定

表示設定では、セクションをデスクトップ、モバイル、または両方に表示するかを設定します。1つのレイアウトをどこでも使用するのではなく、モバイル専用の表示を用意したい場合に特に便利です。

幅設定

幅設定では、内部コンテンツの幅と外側のセクション幅の両方を調整します。狭い幅ではテキストが読みやすくなり、広い設定では画像主体のレイアウトに没入感が生まれます。

エディターのプレビューでは、幅の変更がどの程度明確に表示されるかが制限される場合があります。そのため、大幅な幅の変更を確定する前に、ライブページで確認してください。編集インターフェースについて詳しくは、テーマエディターに関するShopifyドキュメントを参照してください。

使用上の注意

1. ブロックの順序から始めます。 ストーリーやプロモーションをどちらで先導するかに応じて、画像またはテキストを先に配置します。
2. 不均衡なレイアウトでスティッキーコンテンツを使用します。 デスクトップで一方の側が他方より明らかに短い場合に最も効果的です。
3. 視覚的な階層を明確に保ちます。 オーバーレイ、カスタムテキストカラー、背景を組み合わせる場合は、読みやすさを保つためにいずれか1つを控えめにします。
4. コンテンツに合わせてレイアウト幅を調整します。 テキスト中心のストーリーには狭い幅を、画像主体のセクションには広いレイアウトを使用します。
5. モバイルで積み重ねたレイアウトを確認します。 小さい画面でも、読み進める順序、画像の切り抜き、ボタンの配置が意図したとおりに見えることを確認してください。
6. 両方のビューポートサイズで確認します。 デスクトップとモバイルのコントロールでは、配置、表示、メディアの動作が異なる場合があるため、両方でセクションをテストしてください。
7. 追加ブロックをデザイン変更として扱います。 ブロックを追加するとセクションのバランスが大きく変わり、元のシンプルな分割レイアウトが主役に見えなくなることがあります。
8. 切り抜きを考慮してメディアを選択します。 デスクトップ用とモバイル用に別々のメディアを設定すると適合性が向上しますが、構図、読み込み、読みやすさも変わります。
9. フォームの状態を読みやすく保ちます。 顧客の入力に依存するコンテンツを使用する場合は、空の状態、エラー状態、成功状態が読みやすいことを確認してください。
10. スティッキーコンテンツを実際の状況で確認します。 近くのセクションと組み合わせ、各画面サイズで確認して、スクロール中に重要なコンテンツが隠れたり、混雑して見えたりしないようにします。