コメント

注目のリンク

1. コメントセクションに関するCompany XYZドキュメント
2. セクションとブロックに関するShopifyドキュメント
3. セクションの余白設定に関するCompany XYZドキュメント
4. セクション背景設定に関するCompany XYZドキュメント
5. 区切り線設定に関するCompany XYZドキュメント
6. 表示設定に関するCompany XYZドキュメント
7. レイアウト幅設定に関するCompany XYZドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

このセクションを使って、記事の下にコメントを表示し、ディスカッションエリアがページの他の部分に合うようにスタイル設定します。ブログでコメントがすでに有効になっている場合に最も適しており、設定手順はテーマの コメント に含まれています。セクションコンテンツがテーマエディターでどのように整理されるかについてのより広い概要は、セクションとブロックに関するShopifyドキュメント をご覧ください。

基本設定

セクション固有の主な設定では、コメントのアクションボタンを制御します。フォームのアクションをどの程度目立たせたいかに応じて、控えめなプレーンな見た目から、より強いプライマリーまたはセカンダリーのスタイルまで、合うスタイルを選択してください。

モバイルでは、幅いっぱいのボタンオプションを使うと、フォームをタップしやすくなり、長い記事の末尾でも見つけやすくなります。これは、コメントエリアでより狭いコンテンツ幅を使っている場合や、ページの他の場所でより小さなボタンスタイルを使っている場合に特に便利です。

ブログでコメントが有効になっていない場合、このセクションだけではアクティブなコメントエリアは作成されません。

標準セクション設定

余白設定

余白設定 は、コメントエリアの上と下のスペースを制御します。コメントを記事本文からより明確に区切る必要がある場合は余白を増やし、区切り線や背景スタイルで十分に分離されている場合は余白を減らしてください。

セクション背景設定

セクション背景設定 を使うと、コメントを色、グラデーション、画像、または動画の背景の上に配置できます。これにより、ディスカッションを記事コンテンツから分けやすくなりますが、長いコメントスレッドでも読みやすさを保つため、控えめな見た目にするのが通常は最適です。

空白または透明の値では通常テーマのフォールバックスタイルが維持されますが、明示的な色、グラデーション、メディアを選ぶと、コメントエリアをより独立した印象にできます。背景画像や動画を使用する場合は、デスクトップとモバイルの両方を確認してください。メディアを分けることで、トリミング、読み込み、可読性が変わる場合があります。

グラデーション設定は単色設定を上書きし、オーバーレイのグラデーションはオーバーレイの色を上書きします。背景画像や動画を使用する場合は、モバイルがメインのメディアを継承することがあるため、別のモバイル版を割り当てているかどうかをデスクトップとモバイルの両方で確認してください。

注意

強い背景や情報量の多い背景は、コメントのテキスト、名前、フォームフィールドを読みづらくする場合があります。オーバーレイとコントラストは慎重に使用してください。

区切り線設定

区切り線設定 は、セクションの上部または下部に線を追加します。余白を増やしたり全面的な背景処理を加えたりせずに、コメントエリアを記事から区切るシンプルな方法です。

区切り線の色を透明のままにすると、セクションはテーマのボーダー色を使用します。これは、区切り線をページの他の部分と一貫させる最も簡単な方法であることがよくあります。

表示設定

表示設定 は、セクションをデスクトップ、モバイル、または両方に表示するかを制御します。よりシンプルなモバイルの記事レイアウトにしたい場合や、デバイスごとに異なるページ構成にしたい場合に便利です。

一方のデバイスでコメントを非表示にすると、記事の体験が一貫しなくなる場合があるため、慎重にセクションを非表示にしてください。デバイスごとの表示設定を選ぶ場合は、両方の画面サイズで記事ページ全体をプレビューしてください。

幅設定

幅設定 は、コメントコンテンツの最大幅とセクションラッパーの幅の両方を制御します。ディスカッションが多いページでは、非常に広いレイアウトよりも、適度なコンテンツ幅のほうが読みやすいことがよくあります。

セクションの幅は、背景を使用する場合に最も重要です。コメントエリアの周囲に背景がどこまで広がるかが変わるためです。エディター上では幅の変更が実際のページと見え方が異なる場合があるため、最終結果をストアフロントでプレビューする価値があります。

使用上の注意

1. 先にコメントを有効にします。 このセクションのスタイル設定に時間をかける前に、ブログでコメントが許可されていることを確認してください。
2. 両方のデバイスレイアウトを確認します。 デスクトップとモバイルのコントロールでは、配置、表示、メディアの動作が異なる場合があるため、両方の画面サイズでコメントエリアを確認してください。
3. モバイルのアクションはタップしやすくします。 小さな画面でフォームが窮屈に感じられる場合や見逃しやすい場合は、幅いっぱいのモバイルボタンを使ってください。
4. 読みやすさを保ちます。 長いコメントスレッドを素早く確認できるように、背景、オーバーレイ、区切り線の選択は控えめにしてください。
5. 快適さのために幅を使います。 適度なコンテンツ幅は、返信や長めのコメントテキストの読みやすさを向上させることがよくあります。
6. 記事全体の流れをプレビューします。 余白、表示、背景を変更したあと、コメントエリアが上の本文に自然につながるかを確認してください。