成功
ブログコンテンツ
柔軟なグリッド、フィルター、並べ替え、カードレイアウトのコントロールで、ブログアーカイブを見やすくします。
投稿を、並べ替え、フィルタリング、カード表示のオプションを備えた設定可能なアーカイブレイアウトで表示します。読者が多数の投稿をすばやく確認し、読みたい内容を絞り込む必要があるブログのランディングページで最適です。
グリッドインターフェース設定
Section titled “グリッドインターフェース設定”これらの設定は、投稿グリッドの全体的な閲覧体験を制御します。デスクトップとモバイルでの既定の列数を定義し、1ページに表示する投稿数を選び、読者がグリッドサイズを自分で調整できるかどうかを決められます。
投稿画像が発見性に重要な場合は、より余白のあるグリッドを使用します。ブログがテキスト中心の場合や、読者がより多くのタイトルを一度に見たい場合は、より密なグリッドを使用します。
Sticky のインターフェースでは、読者がスクロールしている間もアーカイブのコントロールが表示されたままになります。これは長いブログインデックスには便利ですが、小規模なアーカイブではコントロールを一度使うだけなので不要に感じられることがあります。
並べ替えは、読者がコンテンツにどのように触れるかを形作ります。通常、日付ベースの並べ替えはアクティブなブログに適しており、タイトルでの並べ替えは、リファレンス系、常設、またはアルファベット順のコンテンツにより適しています。アーカイブセクションの管理方法の全体像については、セクションのカスタマイズに関するShopifyドキュメントを参照してください。
フィルター設定
Section titled “フィルター設定”これらの設定は、ブログアーカイブにタグベースのフィルタリングを追加します。投稿にすでに明確なタグ構造があり、ページを離れずに読者が結果を絞り込みたい場合に特に有効です。
メインのフィルタ切り替えではセクションのフィルタリングをオンにし、既定で開く設定ではフィルター領域を最初から展開するかどうかを制御します。フィルターを開いたままにすると発見性を高められますが、最初は折りたたんだ状態のほうがページをすっきり保てることがよくあります。
フィルターは、一貫性があり意図のあるタグと組み合わせると最も効果的です。タグ付けが不完全または不一致だと、フィルター体験は役立つどころか、かえって分かりにくく感じられることがあります。
カードカラー設定
Section titled “カードカラー設定”これらの設定は、このセクションの通常のカードカラー処理を上書きします。ブログアーカイブに独自のビジュアルスタイルが必要な場合や、選択したカードレイアウトでより強いコントラストが必要な場合に使用します。
バナーのオーバーレイ設定は、Banner カードスタイルを使用している場合にのみ適用されます。バナーカードを使用していない場合は、一般的なカード背景、枠線、見出し、テキストの色に注目してください。
オーバーレイの不透明度は、画像中心のカードで特に重要です。オーバーレイが薄すぎるとタイトルが読みにくくなり、濃すぎるとカードが重く、くすんで見えることがあります。
これらの設定は、セクションレベルのアイコン、見出し、補助テキストの色を制御します。このブログアーカイブがカスタム背景上にある場合や、周囲のセクションと差別化したい場合に役立ちます。
これらの色は1つずつではなくまとめて調整すると、ヘッダーの一貫性を保ちやすくなります。背景画像、グラデーション、動画も使用する場合は、デスクトップとモバイルの両方でコントラストを再確認してください。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- フィルターグループ
フィルターグループ
Section titled “フィルターグループ”Filter group ブロックを使用すると、アーカイブ内にカスタムのタグベースフィルターモジュールを作成できます。各ブロックはそれぞれ独立した展開可能なグループになり、1つの長いリストを表示する代わりに、フィルターをより明確なカテゴリに整理できます。一般的なエディターの動作については、セクションとブロックに関するShopifyドキュメントを参照してください。
- 読者がそのグループの内容をすぐに理解できるよう、短く平易なタイトルを追加します。
- とくに複数のグループを積み重ねる場合は、タグ一覧を絞り込み、意図を明確に保ちます。
- ブロックの既定で開くオプションは選択的に使用し、フィルター領域が窮屈に見えないようにします。
ブロック固有の詳細については、フィルターグループを参照してください。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定を使うと、任意のアイコン、キャプション、見出し、補助テキスト、ボタンでアーカイブを紹介できます。これはブログページに文脈を与え、ページ構造を改善し、読者を注目コンテンツへ誘導するのに役立ちます。
見出しは明確で説明的にしてください。ボタンは、注目記事、関連ページ、ニュースレター先へのリンクなど、アーカイブを補完する場合にのみ使用します。
カード設定では、各投稿がグリッド内でどのように表示されるかを制御します。これには、画像の扱い、テキストの表示、配置、キャプション、カードボタンのスタイルが含まれます。これらの設定は、このセクションのみに対して、より広いカードの既定値を上書きします。
画像中心かテキスト中心かに応じてカードスタイルを選びます。通常は、タイトルと抜粋の両方を表示すると発見性を最も高めやすく、投稿タイトル自体で十分に伝わる場合は、よりコンパクトなタイトルのみのレイアウトが適しています。
余白設定は、セクションの上下のスペースを制御します。近くのセクションとアーカイブを分けたい場合や、ブログのグリッドにすでに十分な余白がある場合にページを引き締めたいときに使用します。
大きめのヘッダーや強い背景処理を追加する場合は、少し余白を増やすとセクションに意図を持たせやすくなります。モバイルでは、わずかに余白を減らすとページをより見やすく保てることがよくあります。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定では、アーカイブの背後に色、グラデーション、画像、または動画を配置できます。これによりセクションを目立たせられますが、可読性や見た目の余白にも影響します。
見出しとカードのコントラストを保つには、オーバーレイを使用します。モバイル用のメディアを別に設定する場合は、切り抜きとフォーカルエリアが内容を十分に支えられているか確認してください。
区切り線設定
Section titled “区切り線設定”区切り線設定は、セクションの上部または下部に線を追加します。余白をあまり増やさずに、より明確な視覚的境界を作りたい場合に便利です。
隣接するセクションの背景やカードの密度が似ている場合に、区切り線を使用します。アーカイブがすでに十分に際立っている場合は、不要かもしれません。
幅設定は、アーカイブコンテンツの最大幅とセクションラッパーの幅を制御します。これらの設定は、読みやすさ、カード密度、背景表示のバランスを取るのに特に役立ちます。
コンテンツ幅を狭くすると抜粋を読みやすくなり、広くすると大画面でより多くのカードを無理なく配置できます。背景処理のためにセクション幅を調整する場合は、エディターだけでなくライブページでも確認してください。エディターのコントロールについては、テーマエディターに関するShopifyドキュメントを参照してください。
使用上の注意
Section titled “使用上の注意”- グリッドをコンテンツに合わせます。 画像や抜粋が重要な場合は列数を少なくし、読者が主にタイトルで閲覧する場合は密なレイアウトを使用します。
- フィルターは意図的に使います。 タグが一貫していて認識しやすく、閲覧する価値がある場合にのみフィルタリングをオンにします。
- カードは見やすく保ちます。 読者が投稿をすばやく選べるようにするテキスト、キャプション、ボタンの表示だけに絞ります。
- モバイルは別で確認します。 公開前に、小さい画面でグリッドサイズ、フィルターの動作、ボタン配置、背景メディアを確認してください。
- 実際のページ幅でプレビューします。 ライブページで余白、Sticky コントロール、コンテンツ幅を再確認し、実際の閲覧条件でアーカイブのバランスが取れているか確認します。
- ブロック内容はセクションと一緒にテストします。 追加したブロックはアーカイブのレイアウトや強調を変えるため、追加または並べ替え後に最終結果を確認してください。
- 必要な場合はフォールバックのスタイルをそのままにします。 空欄または既定スタイルの色は通常セクションの既存の見た目を保ちますが、より強い上書きや個別のメディアは、その領域をより独立して見せます。