成功
ブログ投稿
カスタムスタイルと表示制御を備えた柔軟な投稿カードで、1件の記事を特集します。
このブロックを使用すると、画像、タイトル、抜粋、read moreリンク付きのカードとして、1つの記事を特集できます。グリッド、サイドバー、ランディングページ、編集レイアウトの中で1件の投稿を目立たせたい場合に適しています。
ブロックに表示する記事を選択します。ブロックは記事の既存コンテンツを使用するため、通常は、特徴的な画像と整った抜粋を持つ投稿で最もよい結果が得られます。
標準ブロック設定
Section titled “標準ブロック設定”これらの設定では、記事カードの見た目を制御し、このブロックの共有カードの既定値を上書きできます。カードスタイル、画像のアスペクト比、ボタンスタイル、表示するテキスト、テキストの配置、キャプションの詳細を、記事を表示するスペースに合わせて変更できます。
ブロックが密集したレイアウトにある場合は、よりシンプルなカードスタイルを使用し、記事をより目立たせたい場合は Banner を使用してください。タイトルのみのカードは狭いスペースに適しており、タイトルと抜粋があれば、読者はクリック前により多くの情報を得られます。共有カードの動作については、カード設定 でも説明されています。
デスクトップでの切り抜きは問題なくても、小さな画面では不自然になる場合があるため、モバイルの画像比率は別途確認する価値があります。これは、顔、テキスト、重要な端の詳細を含む特徴画像で特に重要です。
中央の縦方向のテキスト配置は、カードスタイルが Banner に設定されている場合にのみ適用されます。
キャプション設定では、表示する記事メタデータの量を決められます。著者名と日付は編集コンテンツに文脈を加えますが、カードを視覚的にコンパクトに保つ必要がある場合は非表示にするのが最適です。
これらの設定は、このブロックに対してのみ共有カードカラーを上書きします。特集記事により強いコントラスト、異なる強調レベル、または標準カードよりも調整された表示が必要な場合に使用してください。
Banner のオーバーレイカラーは、カードスタイルが Banner に設定されている場合にのみ適用されます。単色のオーバーレイやグラデーションは、情報量の多い画像上でもテキストの読みやすさを向上させることができ、透明度の設定で可読性と画像の見え方のバランスを調整できます。共有カラーの動作については、カード設定 でも説明されています。
表示コントロールを使って、このブロックをすべてのデバイスに表示するか、デスクトップまたはモバイルで非表示にします。これは、デバイスごとに異なる記事の配置、切り抜き、補助コンテンツを使いたい場合に便利です。詳細は 表示設定 を参照してください。関連するテーマエディターのガイダンスについては、セクションのカスタマイズに関するShopifyドキュメント を参照してください。
エディター設定
Section titled “エディター設定”エディター設定を使うと、複雑なレイアウトを整理しやすくなります。どの記事カードを更新しているかをすぐに識別できるよう、ブロックにわかりやすいエディタータイトルを付けてください。
使用上の注意
Section titled “使用上の注意”- 強い記事を選ぶ。 はっきりした特徴画像と役立つ抜粋を持つ投稿を選ぶと、最小限の調整でカードが完成した印象になります。
- スタイルを配置に合わせる。 特集向けの編集的な場面ではバナースタイルの表示を使い、補助コンテンツにはよりシンプルなカードスタイルを使います。
- モバイルの切り抜きを確認する。 セットアップ後にモバイルの画像比率を確認し、小さな画面で不自然な切り抜きにならないようにします。
- 読みやすさを保つ。 テキストが画像の上に表示される場合は、タイトルと抜粋が見やすくなるまでオーバーレイとテキストカラーを調整してください。
- 意図を持って表示を使う。 片方のデバイスでのみブロックを非表示にするのは、代替レイアウトのほうが読みやすい場合だけにしてください。
- 両方の状態をプレビューする。 テーマエディターでは、ライブコンテンツがまだない状態でもブロックを表示できるため、プレビューとストアフロントの両方で記事カードを確認し、最終的な見た目を確かめてください。
- 両方の表示領域を確認する。 デスクトップとモバイルのコントロールでは、配置、表示、メディアの動作が異なる場合があるため、公開前に両方の画面サイズでブロックを確認してください。
- フォールバックスタイルを使いたい場合は既定値を維持する。 ブロックに周囲のカードの見た目を継承させたい場合は、カラーとメディアの上書きを設定しないでください。記事により独立した見た目が必要な場合のみ、明示的な上書きを使用します。