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

タナビーの高梨です。

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

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

Banner概要

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

バナーのサイズ、配置、色、アニメーション効果などをカスタマイズして、より良いプレゼンテーションを行う

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

だそうです。

例によって何だかよく分かりませんね。

こんな感じです。

画像にマウスをホバーさせてみて下さい。

では設定を見ていきましょう。

ブロックの設定

まずは画像を選択しないと設定ができません。

メディアライブラリから選択するか、新規にアップロードしましょう。

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

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

Generalタブ

Settings

Image Size：挿入する画像の大きさを選択します。

Text Horizontal Alignment：画像の上に重ねる文字の横位置を「Left」、「Center」、「Right」から選択します。

Text Vertical Alignment：画像の上に重ねる文字の縦位置を「Top」、「Middle」、「Bottom」から選択します。

Block Height：ブロック全体の高さを設定します。単位は「px」、「vh」、「vw」、「%」から選択します。

Text Width：画像の上に重ねる文字領域の幅を設定します。単位は「 「px」、「vh」、「vw」、「%」から選択します。 横幅が足りない場合は、文字列が折り返しで表示されます。

Styleタブ

Overlay Opacity：画像全体に前景が重なっているので、その透明度をスライダーまたは数値入力で％設定します。100が完全不透明で画像が何も見えなくなり、ゼロが完全透明です。

Text Color：画像の上に重ねる文字の色を設定します。パレットからまたは、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。

Overlay Color：画像全体に前景が重なっており、その色を設定します。 パレットからまたは、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。

Advancedタブ

Block Animation：ブロック領域にマウスホバーした時のアニメーション効果を下記から選択します。

それぞれの実際の動きは下記にマウスホバーして確認してください。

Text Animation：マウスホバーした時のテキストにつけるアニメーションを下記から選択します。

それぞれ実際の動きは下記にマウスホバーして確認してください。

Link：画像をクリックしたときにLink先に飛ばしたい場合にURLを設定します。新しいウィンドウを開いてリンク先を表示させたい場合は、ブロックを選択して下に表示されるOpen in new tabをオンにします。

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

まとめ

設定個所は以上です。

Block Animationが結構使えますね。

積極的に使っていきたいと思います。