成功
アコーディオン
長いコンテンツを整理して見やすく保つ、展開可能なFAQと詳細行を作成します。
このセクションを使って、FAQ、ポリシー、商品詳細、またはその他の長い回答を、重なって表示される展開可能な行にまとめます。Row ブロックで内容を手動で作成したり、ブログからエントリを取得したり、両方を組み合わせて、厳選コンテンツと自動更新コンテンツを混在させることもできます。
テーマエディターでのセクション動作のより広い概要については、セクションとブロックに関するShopifyドキュメント をご覧ください。
主なセクションコントロールは、アコーディオンがページ内でどのように配置されるかを決めます。コンテンツ位置は展開コンテンツ領域のレイアウトを変更し、sticky オプションでは、閲覧者が長いリストをスクロールしている間もセクションヘッダーやインターフェースを表示したままにできます。
左または右の配置は、導入コンテンツと並べてセクションに構造を持たせたい場合に最適です。アコーディオン自体が主役で、よりシンプルでゆとりのあるレイアウトが必要な場合は、全幅の方が適しています。
動的コンテンツ
Section titled “動的コンテンツ”このグループでは、ブログからアコーディオンに自動で内容を入れられます。動的コンテンツ設定に関するCompany XYZドキュメント をご覧ください。
テーマエディターでの一般的な設定については、セクションのカスタマイズに関するShopifyドキュメント をご覧ください。
コンテンツが時間とともに追加されるようにセクションを更新したい場合は、ブログを選択します。タグで結果を絞り込んだり、表示件数を制御したり、訪問者が最も閲覧しそうな方法に合わせてタイトルや公開日で一覧を並べ替えたりできます。
完全なエントリだと各行が長くなりすぎる場合は、Show excerpt を使います。アコーディオンをプレビューとして機能させ、次のステップとして完全な記事やページを表示したい場合は、Show link to content が役立ちます。
タグによるフィルタリングは、ブログが選択されている場合にのみ機能します。ブログが選択されていない場合、このセクションは手動で追加した Row ブロックに依存します。
これらのコントロールは、このセクションの既定のテキストカラーを上書きします。アコーディオンがカスタム背景の上にある場合や、周囲のページより強いコントラストが必要な場合に特に便利です。
アイコン、テキスト、サブ見出しの色をまとめて調整すると、セクション全体の一体感を保てます。背景画像、グラデーション、動画を使う場合は、公開前に読みやすさを必ず確認してください。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Row
Row ブロックは、1 つの折りたたみ可能なアコーディオン項目を作成します。カスタムリッチテキストを使ったり、ブログ投稿やページからコンテンツを取得したり、オプションでボタン、画像、動画を追加したりできます。詳しくは、アコーディオンに関するCompany XYZドキュメント をご覧ください。
ブログ投稿とページの両方が割り当てられている場合は、ページが優先されます。Show open by default は控えめに使い、セクションがコンパクトで見やすい状態を保ってください。
Show excerpt は、ソースコンテンツがアコーディオンパネルには長すぎる場合に適しています。オプションのボタンは、行でまず内容をプレビューし、その次により詳しいリソースへリンクしたい場合に適しています。
各 Row には、展開コンテンツをより便利で魅力的にするための画像または動画を含められます。これは、セットアップ手順、機能の説明、お手入れ方法、または視覚的な参考が役立つその他の回答に特に有効です。
上部に配置するとメディアの存在感が増し、下部に配置すると文章による回答が先になります。動画の場合、ポスター画像があると再生開始前に行の見た目がより洗練されます。
各 Row には個別の表示コントロールもあります。特定の回答やメディア表現をモバイルのみに表示する場合や、デスクトップのみに表示する場合に使用してください。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共通のヘッダーコントロールを使って、キャプション、見出し、サブ見出し、アイコン、オプションのボタンを含む導入を追加します。ヘッダー設定に関するCompany XYZドキュメント をご覧ください。
明確な見出しがあると、閲覧者は行を開く前に、このアコーディオンが何を扱うのかを理解しやすくなります。ボタンを追加する場合は、ヘルプページや関連リソースを開くなど、次の 1 つの論理的な操作に絞ってください。
共通の余白コントロールを使って、セクションの上下の間隔を調整します。セクションの余白設定に関するCompany XYZドキュメント をご覧ください。
小さめの余白は、アコーディオンを関連コンテンツに近づけて配置するのに役立ちます。大きめの余白は、セクション自体を独立した情報セクションとして目立たせたい場合に適しています。
セクション背景設定
Section titled “セクション背景設定”共通の背景コントロールを使って、セクションの背後に色、グラデーション、画像、動画を追加します。セクション背景設定に関するCompany XYZドキュメント をご覧ください。
背景処理によってアコーディオンの存在感を高められますが、読みやすさにも影響します。メディア背景を使う場合は、テキストのコントラスト、オーバーレイの強さ、行を展開したときのセクションの密度を確認してください。
区切り線設定
Section titled “区切り線設定”共通の区切り線コントロールを使って、セクションの上下に線を追加します。区切り線設定に関するCompany XYZドキュメント をご覧ください。
区切り線は、アコーディオンが他のコンテンツ中心のセクションの間にあり、さりげない視覚的な境界が必要なときに役立ちます。行構造だけで十分に区切られている場合は、シンプルに保ってください。
共通の表示コントロールを使って、セクション全体をデバイス別に表示または非表示にします。表示設定に関するCompany XYZドキュメント をご覧ください。
これは、モバイルとデスクトップで異なる情報レイアウトを使いたい場合に便利です。あるデバイスでセクションを非表示にする場合は、同じ内容が別の場所で引き続き利用できることを確認してください。
共通の幅コントロールを使って、セクションのラッパーとその内部のコンテンツ領域の両方を管理します。レイアウト幅の設定に関するCompany XYZドキュメント をご覧ください。
回答が長い場合は、狭めのコンテンツ幅の方が読みやすいことがよくあります。短いエントリや、より視覚的な内容を含む行では、広めの設定も有効です。ただし、公開中の storefront で結果をプレビューする価値はあります。
使用上の注意
Section titled “使用上の注意”- 明確なコンテンツソースを選ぶ。 頻繁に変わる FAQ にはブログベースのコンテンツを使い、常に使える回答や、より豊かなカスタムレイアウトには手動の Row ブロックを使います。
- 一覧で見やすい行タイトルを書く。 質問形式やトピックベースの明確な見出しは、閲覧者が複数の行を開かなくても適切な回答を見つけるのに役立ちます。
- 展開コンテンツは焦点を絞る。 ソースコンテンツが長すぎてアコーディオンが長く見えたり密になりすぎたりする場合は、抜粋、ボタン、リンクを使います。
- 既定で開く行は最小限にする。 最も重要な項目だけを既定で開き、セクションのコンパクトなアコーディオン動作を保ちます。
- モバイルでの読みやすさを確認する。 公開前に、小さい画面で sticky 動作、メディア、間隔、コントラストをまとめて確認します。
- 両方の表示サイズを比較する。 配置、表示、メディアのオプションを使う場合は、デスクトップとモバイルのレイアウトを別々に確認してください。アコーディオンは画面サイズごとに異なって表示されることがあるためです。
- 上書きは意図的に使う。 セクションに周囲のスタイルを継承させたい場合は、色やメディアを既定値または空のままにします。アコーディオンを周囲から切り離して見せたい場合のみ、明示的な色、グラデーション、個別のメディアを追加してください。