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

ブロック一覧へ戻る

「ソーシャルアイコン」ブロックは、さまざまなソーシャルメディアのアイコンを投稿や固定ページに追加し、プロフィールへのリンクを貼ることができるシンプルなブロックです。そうすることで、ソーシャルメディアのプロフィールの視認性を高め、トラフィックを誘導することができます。

A screenshot of the social icons block filled with social icons

ブロックの追加方法

  1. 編集画面で新しい行を追加する。
  2. エディターに /social または /ソーシャル と入力する。スラッシュは半角。
  1. フライアウトメニューから「ソーシャルアイコン」を選択する。プレースホルダーが含まれるブロックが表示されます。プレースホルダーは、ブロックにアイコンを追加するまで表示されます。

ブロック追加の詳しい方法はこちらをご覧ください。

ソーシャルアイコンとプロフィールへのリンク追加方法 

  1. ソーシャルアイコンブロックをクリックして選択する。
  2. プラス記号アイコンをクリックする。利用できるソーシャルメディアプラットフォームの一部のリストが表示される。
  1. 探しているものがメニューに表示されていない場合は、検索ボックスにプラットフォーム名を入力する。
  1. ブロックに追加したいプラットフォームのアイコンをメニューから選択する。
  2. ブロック内のアイコンをクリックすると、アドレス (URL) 入力欄が表示される。
  1. 入力欄にソーシャルメディアプロフィールへのリンク URL を貼り付けて、Enter キーを押すか、↩ アイコンをクリックする。
ソーシャルアイコンにプロフィールリンクを追加し、さらに別のアイコンを追加する

この手順を、追加したいソーシャルメディアのプロフィールごとに繰り返す必要があります。 

ブロックツールバー

このブロックには2つのツールバーがあります。ひとつは、ブロック全体を選択したときに表示される親ツールバー。もうひとつのツールバーは、個別のアイコンをクリックすると表示されます。

親ツールバーで利用できるボタン

ソーシャルアイコンの親ツールバーには、5つのボタンがあります。 

A screenshot of the block placeholder with the toolbar buttons

スタイル

「ソーシャルアイコン」ブロックを「グループ」や「カラム」に変形させることができます。また、「トランスフォーマー」ボタンをクリックすると、ソーシャルアイコンのスタイルを変更することができます。

スタイルは3種類あります。「デフォルト」「ロゴのみ」「カプセル形」「ダークグレー」です。

追加オプション

各アイコンの独立ツールバー

各アイコンを押すと表示されるツールバーには、4つのボタンがあります。

追加オプション

ブロック設定

ブロックのどこをクリックしたかによって、表示される設定が2種類あります。ブロックを選択すると、ブロック全体の設定が表示されます。個々のアイコンをクリックすると、各アイコンの設定が表示されます。

親ブロックのブロック設定 (全アイコン)

「ソーシャルアイコン」ブロックを選択すると、サイドバーに以下の設定が表示されます。 

  • スタイル
  • リンク設定
  • 高度な設定

各アイコンのブロック追加設定

これらの設定は、各ソーシャルアイコンをクリックすると、サイドバーに表示されます。 

リンクラベル

「ソーシャルアイコン」サイドバーの設定では、「リンク」ラベルを追加することができます。ラベルは、スクリーンリーダーのユーザーがリンクの文脈を理解するのに役立ちます。 

高度な設定

「高度な設定」タブでは、ブロックに CSS クラスを追加することができ、カスタム CSS を記述して、ブロックを自由にスタイリングすることができます。

Changelog

  • Created 2020-11-13

原文

この記事は役に立ちましたか ? どうすればさらに改善できますか ?