アコーディオン動的コンテンツ設定

注目のリンク

1. テーマエディターに関するShopifyドキュメント
2. セクションとブロックに関するShopifyドキュメント

役立つ動画

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

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

この設定グループでは、各アイテムを手動で管理する代わりに、ブログコンテンツでアコーディオンを自動的に埋められます。どの投稿を表示するか、いくつ表示するか、各アイテムを簡易プレビューとして表示するか、より詳細なコンテンツパネルとして表示するかを制御できます。設定の詳細は、テーマエディターに関するShopifyドキュメントをご覧ください。

動的コンテンツ

アコーディオンをブログに接続すると、アイテムがその投稿から生成されます。これは、FAQ、ガイド、更新情報、または新しい投稿が追加されたときに最新の状態を保ちたいその他の定期的なコンテンツに便利です。テーマコンテンツの構成全体については、セクションとブロックに関するShopifyドキュメントをご覧ください。

ブログに複数のトピックが含まれる場合は、タグフィルターを使って結果を1つのテーマに絞り込んでください。そうすると、アコーディオンの焦点を保ち、関係のないコンテンツが同じリストに混ざるのを防げます。

タグフィルターは、ブログが選択されている場合にのみ機能します。ブログが選択されていない場合、フィルターはコンテンツを返しません。

アイテム数の設定は、条件に一致する投稿をいくつ表示するかを制御します。値を 0 にすると、最大 50 までの一致項目をすべて表示しますが、アコーディオンでは短いリストのほうが通常は見やすくなります。

コンテンツ表示

各生成アイテムについて、全文の代わりに抜粋を表示できます。これにより、特に同じページで複数のアイテムを展開する場合、アコーディオンをすっきり見せやすくなります。

抜粋は、元のコンテンツが短い要約を前提に書かれている場合に最適です。抜粋の品質にばらつきがあると、アイテムの長さに一貫性がなく感じられることがあります。

ヒント

アコーディオンを使って訪問者がトピックをすばやく比較できるようにする場合は、抜粋を使用してください。各アイテムにすぐ詳細が必要な場合のみ、より詳細なコンテンツを表示します。

完全なコンテンツへのリンク

各生成アイテムに、元の投稿へのリンクを追加できます。アコーディオンで専用の記事ページを置き換えるのではなく、コンテンツの概要を紹介したい場合に適しています。

抜粋を有効にしている場合は特に、訪問者が読み続けるための次のステップが明確になるため、リンクが役立ちます。

使用上の注意

1. 焦点の合ったソースを選びます。 アコーディオンが混在ではなく、厳選されたものに感じられるよう、1つの明確な目的に合うブログを選択します。
2. タグを使って広いコンテンツを絞り込みます。 1つのブログに複数のカテゴリが含まれ、アコーディオンでそのうち1つだけを表示したい場合は、タグを追加します。
3. リストは慎重に絞ります。 少ないアイテム数から始めてアコーディオンを見やすくし、より長いリストに明確な価値がある場合のみ増やします。
4. コンパクトなレイアウトでは抜粋を使います。 スペースが限られている場合や、その場で読むよりざっと見る訪問者が多い場合は、抜粋をオンにします。
5. アイテムがプレビューならリンクを表示します。 アコーディオンが重要な内容をすべて含めるのではなく、投稿の要約を目的とする場合は、完全なコンテンツへのリンクを有効にします。
6. 両方の表示領域を確認します。 デスクトップとモバイルの設定によって配置、表示、メディアの動作が変わるため、公開前に両方の画面サイズでアコーディオンを確認してください。
7. メディアの読みやすさを保ちます。 デスクトップ用とモバイル用で異なるメディアを使用する場合は、切り抜きとフォールバックの動作を比較し、テキストと画像が引き続き適切に組み合わさることを確認してください。
8. スティッキー動作を文脈の中で確認します。 スクロール中もアコーディオンが表示されたままになる場合は、周囲のレイアウトに合っているか、小さい画面で近くのコンテンツを圧迫していないかを確認してください。