埋め込みランチャー生成④ホバーエフェクト追加！ーGoogleサイトで作るグループウェア(188)ー

🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！

この記事を読んで欲しい方

企業DXや学校DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方
AIの利用に悩んでいる方

①ホバーエフェクト追加！

みなさんこんにちは！
　前回に引き続いて、埋め込みランチャージェネレータの機能拡張を行っています。
　今回は、やはりアイコンにホバーエフェクトをつけたいなということで、挑戦しました。
ホバーエフェクトとは、ボタンや画像、リンクなどにマウスオーバー（何らかの要素の上にマウスカーソルを重ねること）したときに、色や形などに変化をもたらすテクニックです。

アイコンの発光エフェクト例

Embedded Launcher

②ホバーエフェクト設定

　　ホバーエフェクト設定は、レイアウト設定の一番下に組み込んであります。

ホバーエフェクトの種類

　現在、ホバーエフェクトの種類は５つです。
マウスを重ねるとアイコンが大きくなる【拡大】、
　画像が明るくなる【明るく】、
　枠線が表示される【枠線表示】、
　アイコンがすこし回転する【回転】、
　アイコンの周りが光る【発光】です。
　また、枠線表示と発光は、色の指定が可能です。

拡大（kindkeアイコン)

明るく(claudeアイコン)

枠線表示(cloudetopアイコン)

枠線表示の色指定

回転(perplexityアイコン)

発光(kindleアイコン)

発光表示の色指定

③おわりに

　いかがでしたでしょうか？
　アイコンにホバーエフェクトのような動きや色をつけることで、楽しいランチャーができました。
　今後も、気がついたら機能追加をしていきたいと思います。

P.S 圧縮で画像がゆがむバグ修正しました

　画像圧縮でアスペクト比が1:1ではない画像が歪む問題は、修正しました。