WordPressのブロックエディタ拡張：Getwidについて解説(6)Icon Box

タナビーの高梨です。

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

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

Icon Box概要

Icon Boxとは、公式ページからの引用では

アイコンや見出し、テキストボックスなど、あらかじめ用意されたスタイルを使って、色やサイズ、ホバー効果などを変更しながら、レスポンシブなサービスボックスを構築

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

だそうです。

Iconブロックと見出し、段落などがセットになったセクションぽいですね。

こんな感じです。

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

ブロックの設定

ブロック設定はタブが３つあります。

それぞれ解説していきます。

Generalタブ

Icon：表示するアイコンを設定します。内容はIconブロックと同じなので、こちらを参照してください。

Layout：アイコンの横位置をテキストエリアに対して「Default（縦に配置される）」、「Align Icon Left（左端に配置される）」、「Align Icon Right（右端に配置される）」から選択します。

こんなイメージです。

Icon Vertical Alignment：Layoutで「Align Icon Left」か「Align Icon Right」を選択すると表示されます。左右のコンテンツエリアに対してのアイコン縦位置を「Top」、「Center」、「Bottom」から選択します。

Icon Link：アイコンをクリックしたときにLink先に飛ばしたい場合にURLを設定します。また、Open in New TabをONにすると、新しいウィンドウが開いてリンク先を表示します。

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

Styleタブ

Icon Style： アイコンの表示形式を「Icon（アイコンのみ）」、「Background（背景色あり）」、「Outline（枠線で囲まれる）」から選択します。 Iconブロックでは「Layout」となっている項目です。なぜ名前が違うのか謎ですね。実際の表示イメージはIconブロックの解説を参照してください。

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

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

Border Radius：Icon StyleでBackground ColorまたはOutlineを選択すると表示されます。背景枠の角を丸める数値を%で設定します。

Border Size：Icon StyleでOutlineを選択すると表示されます。枠の太さをpx単位で設定します。

Icon Size： アイコンの大きさを数値設定します。単位は「px」、「em」、「%」、「vh」、「vw」から選択できます。

Space Around Icon：アイコンの周りにどれだけスペースを取るかを数値(px)で設定します。要するにpaddingです。

Margin

Margin Top：margin-topを数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」から選択できます。鍵のマークをチェックすると、marginの意味になり、以下のMargin BottomからMargin Rightまでが選択できなくなります。

Margin Bottom：margin-bottom を数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」、「Auto」から選択できます。

Margin Left：margin-left を数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」、「Auto」から選択できます。

Margin Right：margin-right を数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」、「Auto」から選択できます。「Auto」の場合は数値は無視されます。

Advancedタブ

Icon Hover Animation：マウスでホバーした時のアニメーションを設定できます。選択肢は以下の通り。 実際の動作は Iconブロックの解説を参照してください。

まとめ

設定個所は以上です。

あまり使うシーンが想定されませんがどういう時に使うのでしょうか？？？