メインコンテンツにスキップ

ガイド内の画像や動画を拡大表示したい

ガイド内に挿入いただいた画像や動画を少し大きくしたい場合以下2通りの方法がおすすめです。

◾️挿入先をガイドではなく、ポップアップガイドにする
→ポップアップガイドに挿入いただくことで表示が大きくなりますため見やすさが上がります!
また、ポップアップガイド自体のサイズ変更をしていただくことができるため任意のサイズでの表示が可能です

◾️埋め込みコードでサイズを調整する

動画(Youtube等)の埋め込みコードを貼り付けていただくか、さらに大きくしたい場合埋め込みコードを改変し、width: 100%等にしていただくことで拡大できます。

サンプルコード

<iframe src="https://www.youtube.com/embed/XXXXX?start=1" style="width: 100%; aspect-ratio: 16 / 9; display: block; margin: 0 auto;" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-search" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

◾️ホバーアクションにて拡大表示させる
→テキストガイド内に以下のCSSを書いていただくことで実装可能です

<style>.plainer-tippy-guide img {transition: transform 0.3s ease;}.plainer-tippy-guide img:hover { transform:scale(1.5);}</style>

ポイント:
デモを閲覧される方からはホバーすると拡大できることがわかりにくいため

※画像にカーソルを合わせると拡大されます※

上記のような注意書きを入れることをおすすめいたします!

また、※scale(1.2)の数値を変更することで、拡大率を調整できますので必要に応じて変更をしてみてください!

💡 バルーンガイドでの画像ホバー拡大について

上記のCSSをバルーン型ガイドで使用していた場合、過去のバージョンでは拡大した画像がバルーンの枠内に閉じ込められて正しく表示されないことがありました。

この問題は修正済みです。現在は、マウスを乗せた際に画像がバルーン枠外へ正しく拡大表示されます。

以前に設定して「表示がおかしい」と感じていた場合も、改めてご確認いただけますと正しく動作しているかと思います。

こちらの回答で解決しましたか?