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

FacebookやInstagramなどのソ⁠ーシ⁠ャル メデ⁠ィアのプロフ⁠ィ⁠ールにリンクするアイコンをペ⁠ージに追加します⁠。

最終更新日 2024年10月25日

ソ⁠ーシ⁠ャル リンク ブロ⁠ックを使用すると⁠、サイトにブロ⁠ックを追加できる場所にソ⁠ーシ⁠ャル アイコンを追加できます⁠。アイコンは⁠、[⁠ソ⁠ーシ⁠ャル リンク⁠] パネルで追加したURLにリンクします⁠。一般的には⁠、このブロ⁠ックはフ⁠ッタ⁠ーに追加して⁠、サイトのすべてのペ⁠ージに表示されるようにします⁠。

サイトに追加の組み込みアイコンが表示されている場合に⁠、利用可能なプラ⁠ットフ⁠ォ⁠ーム ロゴのリストを確認するには⁠、「⁠ソ⁠ーシ⁠ャル アイコンを追加する⁠」をご参照ください⁠。

ヒント

作業の開始がしやすいように⁠、サイトのデモ コンテンツにソ⁠ーシ⁠ャル リンク ブロ⁠ックが含まれている場合があります⁠。ブロ⁠ックをカスタマイズするには⁠、ブロ⁠ックをクリ⁠ックしてから鉛筆アイコンをクリ⁠ックします⁠。

動画を見る

始める前に

ソ⁠ーシ⁠ャル リンク ブロ⁠ックの [⁠コンテンツ⁠] タブには⁠、サイトの [⁠ソ⁠ーシ⁠ャル リンク⁠] パネルに追加された情報が反映されます⁠。ソ⁠ーシ⁠ャル リンク ブロ⁠ック内のソ⁠ーシ⁠ャル リンクを更新すると⁠、[⁠ソ⁠ーシ⁠ャル リンク⁠] パネルでも更新されます⁠。

このため⁠、すべてのソ⁠ーシ⁠ャル リンク ブロ⁠ックには同じソ⁠ーシ⁠ャル アイコンが表示されます⁠。1つのソ⁠ーシ⁠ャル リンク ブロ⁠ックでソ⁠ーシ⁠ャル リンクを追加または削除すると⁠、サイト上の他のすべてのソ⁠ーシ⁠ャル リンク ブロ⁠ックに変更が反映されます⁠。ソ⁠ーシ⁠ャル リンク ブロ⁠ックごとに異なるソ⁠ーシ⁠ャル アイコンを表示させることはできません⁠。

ソ⁠ーシ⁠ャル リンク ブロ⁠ックを追加する

ソ⁠ーシ⁠ャル リンク ブロ⁠ックを追加する方法は次のとおりです⁠。

  1. ペ⁠ージまたは投稿を編集し⁠、[⁠ブロ⁠ックを追加⁠] または挿入箇所をクリ⁠ックしてから⁠、[⁠ソ⁠ーシ⁠ャル リンク⁠] をクリ⁠ックします⁠。ヘルプについては⁠、「⁠ブロ⁠ックを使用してコンテンツを追加する⁠」をご覧ください⁠。
  2. ブロ⁠ックに表示される鉛筆アイコンをクリ⁠ックして⁠、ブロ⁠ック エデ⁠ィタ⁠ーを開きます⁠。
  3. [⁠コンテンツ⁠] タブで⁠、ソ⁠ーシ⁠ャル アイコンを追加または編集します⁠。
  4. ソ⁠ーシ⁠ャル リンクのデザインを変更するには⁠、[⁠デザイン⁠] をクリ⁠ックします⁠。

ソ⁠ーシ⁠ャル アイコンを追加または編集する

新しいソ⁠ーシ⁠ャル アイコンを追加する方法は次のとおりです⁠。

  1. [⁠コンテンツ⁠] タブで⁠、[⁠ソ⁠ーシ⁠ャル リンクを追加⁠] をクリ⁠ックします⁠。
  2. プロフ⁠ィ⁠ール ペ⁠ージのURLまたはメ⁠ールアドレスをコピ⁠ーして⁠、空白のフ⁠ィ⁠ールドに貼り付けます⁠。
  3. キ⁠ーボ⁠ードの [⁠Enter⁠] キ⁠ーを押します⁠。

個⁠々のソ⁠ーシ⁠ャル リンクを編集するには⁠、[⁠コンテンツ⁠] タブでそのハイパ⁠ーリンクをクリ⁠ックします⁠。これにより⁠、次のことが可能になります⁠。

  • ソ⁠ーシ⁠ャル リンクのURLまたはメ⁠ールアドレスを編集する⁠。
  • [⁠ソ⁠ーシ⁠ャル アイコンを表示⁠] トグルをオフに切り替えて⁠、アイコンをサイトから一時的に非表示にする⁠。
  • ソ⁠ーシ⁠ャル リンクを削除する⁠。ソ⁠ーシ⁠ャル リンクを削除すると⁠、サイト上のすべての場所からソ⁠ーシ⁠ャル リンクが即座に削除されることに注意してください⁠。

ソ⁠ーシ⁠ャル リンクの順序を変更するには⁠、[⁠コンテンツ⁠] タブの右上隅にある [⁠編集⁠] をクリ⁠ックし⁠、移動するソ⁠ーシ⁠ャル リンクの右側にあるアイコンをクリ⁠ックしてドラ⁠ッグします⁠。

サイトの [⁠ソ⁠ーシ⁠ャル リンク⁠] パネルで⁠、ソ⁠ーシ⁠ャル リンクを追加および編集することもできます⁠。[⁠ソ⁠ーシ⁠ャル リンク⁠] パネルで行⁠った変更は⁠、サイトのすべてのソ⁠ーシ⁠ャル リンク ブロ⁠ックに影響します⁠。また⁠、その逆も同様です⁠。

デザインを変更する

[⁠デザイン⁠] タブで⁠、以下の設定を使用してアイコンのデザインをカスタマイズします⁠。

ヒント

これらの設定は⁠、独自のスタイル設定を持つ組み込みのソ⁠ーシ⁠ャル アイコンには影響しません⁠。

設定 オプシ⁠ョン
境界線

アイコンを囲む境界線の形状を変更します⁠。以下の選択肢があります⁠。

  • 境界線なし
  • Square
  • 丸みを帯びた正方形

次のオプシ⁠ョンから境界線のスタイルを選択します⁠。

  • ノ⁠ックアウト
  • 外枠
  • 単色

アウトラインの幅を変更するには⁠、太さのスライダ⁠ーを使用します⁠。

配置位置

ブロ⁠ックのコンテナ⁠ーを基準としたアイコンの配置を変更します⁠。以下の選択肢があります⁠。

  • 中央
サイズ

アイコンのサイズを変更します⁠。以下の選択肢があります⁠。

  • XS
  • S
  • M
  • L
  • XL

アイコンの色を変更する

ソ⁠ーシ⁠ャル リンク ブロ⁠ックのアイコンの色は⁠、サイトのブランデ⁠ィングに合わせて変更できます⁠。オプシ⁠ョンはサイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

アイコンの色を変更する方法は次のとおりです⁠。

  1. ペ⁠⁠ージの編集中に⁠⁠、サイト スタイルを開いて [⁠⁠⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. ソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ックのテ⁠⁠ーマにある鉛筆アイコンをクリ⁠⁠ックします⁠⁠。
  3. ソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ックまでスクロ⁠⁠ールします⁠⁠。
  4. [⁠⁠メイン カラ⁠⁠ー⁠⁠] を使用して⁠⁠、ソ⁠⁠ーシ⁠⁠ャル アイコンの色を変更します⁠⁠。アイコンに単色の境界線を使用している場合は⁠⁠、[⁠⁠セカンダリ カラ⁠⁠ー⁠⁠] 微調整オプシ⁠⁠ョンも使用できます⁠⁠。
  5. [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を保存し⁠⁠、そのまま編集を続けるか⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックしてから [⁠⁠保存⁠⁠] をクリ⁠⁠ックしてエデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。

各サ⁠⁠ービスのブランデ⁠⁠ィングの既定の色を使用することはできません⁠⁠。

  1. ソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ックのあるペ⁠⁠ージで [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、ブロ⁠⁠ックの [⁠⁠編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠デザイン⁠⁠] タブをクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠色⁠⁠] で⁠⁠、[⁠⁠⁠⁠]⁠⁠、[⁠⁠⁠⁠]⁠⁠、または [⁠⁠標準⁠⁠] のいずれかを選択します⁠⁠。[⁠⁠標準⁠⁠] を選択すると⁠⁠、各アイコンがサ⁠⁠ービスのブランデ⁠⁠ィングと一致します⁠⁠。たとえば⁠⁠、Facebookのアイコンは青色になります⁠⁠。

ソ⁠⁠ーシ⁠⁠ャル リンクを削除する

1つのソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ックからソ⁠⁠ーシ⁠⁠ャル リンクを削除すると⁠⁠、サイトの [⁠⁠ソ⁠⁠ーシ⁠⁠ャル リンク⁠⁠] パネルと⁠⁠、他のすべてのソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ックからもそのソ⁠⁠ーシ⁠⁠ャル リンクが削除されます⁠⁠。ソ⁠⁠ーシ⁠⁠ャル リンクを削除する前に⁠⁠、この点に注意してください⁠⁠。ソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ックごとに異なるソ⁠⁠ーシ⁠⁠ャル アイコンを表示することはできません⁠⁠。

ソ⁠⁠ーシ⁠⁠ャル リンクを削除する方法は次のとおりです⁠⁠。

  1. ペ⁠⁠ージ上で [⁠⁠編集⁠⁠] をクリ⁠⁠ックし⁠⁠、ソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ック上の鉛筆アイコンをクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠コンテンツ⁠⁠」タブで⁠⁠、削除するソ⁠⁠ーシ⁠⁠ャル リンクをクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠ソ⁠⁠ーシ⁠⁠ャル リンクを削除⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠削除⁠⁠] をクリ⁠⁠ックします⁠⁠。これにより⁠⁠、すべてのソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ックとソ⁠⁠ーシ⁠⁠ャル リンク パネルからただちにソ⁠⁠ーシ⁠⁠ャル リンクが削除されます⁠⁠。この操作は元に戻せません⁠⁠。

また⁠⁠、[⁠⁠ソ⁠⁠ーシ⁠⁠ャル アイコンを表示⁠⁠] トグルをオフに切り替えることで⁠⁠、ソ⁠⁠ーシ⁠⁠ャル リンクを一時的に非表示にすることもできます⁠⁠。

複数のソ⁠⁠ーシ⁠⁠ャル リンクを削除する方法は次のとおりです⁠⁠。

  1. [⁠⁠コンテンツ⁠⁠] タブで⁠⁠、右上隅にある [⁠⁠編集⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. 削除するソ⁠⁠ーシ⁠⁠ャル リンクの横にあるマイナス アイコンをクリ⁠⁠ックします⁠⁠。これにより⁠⁠、すべてのソ⁠⁠ーシ⁠⁠ャル リンク ブロ⁠⁠ックとソ⁠⁠ーシ⁠⁠ャル リンク パネルからただちにソ⁠⁠ーシ⁠⁠ャル リンクが削除されます⁠⁠。この操作は元に戻せません⁠⁠。
Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

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

  • Squarespace Expertを雇う

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