ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

【ワードプレスでSNSリンクアイコン】ソーシャルアイコンブロックの使い方

ワードプレスの標準ブロックであるソーシャルアイコンブロックでは、SNSのアイコンを表示することができます。自社やお店のSNSへのリンクボタンを簡単に設置することができます。

この記事でわかること

ソーシャルアイコンブロックの使い方

  • アイコンボタンの挿入方法
  • アイコンボタンへのリンクURLの設定方法
  • アイコンボタンのレイアウト・サイズの変更方法
  • アイコンボタンのスタイルや色の変更方法

ソーシャルアイコンブロックとは

次のようなアイコンボタンを表示することができるブロックです(実際にソーシャルアイコンブロックで表示しています)。

アイコンは自分の好きなものを並べることができます。もちろん各アイコンにはリンク先URLを設定することができます。

SNSのシェアボタンとは異なりますので注意ください。

ソーシャルアイコンブロックの使い方

ブロックエディターを開けて進めていきます。

基本操作(ブロックの挿入と各アイコンボタン・リンクの設定)

まずは基本的な操作として次の手順を紹介します。

  1. ソーシャルアイコンブロックを挿入する
  2. アイコンボタンを設置する
  3. 各アイコンボタンにリンク先URLを設定する

各アイコンにはリンク先URLを設定しないとweb表示されないので注意しましょう。
(ブロックエディター内ではリンクなしでも表示されます)

1.ソーシャルアイコンブロックを挿入する

ソーシャルアイコンブロックはブロック一覧表のウィジェットカテゴリーにあります。次の手順で挿入しましょう。

①画面左上の+マークをクリック
②ソーシャルアイコンをクリック

ソーシャルアイコンブロックの挿入手順

挿入すると次のようにブロックが表示されます。

挿入直後のソーシャルアイコンブロック

2.アイコンボタンを設置する

ブロック内の+マークをクリックしてアイコンを選択します。

アイコンの挿入手順1

”すべて表示”をクリックすると画面左に全アイコンが表示されます。

アイコンの挿入手順2(すべての表示から挿入)

多くのアイコンがあるので、検索ボックスにSNSの頭文字を入力して候補を絞るとよいでしょう。

アイコン候補の絞り込み

実際にブロックにアイコンを並べると以下のようになります。

アイコンを挿入したブロック

3.各アイコンボタンにリンク先URLを設定する

①アイコンボタンをクリック
②開いた入力ボックスにリンク先URLを入力
③確定ボタンをクリック

下記ではfacebookアイコンにリンク先URLを設定しています。

リンク先URLの設定手順

URLを設定するとアイコンの色が濃く表示されるようになります。

上記でわかるように、このブロックにはツールバーが2種類あります。

  • ソーシャルアイコンブロック全体のツールバー
  • 各アイコンボタン選択時のツールバー

以降はこの2種類のツールバーや画面右の設定パネルを使って、アイコン表示の変更設定を紹介していきます。

アイコンの位置とサイズの変更

アイコンの揃え位置とサイズは、ソーシャルアイコンブロック全体のツールバーで設定することができます。

アイコンの揃え位置とサイズの設定

アイコンの揃え位置

アイコンの揃え位置

アイコンのサイズ

アイコンのサイズ

アイコンの並び順変更・削除の方法

アイコン並びの変更やアイコンの削除は、各アイコン毎のツールバーで実施できます。

アイコン並び順はツールバー内の左右の矢印ボタンで移動して入れ替えします。
削除は、ツールバー内一番右の3点メニューから実施します。

アイコンの並び変更と削除の方法

アイコンのスタイルの変更

画面右の設定用パネルでは、アイコンスタイルがデフォルト含めて4種類選択できるようになっています。
(ソーシャルアイコンブロック全体を選択した状態としてください)

アイコンスタイルの設定

※編集画面右に設定用パネルが表示されていない場合は、画面右上の設定(歯車マーク)をクリックすれば表示できます。

情報パネルの表示・非表示切り替え

各スタイルの見映え

アイコンの各スタイル

その他設定パネルでできる設定

ソーシャルアイコンブロック全体の設定パネル(画面右)では、ほかにも次の設定が可能です。

スタイル以外に設定パネルで可能な設定

各操作の役割は上記画像の通りです。
(ちなみにレイアウトの配置は、ツールバーで設定できる揃え位置の変更と同じです。)

このうちアイコンの縦並びと色の変更について画像で紹介します。

アイコンを縦並びとする

アイコンはデフォルトでは横並びですが、縦に並べることも可能です。

アイコンの並び方向の設定

アイコンの色を変更する

アイコンの色は、選択しているスタイルによっては思ったようにいかないので、次のように考えるとよいでしょう。

デフォルトスタイルには背景色変更が効果的

デフォルトスタイルは着色された背景色に白抜きがしてあるので、背景色の変更が効果的です。

デフォルトスタイルには背景色変更が効果的

ロゴのみスタイルにはアイコン色変更が効果的

アイコン色の変更は、ロゴのみスタイルの場合に使うとよいでしょう。

ロゴのみスタイルにはアイコン色変更が効果的

リンクラベルをつける

各アイコンの設定パネルで、スクリーンリーダーで使えるリンクラベルの設定をすることができます。

各アイコンをクリックして、各アイコンの設定パネル内で入力します。

リンクラベルの設定

まとめ

アイコンからSNSにリンクさせる、ソーシャルアイコンブロックの紹介をしてきました。

単にアイコンを並べるだけでなく、結構いろいろな設定ができるようになっているので、最後にまとめておきます。

  • ブロック内にさまざまなアイコンを配置することができる
  • アイコンにはリンク先URLが必要。設定なしだとアイコンは表示されない。
  • リンク先は新しいタブで開く設定も可能(ブロック全体の設定パネル)
  • アイコンの配置・サイズを変更できる(ブロック全体のツールバー)
  • アイコンの並び順変更や削除ができる(各アイコンツールバー)
  • アイコンのスタイルを4種類から選択できる(ブロック全体の設定パネル)
  • アイコンを縦並びに配置することもできる(ブロック全体の設定パネル)
  • アイコン色やアイコン背景色を変更できる(ブロック全体の設定パネル)
  • スクリーンリーダーで使えるリンクラベルの設定ができる(各アイコンツールバー)

ソーシャルアイコンブロックは、サイドバーやフッターなどサイトの共通エリアに配置しておくと効果的でしょう。テーマにもよりますが、ブロックベースのウィジェットを活用すると可能となります。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる