Row

注目のリンク

1. アコーディオンブロックに関するCompany XYZドキュメント
2. セクションとブロックに関するShopifyドキュメント
3. メタフィールドと動的ソースに関するShopifyドキュメント
4. 抜粋に関するCompany XYZドキュメント
5. アイコンに関するCompany XYZドキュメント
6. 動画の使用に関するCompany XYZドキュメント
7. 表示設定に関するCompany XYZドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

Rowブロックを使用して、アコーディオンに折りたたみ可能な項目を1つ追加します。FAQ、配送詳細、お手入れ方法、ポリシーの概要など、スペースを取りすぎずにいつでも確認できるようにしておきたいコンテンツに適しています。

ブロックにコンテンツを直接入力することも、既存のコンテンツから取得することもできます。機能の詳細については、アコーディオンブロックガイドを参照してください。テーマエディターでのブロックの仕組みについてShopifyの概要を確認するには、セクションとブロックに関するShopifyドキュメントを参照してください。

基本設定

主な設定では、行のコンテンツと動作を調整します。行を最初から開いた状態にするかどうか、カスタム見出しを追加するか、任意の見出しアイコンを含めるか、本文に手動のリッチテキストとリンクしたコンテンツのどちらを使用するかを設定できます。

ブログ記事とページの両方を割り当てた場合は、ページがブログ記事より優先されます。そのため、ブロックの他の部分を変更せずにすばやく置き換えたい場合は、ページ設定が適しています。

リンクしたコンテンツを使用する場合、本文全体ではなく短い概要を表示したいときは抜粋オプションが便利です。抜粋がすでに明確かつ一貫して記述されている場合に、特に効果的です。連携したコンテンツの設定方法については、メタフィールドと動的ソースに関するShopifyドキュメントを参照してください。抜粋の詳細については、抜粋を参照してください。

文言や書式を完全に管理したい場合は、ブロック独自のコンテンツフィールドを使用してください。すでに別の場所で管理しているコンテンツと行を同期させたい場合は、リンクしたコンテンツを使用してください。

ボタンとリンク

手動ボタンを追加することも、リンクしたコンテンツへのリンクを自動的に表示することもできます。行をプレビューとして使用する場合は自動リンクが便利ですが、手動ボタンを使うと移動先とコールトゥアクションをより細かく管理できます。

アクションの重要度に合ったボタンスタイルを選択してください。モバイルで幅いっぱいに表示されるボタンは、特に行に長いテキストやメディアが含まれる場合、タップしやすくなります。

見出しやボタンにアイコンを使用する場合は、シンプルで一貫性のあるものにしてください。アイコンの書式設定については、アイコンを参照してください。

画像設定

このグループでは、行に任意のビジュアルメディアを追加できます。ビジュアルでトピックを紹介するか、記述されたコンテンツの後で補足するかに応じて、テキストの上または下に画像を配置できます。

短い情報行には、通常、画像が最適です。デモンストレーションや動き、より強い視覚的説明が必要なコンテンツには、動画の方が効果的です。

動画オプション

ホスト型動画、または対応している動画サービスのURLを使用できます。ホスト型動画を使用する場合は、再生開始前の第一印象をより整えるために、ポスター画像を追加するとよいでしょう。

自動再生を使用すると行がより動的に感じられますが、音声なしでも内容が理解できる短い動画に適しています。ループは雰囲気を伝える動画やデモ動画に向いています。一方、訪問者が一時停止、再生、動画内の移動を行う可能性がある場合は、プレーヤーコントロールの使用が適しています。

注意

大きな動画やビットレートの高い動画を使用すると、アコーディオンのコンテンツが重くなり、読み込みも遅く感じられることがあります。行の大部分が情報提供を目的とする場合は、画像の方が適していることがよくあります。

動画の設定方法については、動画の使用を参照してください。

アスペクト比

アスペクト比設定を使うと、複数の行でメディアの見た目を統一できます。アコーディオンを整然と見せたい場合は共通の比率を使用し、統一感よりも元のメディアの形状を維持することが重要な場合はデフォルトの比率を使用してください。

モバイルのアスペクト比は、デスクトップ用の切り抜きが小さい画面に適切に反映されない場合に便利です。ポートレート形式のメディアや、端の近くに重要な詳細があるビジュアルで特に役立ちます。

標準ブロック設定

表示設定

表示設定では、このブロックをデスクトップ、モバイル、または両方に表示するかどうかを管理します。モバイルのアコーディオンをよりシンプルにしたい場合や、デバイスごとにコンテンツの強調を変えたい場合に便利です。

詳細については、表示設定を参照してください。

使用上の注意

1. 明確な見出しを書く。 各行の見出しは、訪問者が展開するかどうかを判断できる程度に具体的にしてください。
2. 主要なコンテンツ方法を1つ選ぶ。 再利用や一元的な更新にはリンクしたコンテンツを使用し、ブロック内で細かく管理するには手動のリッチテキストを使用してください。
3. 目的を持ってメディアを使用する。 アコーディオンを埋めるためだけでなく、行の説明に役立つ場合にのみ画像や動画を追加してください。
4. アクションを絞り込む。 ボタンを追加する場合は、その移動先が行のコンテンツを開くだけの場合よりも価値を提供することを確認してください。
5. 両方の表示領域を確認する。 デスクトップとモバイルを個別に確認し、それぞれの画面サイズで配置、表示、メディアの切り抜きが期待どおりに機能することを確認してください。
6. フォールバックのスタイルを確認する。 行を周囲のアコーディオンになじませたい場合は、空白またはデフォルトスタイルの値のままにしてください。ブロックをより独立して目立たせたい場合は、明示的なカラーやメディアを選択してください。