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

サイト上のソ⁠ーシ⁠ャル アイコンを表示⁠、スタイル設定⁠、削除します⁠。

最終更新日 2025年1月09日

ソ⁠ーシ⁠ャル リンクを追加すると⁠、サイトに組み込みのソ⁠ーシ⁠ャル アイコンを表示することができます⁠。ほとんどの場合⁠、アイコンは自動的に⁠、またはスタイル設定で有効にした後⁠、サイトのヘ⁠ッダ⁠ーに表示されます⁠。このガイドでは⁠、組み込みのソ⁠ーシ⁠ャル アイコンを有効化⁠、スタイル設定⁠、非表示にする方法について説明します⁠。

アイコンを並べ替える方法や⁠、これらのソ⁠ーシ⁠ャル アイコンがリンクしているサ⁠ービスを追加および削除する方法については⁠、「⁠ソ⁠ーシ⁠ャル アイコンを追加する⁠」を参照してください⁠。サイトの他のエリアにアイコンを追加するには⁠、ソ⁠ーシ⁠ャル リンク ブロ⁠ックを使用します⁠。

この機能へのアクセス

サイトがバ⁠ージ⁠ョン7⁠.0の場合⁠、組み込みのソ⁠ーシ⁠ャル アイコンを表示できるかどうか⁠、およびアイコンがどこに表示されるかはテンプレ⁠ートによ⁠って異なります⁠。

バ⁠ージ⁠ョン別の組み込みソ⁠ーシ⁠ャル アイコンの表示

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

すべてのバ⁠⁠ージ⁠⁠ョン7⁠⁠.1サイトでは⁠⁠、サイト ヘ⁠⁠ッダ⁠⁠ーに組み込みのソ⁠⁠ーシ⁠⁠ャル アイコンを表示できます⁠⁠。ただし⁠⁠、表示するには⁠⁠、ソ⁠⁠ーシ⁠⁠ャル アイコンを有効にする必要があります⁠⁠。

  1. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開き⁠⁠、サイト上の任意のペ⁠⁠ージで [⁠⁠編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. ヘ⁠⁠ッダ⁠⁠ーにカ⁠⁠ーソルを合わせ⁠⁠、[⁠⁠サイト ヘ⁠⁠ッダ⁠⁠ーを編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠エレメントを追加⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠ソ⁠⁠ーシ⁠⁠ャル リンク⁠⁠] トグルをオンに切り替えます⁠⁠。
  4. サイトにソ⁠⁠ーシ⁠⁠ャル リンクをまだ追加していない場合は⁠⁠、ヘ⁠⁠ッダ⁠⁠ーの上にカ⁠⁠ーソルを置いて [⁠⁠ソ⁠⁠ーシ⁠⁠ャル リンク⁠⁠] が表示されたらクリ⁠⁠ックし⁠⁠、次に鉛筆アイコンをクリ⁠⁠ックします⁠⁠。[⁠⁠コンテンツ⁠⁠] タブでソ⁠⁠ーシ⁠⁠ャル リンクを追加できます⁠⁠。ソ⁠⁠ーシ⁠⁠ャル リンクはサイト全体に適用されることにご注意ください⁠⁠。
  5. [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を保存し⁠⁠、そのまま編集を続けるか⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックしてから [⁠⁠保存⁠⁠] をクリ⁠⁠ックしてエデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。

サイト ヘ⁠⁠ッダ⁠⁠ーの詳細については⁠⁠、「⁠⁠サイト ヘ⁠⁠ッダ⁠⁠ーを作成する⁠⁠」を参照してください⁠⁠。

次の表は⁠⁠、バ⁠⁠ージ⁠⁠ョン7⁠⁠.0のテンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ーで組み込みのソ⁠⁠ーシ⁠⁠ャル アイコンが表示される場所の一覧です⁠⁠。一部のテンプレ⁠⁠ートでは⁠⁠、ソ⁠⁠ーシ⁠⁠ャル アイコンを有効にしないと表示されません⁠⁠。詳細については⁠⁠、テンプレ⁠⁠ートのガイドを参照してください⁠⁠。

テンプレ⁠⁠ート コンピ⁠⁠ュ⁠⁠ータ⁠⁠ー モバイル
Adirondack なし なし
Avenue フ⁠⁠ッタ⁠⁠ー フ⁠⁠ッタ⁠⁠ー

Aviator

右上または中央下 (⁠⁠レイアウトによ⁠⁠って異なります⁠⁠) 下部中央

Bedford

なし なし

Brine

ヘ⁠⁠ッダ⁠⁠ー なし

Farro

ヘ⁠⁠ッダ⁠⁠ー アイコンは表示されません
Five ヘ⁠⁠ッダ⁠⁠ーおよび/またはフ⁠⁠ッタ⁠⁠ー フ⁠⁠ッタ⁠⁠ー アイコンのみが表示されます
Flatiron フ⁠⁠ッタ⁠⁠ー フ⁠⁠ッタ⁠⁠ー
Forte ヘ⁠⁠ッダ⁠⁠ー ナビゲ⁠⁠ーシ⁠⁠ョン オ⁠⁠ーバ⁠⁠ーレイ
Galapagos なし なし
Ishimoto フ⁠⁠ッタ⁠⁠ー フ⁠⁠ッタ⁠⁠ー
Momentum ナビゲ⁠⁠ーシ⁠⁠ョン バ⁠⁠ー ナビゲ⁠⁠ーシ⁠⁠ョン オ⁠⁠ーバ⁠⁠ーレイ

Montauk

情報フ⁠⁠ッタ⁠⁠ー 情報フ⁠⁠ッタ⁠⁠ー
Native フ⁠⁠ッタ⁠⁠ー フ⁠⁠ッタ⁠⁠ー

Pacific

なし なし

Skye

ヘ⁠⁠ッダ⁠⁠ー フ⁠⁠ッタ⁠⁠ー
Supply ナビゲ⁠⁠ーシ⁠⁠ョン サイドバ⁠⁠ー ナビゲ⁠⁠ーシ⁠⁠ョン オ⁠⁠ーバ⁠⁠ーレイ

Tremont

ヘ⁠⁠ッダ⁠⁠ー ヘ⁠⁠ッダ⁠⁠ー
Wells ナビゲ⁠⁠ーシ⁠⁠ョン サイドバ⁠⁠ー ヘ⁠⁠ッダ⁠⁠ー
Wexley フ⁠⁠ッタ⁠⁠ー フ⁠⁠ッタ⁠⁠ー

York

なし なし

ソ⁠ーシ⁠ャル アイコンのスタイルを設定する

サイト内蔵のソ⁠ーシ⁠ャル アイコンのサイズ⁠、境界線⁠、色をカスタマイズできます⁠。

サイズと境界線

ソ⁠⁠ーシ⁠⁠ャル アイコンのサイズと境界線を変更する方法は以下の通りです⁠⁠。

  1. ペ⁠⁠ージの [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠サイト ヘ⁠⁠ッダ⁠⁠ーを編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. ソ⁠⁠ーシ⁠⁠ャル リンクをクリ⁠⁠ックし⁠⁠、鉛筆アイコン⁠⁠、そして [⁠⁠デザイン⁠⁠] の順にクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠ソ⁠⁠ーシ⁠⁠ャル アイコンのサイズ⁠⁠] スライダ⁠⁠ーを使用してサイズを変更します⁠⁠。
  4. 境界線の形状を選択し⁠⁠、境界線のスタイルとして [⁠⁠外枠⁠⁠] または [⁠⁠実線⁠⁠] を選択します⁠⁠。
  5. [⁠⁠外枠⁠⁠] を選択した場合は⁠⁠、[⁠⁠太さ⁠⁠] スライダ⁠⁠ーを使用して境界線の幅を変更します⁠⁠。
  6. [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を保存し⁠⁠、そのまま編集を続けるか⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックしてから [⁠⁠保存⁠⁠] をクリ⁠⁠ックしてエデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。

単色とグラデ⁠⁠ーシ⁠⁠ョンのヘ⁠⁠ッダ⁠⁠ーの色

ヘ⁠⁠ッダ⁠⁠ーの背景のスタイル が「⁠⁠単色⁠⁠」または「⁠⁠グラデ⁠⁠ーシ⁠⁠ョン⁠⁠」に設定されている場合にソ⁠⁠ーシ⁠⁠ャル アイコンの色を変更するには⁠⁠、次の手順に従⁠⁠ってください⁠⁠。

  1. ペ⁠⁠ージの編集中に⁠⁠、ヘ⁠⁠ッダ⁠⁠ー エデ⁠⁠ィタ⁠⁠ーを開きます⁠⁠。
  2. ヘ⁠⁠ッダ⁠⁠ー エデ⁠⁠ィタ⁠⁠ーで⁠⁠、[⁠⁠デザインを編集⁠⁠]⁠⁠、[⁠⁠⁠⁠] の順にクリ⁠⁠ックします⁠⁠。
  3. ナビゲ⁠⁠ーシ⁠⁠ョン リンクと内蔵ソ⁠⁠ーシ⁠⁠ャル アイコンの色を編集するには⁠⁠、[⁠⁠ナビゲ⁠⁠ーシ⁠⁠ョンの色⁠⁠] をクリ⁠⁠ックします⁠⁠。

「⁠⁠単色⁠⁠」または「⁠⁠グラデ⁠⁠ーシ⁠⁠ョン⁠⁠」ヘ⁠⁠ッダ⁠⁠ーのソ⁠⁠ーシ⁠⁠ャル アイコンのホバ⁠⁠ー時の色を変更するには⁠⁠、サイトの既定のカラ⁠⁠ー テ⁠⁠ーマの [⁠⁠プライマリ ボタンの背景⁠⁠] 微調整オプシ⁠⁠ョンを編集します⁠⁠。これにより⁠⁠、この既定のカラ⁠⁠ー テ⁠⁠ーマでプライマリ ボタンのスタイル設定を使用するボタンの色も変更されることにご注意ください⁠⁠。

アダプテ⁠⁠ィブ ヘ⁠⁠ッダ⁠⁠ーの色

ヘ⁠⁠ッダ⁠⁠ーの背景のスタイルが「⁠⁠アダプテ⁠⁠ィブ⁠⁠」に設定されている場合にソ⁠⁠ーシ⁠⁠ャル アイコンの色を変更するには⁠⁠、次の手順に従⁠⁠ってください⁠⁠。

  1. ペ⁠⁠ージの編集中に⁠⁠、サイト スタイルを開いて [⁠⁠⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. サイト ヘ⁠⁠ッダ⁠⁠ー用に選択されているカラ⁠⁠ー テ⁠⁠ーマの鉛筆アイコンをクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠ナビゲ⁠⁠ーシ⁠⁠ョン リンク⁠⁠] 微調整オプシ⁠⁠ョンを変更します⁠⁠。
  4. [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を保存し⁠⁠、そのまま編集を続けるか⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックしてから [⁠⁠保存⁠⁠] をクリ⁠⁠ックしてエデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。

「⁠⁠アダプテ⁠⁠ィブ⁠⁠」ヘ⁠⁠ッダ⁠⁠ーのソ⁠⁠ーシ⁠⁠ャル アイコンのホバ⁠⁠ー時の色を変更するには⁠⁠、上部セクシ⁠⁠ョンのカラ⁠⁠ー テ⁠⁠ーマで [⁠⁠プライマリ ボタンの背景⁠⁠] 微調整オプシ⁠⁠ョンを編集します⁠⁠。これにより⁠⁠、このカラ⁠⁠ー テ⁠⁠ーマを使用するセクシ⁠⁠ョンでプライマリ ボタンのスタイル設定を使用するボタンの色も変更されることにご注意ください⁠⁠。

ソ⁠⁠ーシ⁠⁠ャル アイコンのスタイルを設定するには⁠⁠、次の手順に従います⁠⁠。

  1. [⁠⁠サイト スタイル⁠⁠] パネルを開きます⁠⁠。
  2. サイト プレビ⁠⁠ュ⁠⁠ーのソ⁠⁠ーシ⁠⁠ャル アイコンをクリ⁠⁠ックします⁠⁠。
  3. 表示されるスタイル微調整オプシ⁠⁠ョンを使用して⁠⁠、アイコンのスタイルを変更します⁠⁠。
  4. [⁠⁠保存⁠⁠] をクリ⁠⁠ックします⁠⁠。

一部のテンプレ⁠⁠ートには⁠⁠、次のような追加のオプシ⁠⁠ョンがあります⁠⁠。

スタイル微調整オプシ⁠⁠ョン オプシ⁠⁠ョン
ソ⁠⁠ーシ⁠⁠ャル アイコンのスタイル

ソ⁠⁠ーシ⁠⁠ャル アイコンの形状を変更します⁠⁠。通常⁠⁠、オプシ⁠⁠ョンには次のものが含まれます⁠⁠。

  • 丸み付け
  • Square
  • 標準 - サ⁠⁠ービスのブランデ⁠⁠ィングの既定の形状⁠⁠。たとえば⁠⁠、Facebookのアイコンは「⁠⁠f⁠⁠」の形になります⁠⁠。
カラ⁠⁠ー オ⁠⁠ーバ⁠⁠ーレイ/代替色 バナ⁠⁠ーに表示される2つ目の色を選択します⁠⁠。
標準色 サ⁠⁠ービスのブランデ⁠⁠ィングの既定の色を使用します⁠⁠。

組み込みのアイコンを非表示にする

組み込みのソ⁠ーシ⁠ャル アイコンを非表示にするには⁠、次の手順に従います⁠。

  1. [⁠⁠ペ⁠⁠ージ⁠⁠] パネルを開き⁠⁠、サイト上の任意のペ⁠⁠ージで [⁠⁠編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. ヘ⁠⁠ッダ⁠⁠ーにカ⁠⁠ーソルを合わせ⁠⁠、[⁠⁠サイト ヘ⁠⁠ッダ⁠⁠ーを編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠エレメントを追加⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠ソ⁠⁠ーシ⁠⁠ャル リンク⁠⁠] トグルをオフに切り替えます⁠⁠。
  4. [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を保存し⁠⁠、そのまま編集を続けるか⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックしてから [⁠⁠保存⁠⁠] をクリ⁠⁠ックしてエデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。
  1. [⁠⁠サイト スタイル⁠⁠] パネルを開きます⁠⁠。
  2. [⁠⁠ソ⁠⁠ーシ⁠⁠ャル⁠⁠] 微調整オプシ⁠⁠ョンを探します⁠⁠。微調整オプシ⁠⁠ョンの名前はテンプレ⁠⁠ートによ⁠⁠って異なりますが⁠⁠、[⁠⁠ソ⁠⁠ーシ⁠⁠ャル アイコンを非表示⁠⁠]⁠⁠、[⁠⁠ソ⁠⁠ーシ⁠⁠ャル アイコンを表示⁠⁠]⁠⁠、[⁠⁠ソ⁠⁠ーシ⁠⁠ャル アイコンの位置⁠⁠: 非表示⁠⁠] などのオプシ⁠⁠ョンを探してください⁠⁠。プレビ⁠⁠ュ⁠⁠ーのアイコンをクリ⁠⁠ックすると⁠⁠、微調整オプシ⁠⁠ョンを見つけやすくなります⁠⁠。
  3. [⁠⁠保存⁠⁠] をクリ⁠⁠ックします⁠⁠。

備考

FlatironまたはNativeテンプレ⁠⁠ートでは⁠⁠、組み込みのソ⁠⁠ーシ⁠⁠ャル アイコンを非表示にすることはできません⁠⁠。

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

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

  • Squarespace Expertを雇う

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