ソーシャル アイコンを追加する

訪問者がお客様のソ⁠ーシ⁠ャル ペ⁠ージを見つけてフ⁠ォロ⁠ーできるようにします⁠。

最終更新日 2025年1月27日

ソ⁠ーシ⁠ャル リンクを追加すると⁠、訪問者にソ⁠ーシ⁠ャル アイコンが表示され⁠、Web上のどこにいても訪問者がお客様を見つけやすくなります⁠。アイコンは⁠、Facebook⁠、Instagram⁠、X (⁠旧 Twitter⁠) など⁠、多くの一般的なプラ⁠ットフ⁠ォ⁠ームのロゴを含みます⁠。任意のWebサイトまたはメ⁠ールアドレスにつながるリンクまたはメ⁠ール アイコンを追加することもできます⁠。

このガイドでは⁠、ソ⁠ーシ⁠ャル アイコンの追加⁠、スタイル設定⁠、管理方法について説明します⁠。アイコンは次の場所に追加できます⁠。

  • 組み込みのソ⁠ーシ⁠ャル アイコン領域 (⁠すべてのバ⁠ージ⁠ョン7⁠.1のサイト⁠、および一部のバ⁠ージ⁠ョン7⁠.0のテンプレ⁠ート⁠)
  • ソ⁠ーシ⁠ャル リンク ブロ⁠ック
  • カバ⁠ー ペ⁠ージ (⁠バ⁠ージ⁠ョン7⁠.0⁠)

サポ⁠ート対象プラ⁠ットフ⁠ォ⁠ームのロゴのリストをご覧ください⁠。

ヒント

Facebookでの共有やInstagramの投稿の表示など⁠、コンテンツを共有するアカウントを承認するには⁠、代わりに「⁠ソ⁠ーシ⁠ャル アカウントの接続⁠」の手順に従⁠ってください⁠。

以下はソ⁠ーシ⁠ャル アイコンの例です⁠。

組み込みのソーシャル アイコン

ソ⁠ーシ⁠ャル アイコン リンクを追加する

[⁠ソ⁠ーシ⁠ャル リンク⁠] パネルにリンクを追加すると⁠、サイト全体にソ⁠ーシ⁠ャル アイコンが表示されます⁠。

  • URLに基づいてプラ⁠ットフ⁠ォ⁠ームを認識すると⁠、プラ⁠ットフ⁠ォ⁠ームのロゴが付いたアイコンが表示されます⁠。
  • 認識できないペ⁠ージまたはサ⁠ービスからのリンクである場合は⁠、リンク アイコンで表示されます⁠。
  • リンクがメ⁠ールアドレスの場合は⁠、メ⁠ール アイコンで表されます⁠。

リンクを追加するには⁠、次の手順を実行します⁠。

  1. [⁠ソ⁠ーシ⁠ャル リンク⁠] パネルを開きます⁠。
  2. [⁠ソ⁠ーシ⁠ャル リンクまたはメ⁠ール⁠] フ⁠ィ⁠ールドまでスクロ⁠ールします⁠。
  3. プロフ⁠ィ⁠ール ペ⁠ージのURLまたはメ⁠ールアドレスをコピ⁠ーしてフ⁠ィ⁠ールドに貼り付けます⁠。たとえば⁠、Instagramの場合⁠、http⁠://instagram⁠.com/yourhandleのように⁠、インスタグラムのプロフ⁠ィ⁠ールの完全なURLをコピ⁠ーし⁠、貼り付けます⁠。
  4. キ⁠ーボ⁠ードの [⁠Enter⁠] キ⁠ーを押します⁠。
  5. 追加するアイコンごとにこの手順を繰り返します⁠。
  6. アイコンの順序を変更するには⁠、パネル内でアカウントをドラ⁠ッグ アンド ドロ⁠ップします⁠。ほとんどのテンプレ⁠ートでは⁠、ソ⁠ーシ⁠ャル アイコンは左から右へ同じ順序で表示されます⁠。Flatironでは⁠、右から左に現れます⁠。

アイコンを管理する

[⁠ソ⁠ーシ⁠ャル リンク⁠] パネル内のすべてのリンクは⁠、組み込みのソ⁠ーシ⁠ャル アイコンとして表示され⁠、ソ⁠ーシ⁠ャル リンク ブロ⁠ックにも表示されます⁠。[⁠ソ⁠ーシ⁠ャル リンク⁠] パネルを開いて⁠、いずれかの領域からアイコンを追加または編集できます⁠。どちらかの領域に加えた変更は⁠、サイト全体に反映されます⁠。

ソ⁠ーシ⁠ャル アイコンを組み込む

組み込みのソ⁠ーシ⁠ャル アイコンが表示される場所は⁠、サイトのバ⁠ージ⁠ョンにより異なります⁠。

[⁠デザイン⁠] パネルでこれらのソ⁠ーシ⁠ャル アイコンのスタイルを設定できます⁠。アイコンを編集するには⁠、アイコンの上にカ⁠ーソルを置いて [⁠編集⁠] をクリ⁠ックします⁠。詳しくは⁠、「⁠組み込みのソ⁠ーシ⁠ャル アイコン⁠」をご覧ください⁠。

ソ⁠ーシ⁠ャル リンク ブロ⁠ック

ソ⁠ーシ⁠ャル リンク ブロ⁠ックは⁠、ブロ⁠ックを追加できる場所であればどこでも利用できます⁠。このブロ⁠ックの外観は⁠、設定で変更できます⁠。

ここからアイコンを編集するには⁠、ソ⁠ーシ⁠ャル リンク ブロ⁠ックのあるペ⁠ージを開いてブロ⁠ックをクリ⁠ックし⁠、[⁠編集⁠] または鉛筆アイコンをクリ⁠ックします⁠。詳細については⁠、「⁠ソ⁠ーシ⁠ャル リンク ブロ⁠ック⁠」をご覧ください⁠。

カバ⁠ー ペ⁠ージ (⁠バ⁠ージ⁠ョン7⁠.0⁠)

すべてのカバ⁠ー ペ⁠ージにソ⁠ーシ⁠ャル アイコンを表示できます⁠。配置はレイアウトにより異なります⁠。

アイコンを編集するには⁠、カバ⁠ー ペ⁠ージを開き⁠、ソ⁠ーシ⁠ャル アイコンにカ⁠ーソルを合わせ⁠、[⁠ソ⁠ーシ⁠ャル アイコンを編集⁠] をクリ⁠ックします⁠。詳細については⁠、「⁠バ⁠ージ⁠ョン7⁠.0のカバ⁠ー ペ⁠ージ⁠」をご覧ください⁠。

アイコンの表示状態を設定する

リンクを追加した後⁠、アイコンを表示するか非表示にするかを決定します⁠。

  1. [⁠ソ⁠ーシ⁠ャル リンク⁠] パネルを開きます⁠。
  2. 編集するアカウントをクリ⁠ックします⁠。
  3. 「⁠ソ⁠ーシ⁠ャル アイコンを表示する⁠」にチ⁠ェ⁠ックを入れるか⁠、またはチ⁠ェ⁠ックを外します⁠。
  4. [⁠保存⁠] をクリ⁠ックします⁠。

これで⁠、パネル内のそのサ⁠ービスの名前の下に [⁠非表示⁠] または [⁠表示⁠] ラベルが表示されます⁠。これは⁠、サイト全体のすべてのアイコンに適用されます⁠。

アイコンを削除する

サイト全体からアイコンを削除するには⁠、次の手順を実行します⁠。

  1. [⁠ソ⁠ーシ⁠ャル リンク⁠] パネルを開きます⁠。
  2. 削除するアイコンをクリ⁠ックします⁠。
  3. [⁠削除⁠] > [⁠確認⁠] の順にクリ⁠ックします⁠。

ヒント

特定の領域からのみアイコンを削除するには⁠、組み込みのソ⁠ーシ⁠ャル アイコンを非表示にするか⁠、ソ⁠ーシ⁠ャル リンク ブロ⁠ックを削除します⁠。

利用可能なプラ⁠ットフ⁠ォ⁠ームのロゴ

ソ⁠ーシ⁠ャル リンクにそのプラ⁠ットフ⁠ォ⁠ームのURLを追加すると⁠、これらのロゴが自動的に表示されます⁠。

  • 500ピクセル
  • Apple用ポ⁠ッドキ⁠ャスト (⁠詳細については⁠、「⁠Squarespaceを使⁠ったポ⁠ッドキ⁠ャスト配信の概要⁠」をご覧ください⁠。ポ⁠ッドキ⁠ャストのカスタム リンクの使用に関するヘルプについては⁠、「⁠Apple用マ⁠ーケテ⁠ィング ツ⁠ール⁠」をご覧ください⁠。⁠)
  • Bandsintown
  • Behance
  • CodePen
  • Discord
  • Dribbble
  • Facebook
  • Flickr
  • Foursquare Swarm
  • GitHub (⁠Squarespace開発者プラ⁠ットフ⁠ォ⁠ームを使用していて⁠、Gitに関する詳細なヘルプが必要な場合は⁠、開発者向け資料をご覧ください⁠。⁠)
  • Goodreads
  • Google Play
  • Houzz
  • IMDb (⁠⁠.comで終わるリンクのみ⁠) IMDbアイコンを表示します⁠。
  • Instagram
  • LinkedIn
  • Medium
  • Meetup
  • Pinterest
  • Reddit
  • SmugMug
  • Snapchat
  • SoundCloud
  • Spotify
  • Stitcher
  • The Dots
  • Tidal
  • TikTok
  • Threads
  • TripAdvisor
  • Tumblr
  • Twitch
  • Vevo
  • Vimeo
  • VSCO
  • Yelp
  • YouTube
  • XまたはTwitter (⁠表示されるアイコンは使用したURLによ⁠って異なります⁠。Twitter⁠.com URLには鳥のアイコンが表示され⁠、X⁠.com URLにはXアイコンが表示されます⁠。⁠)

備考

BandcampやWhatsAppなど⁠、上記以外のプラ⁠ットフ⁠ォ⁠ームへのリンクは⁠、一般的なリンク アイコンとして表示されます⁠。カスタム画像やロゴをソ⁠ーシ⁠ャル アイコンとしてインポ⁠ートすることはできませんが⁠、クリ⁠ックスル⁠ーURLを含む画像ブロ⁠ックを追加することで⁠、サイトの他の領域に追加できます⁠。

私のソ⁠ーシ⁠ャル リンクには「⁠ソ⁠ーシ⁠ャル アイコンを表示⁠」設定がありません

2019年3月21日より前に⁠、[⁠接続済みのアカウント⁠] パネルでソ⁠ーシ⁠ャル アカウントを承認した場合⁠、それらは [⁠ソ⁠ーシ⁠ャル リンク⁠] パネルで自動的に複製されます⁠。ただし⁠、お客様自身が⁠、[⁠接続済みのアカウント⁠] パネルでのアイコンの表示を引き続き管理できます⁠。

代わりにソ⁠ーシ⁠ャル リンクでのアイコンの表示を管理するには⁠、[⁠ソ⁠ーシ⁠ャル リンク⁠] パネルからアイコンを削除してから⁠、プロフ⁠ィ⁠ールURLリンクを使用してアイコンを再度追加します⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。