【Studio】ホバーした時に画像が拡大する方法｜2種類を解説！
「Studioの〇〇の使い方を知りたい」などご要望がありましたら、
いいねを押した後にメッセージ欄を設けていますので、お気軽にご連絡ください！
送信中です
ホバーされた時に画像を拡大させる方法は、2パターンあります。
1つ目のパターンは、大枠と画像が共に拡大されるパターンです。
2つ目のパターンは、大枠の大きさは変わらず、中の画像だけが拡大されるパターンです。
本記事では両方のやり方について詳しく解説していきます。初心者でも簡単にできる内容になっているので、ぜひチャレンジしてみてください！
画像クリックで拡大表示させる方法については、以下の記事で解説しています。
Kajiポートフォリオサイト、制作実績・施工事例などの実績を載せるサイトには役立つデザインなので、ぜひ参考にしてみてください！
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安18万円〜】
集客に強い・SEO特化のホームページ制作サービス
「デザインは良いのに問い合わせが来ない」それはSEO対策がしっかりできていないことが原因かもしれません。 月間10万PVメディアを運営する現役SEOコンサルが設計するから、 GoogleにもAI（ChatGPT等）にも選ばれるホームページが作れます。
- AI×人間の分業でSEO対策が圧倒的に低価格
- 公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（テンプレート不使用）
- Studio制作で自社更新もカンタン
- ホームページ制作実績、累計50サイト以上
今なら制作費30,000円OFF（毎月3組限定）。ご相談・お見積りは無料です。
ホバーされた時に画像を拡大させる方法
繰り返しになりますが、ホバーされた時に画像を拡大させる方法は2つあります。
実装したいパターンをぜひ参考にしてみてください！
大枠と画像が一緒に拡大する手順
新エディタ画面
①画像を用意します。
②画像を選択した状態で右パネルを開き、条件付きスタイルを「ホバー」に変更します。
③テンプレートの中から「拡大」を選択します。
④下スクロールし、変形の中にある拡大・縮小の値を変更します。
Kaji100%が基準値になっており、値が100%より小さければ縮小、値が100%より大きくなれば拡大します！
旧エディタ画面
①画像を用意します。
②画像を選択した状態で、条件付きスタイルを「ホバー」に変更します。
③モーションを選択して、スケールの値を変更します。
Kaji1が基準値になっており、値が1より小さければ縮小、値が1より大きくなれば拡大します！
またスケールの部分がXとYに分かれていますが、使い分けについて説明します。
| 縮小・拡大の方向 | 値が1.5の場合 | |
|---|---|---|
| X | 横方向 | 画像が横に伸びる |
| Y | 縦方向 | 画像が縦に伸びる |
今回は、縦方向・横方向ともに画像を拡大させたいので、両方とも値を1.1に設定します。
④ではライブプレビューで確認してみましょう。
画像だけ拡大する手順
新エディタ画面
①画像を用意します。
②画像を選択した状態で、グループ化を行います。
Kaji画像を右クリックすれば、「グループ化」が出てくるはずです！
③親要素のボックスを選択した状態で、右パネルを開き、ボックス内にあるポジションのはみ出しを「非表示」に設定します。
④画像を選択した状態で右パネルを開き、条件付きスタイルを「ホバー」に変更します。
⑤テンプレートの中から「拡大」を選択します。
⑥下スクロールし、変形の中にある拡大・縮小の値を変更します。
Kaji100%が基準値になっており、値が100%より小さければ縮小、値が100%より大きくなれば拡大します！
旧エディタ画面
①画像を用意します。
②画像を選択した状態で、グループ化を行います。
③親要素のボックスを選択した状態で、はみ出しを「非表示」に設定します。
④画像を選択した状態で、条件付きスタイルを「ホバー」に変更します。
⑤モーションを選択して、スケールの値を変更します。
Kaji1が基準値になっており、値が1より小さければ縮小、値が1より大きくなれば拡大します！
またスケールの部分がXとYに分かれていますが、使い分けについて説明します。
| 縮小・拡大の方向 | 値が1.5の場合 | |
|---|---|---|
| X | 横方向 | 画像が横に伸びる |
| Y | 縦方向 | 画像が縦に伸びる |
今回は、縦方向・横方向ともに画像を拡大させたいので、両方とも値を1.1に設定します。
⑥ではライブプレビューで確認してみましょう。
Studioのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービスを運営しています。
サービスの強みを一言で表すなら、「集客に強いホームページが作れる」ということです。
- AI×人間の分業でSEO対策が圧倒的に安い
- SEO専門家による細部まで徹底したSEO対策（基本〜本格）
- はじめてのSEOガイド・公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（Webデザイナー専属）
- Studio製だから自社で簡単に更新できる
- ホームページ制作実績、累計50サイト以上
最安18万円〜とお手軽な価格ですが、徹底的にSEO対策されたホームページが作れます。なぜ安く作れるのか、その理由はシンプルで「人間が得意なことは人間、AIが得意なこと（リサーチなど）はAI」が担当しているためです。
オリジナルデザイン、かつ本格的に集客できるホームページがほしい方は、ぜひお気軽にご相談ください。
個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
※コメントは最大500文字、5回まで送信できます
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます