【ワードプレスでSNSリンクアイコン】ソーシャルアイコンブロックの使い方
ワードプレスの標準ブロックであるソーシャルアイコンブロックでは、SNSのアイコンを表示することができます。自社やお店のSNSへのリンクボタンを簡単に設置することができます。
ソーシャルアイコンブロックの使い方
- アイコンボタンの挿入方法
- アイコンボタンへのリンクURLの設定方法
- アイコンボタンのレイアウト・サイズの変更方法
- アイコンボタンのスタイルや色の変更方法
ソーシャルアイコンブロックとは
次のようなアイコンボタンを表示することができるブロックです（実際にソーシャルアイコンブロックで表示しています）。
アイコンは自分の好きなものを並べることができます。もちろん各アイコンにはリンク先URLを設定することができます。
SNSのシェアボタンとは異なりますので注意ください。
ソーシャルアイコンブロックの使い方
ブロックエディターを開けて進めていきます。
基本操作（ブロックの挿入と各アイコンボタン・リンクの設定）
まずは基本的な操作として次の手順を紹介します。
- ソーシャルアイコンブロックを挿入する
- アイコンボタンを設置する
- 各アイコンボタンにリンク先URLを設定する
各アイコンにはリンク先URLを設定しないとweb表示されないので注意しましょう。
（ブロックエディター内ではリンクなしでも表示されます）
１．ソーシャルアイコンブロックを挿入する
ソーシャルアイコンブロックはブロック一覧表のウィジェットカテゴリーにあります。次の手順で挿入しましょう。
①画面左上の+マークをクリック
②ソーシャルアイコンをクリック
挿入すると次のようにブロックが表示されます。
２．アイコンボタンを設置する
ブロック内の+マークをクリックしてアイコンを選択します。
”すべて表示”をクリックすると画面左に全アイコンが表示されます。
多くのアイコンがあるので、検索ボックスにSNSの頭文字を入力して候補を絞るとよいでしょう。
実際にブロックにアイコンを並べると以下のようになります。
３．各アイコンボタンにリンク先URLを設定する
①アイコンボタンをクリック
②開いた入力ボックスにリンク先URLを入力
③確定ボタンをクリック
下記ではfacebookアイコンにリンク先URLを設定しています。
URLを設定するとアイコンの色が濃く表示されるようになります。
上記でわかるように、このブロックにはツールバーが２種類あります。
- ソーシャルアイコンブロック全体のツールバー
- 各アイコンボタン選択時のツールバー
以降はこの２種類のツールバーや画面右の設定パネルを使って、アイコン表示の変更設定を紹介していきます。
アイコンの位置とサイズの変更
アイコンの揃え位置とサイズは、ソーシャルアイコンブロック全体のツールバーで設定することができます。
アイコンの揃え位置
アイコンのサイズ
アイコンの並び順変更・削除の方法
アイコン並びの変更やアイコンの削除は、各アイコン毎のツールバーで実施できます。
アイコン並び順はツールバー内の左右の矢印ボタンで移動して入れ替えします。
削除は、ツールバー内一番右の３点メニューから実施します。
アイコンのスタイルの変更
画面右の設定用パネルでは、アイコンスタイルがデフォルト含めて４種類選択できるようになっています。
（ソーシャルアイコンブロック全体を選択した状態としてください）
※編集画面右に設定用パネルが表示されていない場合は、画面右上の設定（歯車マーク）をクリックすれば表示できます。
各スタイルの見映え
その他設定パネルでできる設定
ソーシャルアイコンブロック全体の設定パネル（画面右）では、ほかにも次の設定が可能です。
各操作の役割は上記画像の通りです。
（ちなみにレイアウトの配置は、ツールバーで設定できる揃え位置の変更と同じです。）
このうちアイコンの縦並びと色の変更について画像で紹介します。
アイコンを縦並びとする
アイコンはデフォルトでは横並びですが、縦に並べることも可能です。
アイコンの色を変更する
アイコンの色は、選択しているスタイルによっては思ったようにいかないので、次のように考えるとよいでしょう。
デフォルトスタイルには背景色変更が効果的
デフォルトスタイルは着色された背景色に白抜きがしてあるので、背景色の変更が効果的です。
ロゴのみスタイルにはアイコン色変更が効果的
アイコン色の変更は、ロゴのみスタイルの場合に使うとよいでしょう。
リンクラベルをつける
各アイコンの設定パネルで、スクリーンリーダーで使えるリンクラベルの設定をすることができます。
各アイコンをクリックして、各アイコンの設定パネル内で入力します。
まとめ
アイコンからSNSにリンクさせる、ソーシャルアイコンブロックの紹介をしてきました。
単にアイコンを並べるだけでなく、結構いろいろな設定ができるようになっているので、最後にまとめておきます。
- ブロック内にさまざまなアイコンを配置することができる
- アイコンにはリンク先URLが必要。設定なしだとアイコンは表示されない。
- リンク先は新しいタブで開く設定も可能（ブロック全体の設定パネル）
- アイコンの配置・サイズを変更できる（ブロック全体のツールバー）
- アイコンの並び順変更や削除ができる（各アイコンツールバー）
- アイコンのスタイルを４種類から選択できる（ブロック全体の設定パネル）
- アイコンを縦並びに配置することもできる（ブロック全体の設定パネル）
- アイコン色やアイコン背景色を変更できる（ブロック全体の設定パネル）
- スクリーンリーダーで使えるリンクラベルの設定ができる（各アイコンツールバー）
ソーシャルアイコンブロックは、サイドバーやフッターなどサイトの共通エリアに配置しておくと効果的でしょう。テーマにもよりますが、ブロックベースのウィジェットを活用すると可能となります。
https://web-children.com/2021/07/23/wordpress-block-based-ne...