WordPressのブロックエディタ拡張:Getwidについて解説(17)Social Links

タナビーの高梨です。

今回はGetwidのSocial Linksブロックに関する設定を解説していきます。

全般設定についてはこちらをご覧ください。

Social Linksブロックとは、公式ページの引用では、

ソーシャルアイコンの追加、デバイスに合わせた配置のカスタマイズ、既成のレイアウト、サイズやスペースの変更など

公式ページ(翻訳 by DeepL先生)

だそうです。

SNS向けのアイコンをグループ化して横並びに表示するものとなっています。

こんな感じです。

デフォルトでは、上記の通りFacebook、Twitter、Instagram、Youtubeが並びます。

では、どういった設定があるのでしょうか。

さっそく見ていきましょう!

ブロックの設定

Settings

DesktopタブのHolizontal Alignment:PCでの横方向の表示位置を設定します。「Left」「Center」「Right」から選択します。

TabletタブのHolizontal Alignment:タブレットでの横方向の表示位置を設定します。「Left」「Center」「Right」から選択します。

MobileタブのHolizontal Alignment:モバイルでの横方向の表示位置を設定します。「Left」「Center」「Right」から選択します。

Icon Color:アイコンの色を指定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。

Layout:各アイコンの表示形式を 表示形式を「Icon(アイコンのみ)」、「Background(背景色あり)」、「Outline(枠線で囲まれる)」から選択します。 全てのアイコンに適用されます。アイコンごとの設定はできません。

Background Color:Layoutで「Backgound」を選択すると表示されます。背景色を指定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。

Icon Size:アイコンのサイズをpxで設定します。

Space Between Icons:アイコンとアイコンの間の隙間を「None(くっつく)」「Default(デフォルト)」「Small(小さい)」「Middle(ちょっと大きい)」「Large(さらに大きい)」から選択します。

その他設定

デフォルトのリンク先は、Facebookのアイコンならfacebook.com、twitterのアイコンならtwitter.comが設定されています。

ブロックのアイコンを直接選択することにより、ご自分のアカウントへのリンクに変更など個別の設定ができます。

また、ブロックを選択した状態では、右端に+記号が表示され、アイコンを追加することができます。

Icon:表示されるアイコンを選択します。選択肢はIconブロックと同じです。

Link:リンク先を設定します。ここをご自身のアカウントに変更しましょう。

Open New Tab:オンにすると、リンク先を新しいタブで開きます。

Link Rel:リンクする際の<a>タグのRel属性を設定します。

まとめ

設定個所は以上です。

アイコンは自由に選べるし、Link先も自由に設定できるので、別にSNSに限った使用でなくても構わないようです。

アイコンをメニュー的に並べて表示したい場合に使えるかもしれません。