ブロックエディターでスタイル変更可能なSNSボタンを設置

以前のBLOGでは、SNSのシェアボタンを設置する方法を紹介しました。今回は、ブロックエディターでスタイル変更可能なSNSボタンを設置する方法を紹介します。

設置

ブロックエディターより、ソーシャルアイコンを選択します。＋マークをクリックすると、アイコンが一部のみ表示されるので、すべて表示ボタンをクリックします。左にSNSアイコン一覧が表示されます。

設置したいSNSアイコンを全て選択します。アイコンをクリックすると、テキストボックスが表示されるので、それぞれ、リンク先のアドレスを入力します。ブロックを選択し、レイアウトを中央揃えに設定します。これで、完成です。プレビューを確認します。ホバーすると少し拡大します。

スタイル変更

次に、サイトのデザインに合わせてスタイルを変更します。ブロックを選択し、右サイドバーのブロック＞スタイルをロゴのみに変更します。色をグレーに変更します。サイズを大に変更します。これで完成です。プレビューで確認します。

また、カスタム投稿タイプで作成し、フッターなどに読み込むことも可能です。

以上で、今回の説明は終了です。投稿ページやウィジェットにSNSボタンを設置する場合、便利ですね。ブロックエディターで、増減が簡単に出来ます。記事の内容によって色々なSNSアカウントのボタンも設置できます。カスタム投稿タイプで、フッター、サイドバーなどに設置する場合、一括管理できます。