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

タナビーの高梨です。

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

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

Image Box概要

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

アニメーション効果の追加、必要なサイズのクリックによる適用、スペーシングの変更など、より深く画像を表現

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

だそうです。

どうやら画像を見栄え良くしてくれるようですね。

どのような設定があるのか、さっそく見ていきましょう！

ブロックの設定

ブロックの設定の前に、まずは画像を選択する必要があります。

既存のものをメディアライブラリーから選ぶか、新たにアップロードして、複数の画像を選択し、ギャラリーを作成してください。

そうすると、ブロック設定はタブが３つあります。

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

Generalタブ

Layout：ブロック全体のレイアウトを「Default」「Alignment Image Left」「Alignment Image Right」から選択します。「Default」は画像が上、その下に見出し、テキスト、の順で表示されます。「Alignment Image Left」は画像が左、その右に見出し、テキストが縦に並びます。「Alignment Image Right」は画像が右、その左に見出し、テキストが縦に並びます。

Image Vertial Alignment：LayoutでAlignment LeftかAlignment Rightを選択すると表示されます。ブロック領域の縦方向に対して、どのように画像を配置するかを「Top」「Middle」「Bottom」から選択します。

Mobile Layout：モバイルでの表示レイアウトを「Default（画像の前面にテキストエリアを描画）」「Column（画像エリア、テキストエリアの順に縦並び）」「Colum Reverse Order（テキストエリア、画像エリアの順に縦並び）」から選択します。

Mobile Alignment：モバイルでの画像表示位置を「Default」「Left」「Center」「Right」から選択します。

Image Hover Animation：画像にマウスをホバーさせた際のアニメーション効果を、「None」「Bounce」「Flash」「Pulse」「Rubber Band」「Shake」「Head Shake」「Swing」「Tada」「Wobble」「Jello」「Jack in The Box」「Slide Top」「Slide Bottom」「Slide Left」「Slide Right」「Zoom Small」「Zoom Big」から選択します。実際の動きはIconブロックと同じなので、こちらを参照してください。

Styleタブ

Margin Top：画像エリアのmargin-topを数値で設定します。単位は「px」、「em」、「%」、「vh」、「vw」から選択できます。画像エリアに効いて、テキストエリアには効きません。鍵マークをチェックすると、以降のMargin Bottom、Margin Left、Margin Rightが無効となり、Margin Topで設定した内容がMargin(上下左右)として適用されます。

Margin Bottom：margin-bottomの設定です。選択肢はMargin Topと同じです。

Margin Left：margin-leftの設定です。選択肢はMargin Topと同じです。

Margin Right：margin-rightの設定です。選択肢はMargin Topと同じです。

Advancedタブ

Image Link：画像をクリックされた際のリンク先URLを設定します。

Open New Tab：ONにすると、Image Linkで設定したリンク先が新しいタブで表示されます。Offの場合は同じタブ内で画面遷移します。

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

まとめ

設定個所としては以上です。

正直あまり使いどころが分かりませんが、画像に説明文を入れたいような場合にブロックを組み合わせるよりも融通が利きそうです。