WordPressのブロックエディタ拡張：Getwidについて解説(18)Button Group

  • 投稿日
  • 著者 takanashi
  • カテゴリー WordPress

タナビーの高梨です。

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

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

Button Group概要

Button Groupブロックとは、公式ページからの引用では、

複数のコールトゥアクションボタンをスタイルと調和させて追加し、ボタンセット全体の幅、整列、方向を同時に更新

公式ページ（翻訳 by DeepL先生）

だそうです。

デフォルトのボタンと何が違うのでしょう。

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

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

ブロックの設定

Settings

Horizontal space bettween buttons：このブロックはボタンを複数配置するブロックになっており、ボタンとボタンの横方向の間隔を「Default」「Small」「Medium」「Normal」「Large」「None」から選択します。下記にあるDirectionを「Vertical」にすると、縦方向の間隔になります。

Desktopタブ

Holizontal Alignment：PCでの横方向の表示位置を「Left」「Center」「Right」から選択します。

Direction：PCでのボタンの並びを「Holizontal（横方向）」「Vertical（縦方向）」から選択します。

Button Width：PCでのボタンの横幅を「Auto」「100%」「50%」「33%」「25%」「20%」から選択します。例えば３つのボタンを横方向（Holizontal）に並べた場合、「５０％」にすると2列に配置されます。

Tabletタブ

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

Direction：タブレットでのボタンの並びを「Holizontal（横方向）」「Vertical（縦方向）」から選択します。

Button Width：タブレットでのボタンの横幅を「Auto」「100%」「50%」「33%」「25%」「20%」から選択します。例えば３つのボタンを横方向（Holizontal）に並べた場合、「５０％」にすると2列に配置されます。

Mobileタブ

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

Direction：モバイルでのボタンの並びを「Holizontal（横方向）」「Vertical（縦方向）」から選択します。

Button Width：モバイルでのボタンの横幅を「Auto」「100%」「50%」「33%」「25%」「20%」から選択します。例えば３つのボタンを横方向（Holizontal）に並べた場合、「５０％」にすると2列に配置されます。

まとめ

設定個所は以上です。

意外と少ないですね。

実は配置されるボタンは普通のボタンブロックを流用しています。

ですので、ボタン自体の設定（色とか枠線設定とか）はボタンブロックのものと同じになります。

Getwid