WordPressのブロックエディターでSNSへのリンクを並べたいときは、コアに入っている「ソーシャルアイコン」ブロックを使うのが手軽です。この記事では、ブロックの挿入からサービスごとのURL登録、スタイル・サイズ・新しいタブで開く設定、ヘッダーやフッターへの配置、アイコンが表示されないときの確認点までを、管理画面の操作だけで説明します。
画面の表記は WordPress のバージョンやテーマによって少し異なることがあります。本文の表記は（2026年10月現在）の一般的な日本語表示を基準にしています。
ソーシャルアイコンブロックでできること
ソーシャルアイコンブロックは、X（旧Twitter）・Instagram・Facebook・YouTube などのロゴを横並びで表示し、それぞれを各サービスのプロフィールページへリンクさせるブロックです。親ブロック「ソーシャルアイコン」の中に、サービスごとの子ブロック（個別のアイコン）が入る二層構造になっています。
この構造を知っておくと操作で迷いにくくなります。
- 並べ方・サイズ・スタイル・色・新しいタブで開くかどうか → 親ブロックの設定
- どのサービスか・リンク先URL・ラベル文字 → 個別アイコンの設定
画像を用意したりCSSを書いたりする必要はなく、アイコンはブロックに内蔵されたSVGで表示されます。
ブロックを挿入してアイコンを追加する
挿入の手順
- 投稿・固定ページの編集画面、またはサイトエディターでテンプレートパーツを開きます。
- 左上の「＋」（ブロック挿入ツール）を開き、検索欄に「ソーシャル」と入力します。
- 「ソーシャルアイコン」を選ぶと、空のブロック、または数個のアイコンが入った状態で挿入されます。
段落の行頭で「/ソーシャル」と入力しても候補に出てきます。
サービスのアイコンとURLを登録する
ブロック内の「＋」をクリックすると、サービスの一覧が表示されます。使うサービスを選ぶとアイコンが1つ追加され、URLの入力欄が開きます。ここにプロフィールページのURLを貼り付けて確定します。
入力欄を閉じてしまったあとは、アイコンをクリックすれば再び開けます。URLを登録していないアイコンは、編集画面では薄く表示されることが多く、公開ページには出力されません。「アイコンが一つ足りない」というときは、まずURLの入れ忘れを疑ってください。
アイコンの順番は、個別アイコンを選んだときのツールバーにある左右の矢印、またはドラッグで入れ替えられます。不要なアイコンは、ツールバーの「︙」（オプション）から削除します。
選べるサービスの例
コアには X、Instagram、Facebook、YouTube、TikTok、LinkedIn、Pinterest、GitHub、Threads、Mastodon などのアイコンが用意されています。メール（mailto: のリンク）やRSSフィード用のアイコン、汎用の「リンク」アイコンもあります。収録サービスはバージョンアップで追加されることがあるため、目当てのサービスが一覧にあるかは、実際の一覧で確かめてください。
親ブロックの主な設定
親ブロックを選択すると、ブロックツールバーと右側の設定サイドバー（ブロックタブ）に設定項目が出ます。親ブロックを選びにくい場合は、個別アイコンを選んだ状態でツールバー左端の親ブロック選択ボタンを押すか、リスト表示（ドキュメント概観）から選ぶと確実です。
スタイル（デフォルト・ロゴのみ・ピル）
設定サイドバーの「スタイル」で見た目を切り替えます。
- デフォルト: 丸い背景色の上にロゴが乗った形。各サービスのブランドカラーが付きます。
- ロゴのみ: 背景なしでロゴだけを表示。文字色に近い控えめな見た目になり、フッターなどでなじませたいときに向きます。
- ピル: 横長の角丸の背景にロゴを乗せた形。ラベルを表示する場合と相性がよいスタイルです。
テーマが独自のスタイルを追加している場合は、選択肢がこれより多くなることがあります。
サイズ
アイコンの大きさは、ツールバーの「サイズ」から小・標準・大・特大のように段階で選びます（表記はバージョンにより異なります）。ピクセル単位で細かく指定する項目はないため、それ以上の調整が必要ならテーマ側のCSSで対応します。
リンクを新しいタブで開く
設定サイドバーの「リンク設定」付近にある「リンクを新しいタブで開く」をオンにすると、すべてのアイコンが新しいタブで開くようになります。個別のアイコンごとではなく、ブロック全体に対する設定です。
ラベルを表示
「ラベルを表示」をオンにすると、ロゴの横にサービス名などの文字が出ます。表示される文字は、個別アイコンを選んだときの設定サイドバーにあるラベル欄で書き換えられます。たとえば「Instagramはこちら」のように変更できます。
ラベルを表示しない場合でも、このラベルはスクリーンリーダー向けのテキストとして使われます。サービス名だけでは伝わりにくいリンク（汎用のリンクアイコンなど）には、ラベルを入れておくと親切です。
色・配置・余白
「デフォルト」スタイルでは、設定サイドバー（スタイルタブ）でアイコンの色と背景色を一括で指定できます。指定すると各サービスのブランドカラーは上書きされ、全アイコンが同じ色になります。
ツールバーや設定サイドバーの「レイアウト」では、左寄せ・中央・右寄せ・両端揃えといった配置、横並びか縦並びか、折り返すかどうかを選べます。アイコン同士の間隔は「ブロックの間隔」などの項目で調整します。どの項目が出るかはテーマが対応している機能によって変わります。
どこに置くのが一般的か
記事本文
プロフィール紹介の記事や、固定ページの「お問い合わせ」「運営者情報」などに置くのが典型です。その記事だけに表示されます。
ブロックテーマのヘッダー・フッター
全ページに表示したい場合は、ブロックテーマ（Twenty Twenty-Four など）のサイトエディターでテンプレートパーツに置きます。
- 管理画面の「外観」→「エディター」を開きます。
- 「パターン」などからテンプレートパーツの「フッター」（またはヘッダー）を開きます。
- ソーシャルアイコンブロックを挿入して保存します。
テンプレートパーツの変更は、そのパーツを使うすべてのページに反映されます。保存時に「テンプレートパーツも保存する」旨の確認が出るので、意図した変更かどうかを見てから保存してください。
クラシックテーマのウィジェット
クラシックテーマでも、ブロックウィジェットが有効なら「外観」→「ウィジェット」でサイドバーやフッターのウィジェットエリアにソーシャルアイコンブロックを追加できます。
アイコンが表示されない・崩れるときの確認点
- 公開ページにアイコンが出ない: URLが未入力のアイコンは出力されません。各アイコンをクリックしてURLを確認します。
- 色が反映されない: 「ロゴのみ」スタイルでは背景色の指定が効きません。スタイルを「デフォルト」に戻して確かめます。
- テーマのCSSで形が崩れる: テーマが a 要素や svg に独自の余白・色を付けていると、アイコンの形や色がずれることがあります。別のテーマで同じ表示を確かめると、原因がテーマ側かどうかを切り分けられます。
- 変更が反映されない: キャッシュ系プラグインやサーバーのキャッシュが古い表示を返していることがあります。キャッシュを削除し、ブラウザで再読み込みしてから確認します。
- ヘッダーやフッターで編集したのに一部のページだけ変わらない: ページごとに別のテンプレートやテンプレートパーツを使っている可能性があります。サイトエディターで、そのページが使っているテンプレートを確かめます。
コアにないサービスのアイコンを使いたい場合
LINE や note、はてなブログのように、コアのサービス一覧に入っていないSNSもあります（2026年10月現在の一覧で確認してください）。こうした場合は次のような方法があります。
- 汎用の「リンク」アイコンを使う: 鎖のマークのアイコンにURLを設定し、ラベルでサービス名を示します。見た目は汎用的になりますが、追加の作業は不要です。
- 画像ブロックやボタンブロックで作る: 各サービスが配布している公式ロゴ画像を使い、リンクを設定します。ロゴの利用条件は各サービスのガイドラインに従います。
- プラグインを使う: SNSアイコンやシェアボタンを追加するプラグインを使う方法です。導入前に、更新が続いているか、テーマと競合しないかを確認します。
ソーシャルアイコンブロックは「自分のアカウントへ誘導する」ためのものです。記事をSNSで共有してもらう「シェアボタン」とは目的が違う点にも注意してください。
まとめ
- ソーシャルアイコンブロックは、親ブロック（並べ方・スタイル・サイズ・新しいタブ・ラベル）と個別アイコン（サービス・URL・ラベル文字）の二層で設定します。
- スタイルは「デフォルト」「ロゴのみ」「ピル」から選べ、サイズは段階で指定します。
- 全ページに出すならブロックテーマのヘッダー・フッターのテンプレートパーツ、クラシックテーマならウィジェットに置きます。
- 表示されないときは、URLの入れ忘れ、スタイルと色指定の組み合わせ、テーマCSS、キャッシュの順に確認します。
- コアにないサービスは、汎用リンクアイコン・画像やボタン・プラグインで補います。