成功
Footer - Article
記事の詳細、タグ、オプションの共有または印刷アクションを、すっきりした記事フッターで表示します。
この記事の下部に、読者が記事を読み終えた後によく確認する詳細を含む、シンプルな締めのエリアを追加するには、このセクションを使用します。テーマセクションの仕組みの概要については、セクションとブロックに関するShopifyドキュメント を参照してください。コンテンツ自体への注意をそらさずに、コンテキストの補強と軽い補助アクションを表示する用途に最適です。
主な設定では、フッターに表示する記事の詳細とアクションを制御します。より軽めの構成が最も適していることが多いため、記事の理解や継続的な閲覧に役立つ情報だけを含めてください。
著者を表示すると、特に複数著者のブログでは、信頼性とより編集的な印象を加えられます。日付の表示は、時事性のあるコンテンツで特に有用です。一方、タグは、ブログで明確で一貫したタグ付け構造を使っている場合に最も効果的です。
共有と印刷は任意の補助アクションです。オーディエンスがコンテンツをどのように利用するかに合う場合はオンにし、よりすっきりしてアクションの少ないフッターにしたい場合はオフにしてください。
これらの設定では、このフッター専用にデフォルトのテキスト色とアイコン色を上書きできます。フッターがカスタム背景上にある場合や、メタデータを本文よりも控えめに見せたい場合に特に有用です。
テキスト、アイコン、および背景処理との間で、十分なコントラストを確保してください。ここでは、強いアクセントカラーよりも、控えめな色変更のほうが洗練されて見えることが多いです。
フッター背景とテキストまたはアイコンの色の両方をカスタマイズする場合は、公開前にデスクトップとモバイルで読みやすさを確認してください。
標準セクション設定
Section titled “標準セクション設定”余白設定 では、フッターコンテンツの上下のスペースを制御します。フッターを記事と視覚的に結びつけたい場合に使うか、より明確な締めのエリアとして見せたい場合は間隔を広げてください。
詰めた余白は、ミニマルな記事レイアウトに適しています。区切り線や背景処理を追加する場合は、より広めの余白のほうが適しています。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 では、フッターの背後に色、グラデーション、画像、または動画を追加できます。これにより、投稿メタデータを本文から分けたり、記事末の視覚的な切り替えをより強くしたりできます。
背景メディアを使用する場合は、オーバーレイ設定でテキストの可読性を保てます。グラデーション設定は単色の選択を上書きするため、複数の競合する効果を重ねるのではなく、意図した1つのレイヤーを使用してください。
区切り線設定
Section titled “区切り線設定”区切り線設定 では、フッターの上部または下部に線を追加できます。これは、強いスタイルを加えずにセクションを区切るシンプルな方法です。
上部の区切り線だけでも、記事コンテンツからフッターへの移行を示すのに十分な場合が多いです。区切り線の色を透明のままにすると、そのセクションでは代わりにテーマの枠線色が使用されます。
表示設定 では、フッターをデスクトップ、モバイル、または両方に表示するかを制御します。これは、モバイルでよりコンパクトな記事レイアウトにしたい場合や、デバイスごとに読む流れを変えたい場合に便利です。
いずれかのデバイスでセクションを非表示にする前に、タグや共有アクションなど、読者が最も使いやすい場所で役立つコンテキストを失わないか確認してください。
幅設定 では、フッターコンテンツの最大幅とセクションラッパーの幅を制御します。フッターを記事カラムに揃えたい場合や、背景スタイルをコンテンツより広く表示したい場合に使用してください。
コンテンツ幅は主な可読性のコントロールであり、セクション幅は背景を使う場合に特に重要です。幅の変更はエディター上と公開ページで見え方が異なることがあるため、最終レイアウトは適用前にプレビューしてください。
使用上の注意
Section titled “使用上の注意”- フッターは簡潔に保ちます。 記事の終了後に本当に価値を加えるメタデータとアクションだけを表示してください。
- タグは意図的に使います。 タグがあるからという理由だけでなく、読者が関連コンテンツを見つけるのに役立つ場合に有効にしてください。
- 控えめなスタイルを優先します。 軽い区切り線、抑えた色、適度な余白は、強い視覚的演出よりも記事フッターに適していることが多いです。
- 可読性を守ります。 カスタム背景を使用する場合は、特に小さい画面で、コントラストとオーバーレイ設定を慎重に確認してください。
- 両方の表示幅を確認します。 デスクトップとモバイルでは、配置、表示、メディアの動作が異なる場合があるため、両方のサイズでフッターをプレビューしてください。
- コンテンツのソースに注意します。 フッターが記事データや関連コンテンツの結果に依存する場合は、選択したコンテンツが利用可能であり、結果が少ない場合でも問題なく表示されることを確認してください。