コンテンツにスキップ

記事カード設定

テーマ全体の記事カードに表示される既定のデザインとコンテンツを管理します。

これらの設定は、テーマ全体の記事カードの既定の外観を定義します。ブログ一覧、特集記事エリア、その他の記事が表示される場所で、一貫した閲覧体験と回遊体験を作成するために使用できます。同時に、必要に応じて個々のセクションで既定値を上書きできます。より広い設定の背景については、テーマエディターに関するShopifyドキュメントセクションとブロックに関するShopifyドキュメント を参照してください。

追加の背景情報については、記事カード設定 も確認できます。

カードレイアウトと画像の形状

Section titled “カードレイアウトと画像の形状”

まずカードスタイルを選びます。これによって記事プレビュー全体の構成と印象が決まるためです。よりビジュアルなスタイルは編集コンテンツをより豊かに見せることができ、よりシンプルなスタイルは密度の高い記事グリッドをすっきり見やすくするのに役立ちます。

画像のアスペクト比は、各カード内で記事画像がどのように切り抜かれるかを制御します。デスクトップとモバイルの比率は別々に設定されるため、大きな画面ではカードのバランスを保ちながら、小さなデバイスでの不自然な切り抜きを避けられます。

記事画像の形状や構図に大きなばらつきがある場合は、切り抜かれても意図が伝わる画像比率を選んでください。一般に、一貫した比率のほうが、より整ったカードグリッドになります。

テキスト、メタデータ、行動喚起

Section titled “テキスト、メタデータ、行動喚起”

これらの設定は、カードに表示される記事情報の量を制御します。タイトルと抜粋の両方で見つけやすさを強調したり、タイトルのみで簡潔にしたり、レイアウトをよりビジュアルにしたい場合はさらにテキストを減らしたりできます。

キャプション設定では、著者、日付、両方、またはどちらも表示しない、を選べます。これは、コンテンツ戦略において最新性や著者情報が重要かどうかに応じて、編集上の文脈と視覚的なシンプルさのバランスを取るのに役立ちます。

ボタンスタイルは、カードがどの程度強く操作を示すかを変更します。より目立つボタンスタイルはコンテンツ量の多いレイアウトで役立ち、軽めのスタイルはカード自体がすでにクリック可能であることを明確に示している場合に適しています。

水平配置は、カードのフォーマルさやデザイン性の印象に影響します。記事グリッドでは左揃えのテキストが通常もっとも見やすく、中央揃えはよりスタイリッシュなレイアウトに適しています。

垂直方向のテキスト配置は、バナーカードスタイルで特に重要です。ここではテキストの配置によって、画像の視認性とオーバーレイコンテンツのバランスが変わります。カードをより画像中心にするか、よりテキスト中心にするかを決めるために使用してください。

タグバッジを使うと、カードの角にバッジを表示して、特定のタグが付いた記事を強調できます。特集記事、お知らせ、ガイド、季節の記事などをカード全体のレイアウトを変更せずに目立たせたい場合に便利です。

タグはカンマ区切りのリストで入力し、タグ名は一貫して使用してください。バッジは選択的に使うと最も効果的で、意味を保ちながら記事一覧を煩雑にしません。

  1. まず構成を決めます。 テキストと画像の設定を細かく調整する前にカードスタイルを設定してください。レイアウトが、他のすべての選択の見え方に影響するためです。
  2. モバイルは別途確認します。 実際の記事カードで、モバイルの画像比率やデスクトップ・モバイル固有のコントロールを確認し、切り抜き、余白、表示が両方のサイズで適切に機能するかを見てください。
  3. 詳細は閲覧意図に合わせます。 発見を重視する記事一覧ではテキストを多めに表示し、よりタイトなレイアウトやビジュアル重視のレイアウトではテキストを減らします。
  4. 既定値は柔軟に保ちます。 空、透明、または既定スタイルの値は通常フォールバックのスタイルを維持し、明示的な色、グラデーション、またはメディアの上書きはカードをより独立した見た目にします。
  5. バッジは控えめに使います。 重要なタグを少数だけ強調して、バッジの効果が目立つようにしてください。
  6. コンテンツソースの制限を想定します。 記事カードは選択されたコンテンツから利用可能なものしか表示できないため、タグ、記事データ、ページネーション、関連結果によって、グリッドに表示される内容が変わる場合があります。