コンテンツにスキップ

ソーシャルメディアアイコン

設定済みのソーシャルプロフィールを、柔軟なスタイル、選択的なネットワーク表示、簡単な表示コントロールで表示します。

このブロックでは、テーマ設定ですでに設定したソーシャルプロフィールへのリンクを表示します。テーマブロックの構成についてより詳しくは、セクションとブロックに関するShopifyドキュメント をご覧ください。ヘッダー、フッター、連絡先エリア、サポート重視のコンテンツなど、顧客が素早くブランドに触れられることを期待する場所で使用してください。

主な設定では、ソーシャルリンクの見た目と表示するネットワークを制御します。

レイアウト内でのこのブロックの役割に応じて、Icon style を選択してください。Branded はひと目で認識しやすく、Solid はよりすっきりと一貫した見た目になり、Text only はリンクを装飾よりもナビゲーションに近く見せたい場合に適しています。

デフォルトでは、Show all により、テーマ設定で構成済みのすべてのソーシャルネットワークが表示されます。ヘッダーは最小限に保ちつつ、フッターではより多くの一覧を表示したい場合など、この設定をオフにしてください。

Show all が無効の場合、このブロックで個別のネットワークを選択できます。スペースが限られている場合や、ストアの異なるエリアで異なるチャネルを強調したい場合に最適です。

このブロックには、テーマ設定ですでにアカウント情報が追加されているネットワークのみが表示されます。ここでネットワークを有効にしても、それだけでソーシャルリンクが作成されるわけではありません。

これらの設定では、必要に応じてこのブロックがテーマ全体のカラー選択を上書きできます。ブロックが別の背景上にある場合や、周囲のコンテンツより強いコントラストが必要な場合に特に便利です。

Icon colorSolid スタイルにのみ影響し、Text colorText only スタイルにのみ影響します。色の変更が表示されない場合は、まず選択したスタイルと一致しているか確認してください。

共有のカラー設定リファレンスをご覧ください: カラー設定に関するCompany XYZドキュメント

表示コントロールを使用して、このブロックをデスクトップ、モバイル、またはその両方に表示するかどうかを決めます。これは、ソーシャルリンクをあるレイアウトには表示し、別のレイアウトには表示したくない場合に役立ちます。特に、コンパクトなモバイルデザインで便利です。

同じリンクが別の場所でも利用できる場合、または配置が重複して感じられる場合にのみ、ブロックを非表示にしてください。そうすることで、ソーシャルリンクを見つけにくくすることなく、レイアウトをすっきり保てます。

共有の表示設定リファレンスをご覧ください: 表示設定に関するCompany XYZドキュメント

  1. 配置に合わせてスタイルを選びます。 すばやく認識させたい場合は branded icons、すっきりした見た目にしたい場合は solid icons、ナビゲーションのようなエリアには text only を使用してください。
  2. 必要に応じてネットワーク一覧を絞り込みます。 狭いスペースでは Show all をオフにし、顧客が最も使う可能性の高いチャネルだけをこのブロックで強調します。
  3. 目的を持って色を上書きします。 特定のエリアでコントラストを改善したり、強調をより明確にしたりしたいときに、アイコンまたはテキストの色を変更してください。
  4. まずアカウント設定を確認します。 表示されるはずのネットワークが表示されない場合は、そのソーシャルプロフィールがテーマ設定にすでに追加されているか確認してください。
  5. レスポンシブ表示は慎重に使用します。 別の配置ですでに同じ用途を満たしている場合にのみ、モバイルまたはデスクトップでこのブロックを非表示にしてください。
  6. 両方の表示領域を確認します。 デスクトップとモバイルのコントロールによって、余白、配置、表示、メディアの動作が異なる場合があるため、公開前に両方のレイアウトを確認してください。