takanashi タナビーの高梨です。
今回はGetwidのImage Hotspotブロックに関する設定を解説していきます。
全般設定については こちらをご覧ください。
Image Hotspot概要
Image Hotspotブロックとは公式ページの引用では
Gutenbergアドオンマーケットで唯一のものです！あなたの画像の上に完全にカスタマイズ可能なツールチップと無制限のアニメーションマーカーを配置し、より有益でインタラクティブなものにします
公式ページ（翻訳 by DeepL先生）
だそうです。
何だかすごそうですが、何だかよく分かりませんね。
実際にはこんな感じです。
「＋」マークのアイコンのところにマウスを重ねると吹き出しが現れます。
どういった設定があるのでしょうか。
さっそく、見ていきましょう！
ツールバーの設定
設定の前に、まずは画像をメディアライブラリから選択しましょう。
そして、画像にアイコンを重ねていくのですが、これは右のブロック設定からではなく、ツールバーで操作します。
ツールバーのこの部分を選択し、画像の上にマウスを重ねると、マウスが「＋」になります。
その状態で好きなところをクリックすると、そこにホットスポットと呼ばれるアイコンが設定されます。
と、同時に設定画面（Edit Point）が表示され、ホットスポットのブロック設定ができるようになります。
設定には３つタブがあります。
- Content
- Position
- Style
それぞれ解説していきます。
Hotspotブロック全体の設定もできますので、これは後述します。
Contentタブ
Title：吹き出しの一番上に表示されるタイトルを入力します。上記例で「Hotspotのタイトルです！」となっている箇所です。
リンクマーク：アイコンを押したときにリンクする場合にURLを入力します。「Open in New Tab」をオンにしておくと、リンク先が新しいタブで開かれます。
Popup Content, Plain Text or HTML：吹き出しの本文を入力します。普通のテキストか、HTMLで入力することができます。
Open by default：オンにすると、最初から吹き出しが表示された状態になっています。オフにすると、アイコンにマウスをホバーした時に吹き出しが表示されます。
Positionタブ
X Coord（％）：アイコン表示のX軸の位置を数値で設定します。ゼロが一番左、100が一番右です。
Y Coord（％）：アイコン表示のY軸の位置を数値で設定します。ゼロが一番上、100が一番下です。
Tooltip Position：吹き出しをアイコンに対してどの位置に表示するかを設定します。「Top（アイコンの上）」「Right（アイコンの右）」「Bottom（アイコンの下）」「Left（アイコンの左）」から選択します。
Popup Maximum Width, px：吹き出しの最大の横幅をpxで設定します。
Styleタブ
Point icon：アイコンを選択します。
Point Background：アイコンの背景色を設定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。
Icon Color：アイコンの色を設定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。
Hotspotのブロック設定
Hotspotのブロックを選択すると、エディタ右のブロック設定でHotspot全体の設定ができます。
設定にはタブが３つあります。
- General
- Style
- Advanced
それぞれ解説していきます。
Generalタブ
Image：画像を選択します。
Image Size：画像サイズを選択します。
Tooltip Interactivity：吹き出しを表示させるための動作を「Hover（マウスホバーしたら表示）」「Click（アイコンをクリックしたら表示）」「Click Multiple（アイコンをクリックしたら表示されるが、複数アイコンがある場合、他をクリックしても自動で消えない）」から選択します。
Point Icon：表示されるアイコンを選択します。
Point Size：アイコンの大きさを数値で設定します。
Point Spacing：アイコンの周りのスペース（いわゆるパディング）を数値で設定します。
Styleタブ
Point Background：アイコンの背景色を設定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。
Icon Color：アイコンの色を設定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。
Point Opacity：アイコンの透明度を設定します。ゼロが完全透明、100が完全不透明です。
Advancedタブ
Tooltip Theme：吹き出しの表示パターンを「Default」「Dark」「Light with border」「Google」「Dark with transparency」から選択します。それぞれこんなイメージです。
Display tooltip arrow：オンにすると、吹き出しに三角のいわゆる吹き出しっぽい部分が表示されます。オフだと三角が表示されず、ただの角丸四角になります。
Tooltip Animation：吹き出しの出方のアニメーションを「Shift Away（アイコンから押し出すように表示）」「Shift Toward（アイコンに向かってくるように表示）」「Fade（モヤっとその場に現れるように表示」「Scale（その場で大きくなるように表示）」「Perspective(パタンっと倒れるように表示」から選択します。
Point Animation：アイコンのアニメーションを「None（アニメ無し）」「Pulse（ピコピコする）」から選択します。
Point Appearance Animation：アイコンの現れ方のアニメーションを「None（アニメ無し）」「Zoom In（ブワっと大きくなる）」「Slide Down（上からなだれ落ちてくるように表示）」から選択します。
Point Animation On Hover：アイコンにホバーした際のアニメーションを「None」「Bounce」「Flash」「Pulse」「Rubber Band」「Shake」「Hand Shake」「Head Shake」「Swind」「Tada」「Wobble」「Jello」「Jack In The Box」から選択します。それぞれの動きは、Iconブロックの解説記事で実際の動きが確認できます。
まとめ
設定個所は以上です。
ギミックが面白いですが、使いどころが難しいかもしれません。