マウスオーバーの効果を追加

ここまでに紹介した内容で、ライトボックスの設定は完了。だが、プラスアルファとして「マウスオーバー」の効果について紹介しておきたいと思う。ギャラリーページなどでよく見かける、「マウスをのせた時だけ画像が変わる」というエフェクトだが、その効果を「Adobe Muse」では簡単に実装することができる。ここでは、サムネイルの画像がマウスをのせたときだけパッと鮮やかに変化するというエフェクトを試してみよう。

「通常」の時だけ画像が薄くなるよう、60％に不透明度を下げる

Museでは、画像の不透明度を「通常」、「ロールオーバー」、「マウスダウン」、「アクティブ」と、4つの状況に応じて変更することができる。今回設定するのは「通常」と「ロールオーバー(マウスが画像にのっている状態)」のふたつだ。まず、サムネイルの画像を選択し、ステートウィンドウで「通常」をクリックする。そして、上部にある「塗り」ウィンドウで不透明度を60％に下げる。次に、ステートウィンドウで「ロールオーバー」をクリックしてから、今度は不透明度を100％に打ち込む。これで「通常時＝60％」「ロールオーバー時＝100％」の2種類の不透明度をセットすることができた。

この時、サムネイル全てに同一の不透明度を適応したいので、最初にサムネイルを全選択しておくことがポイントだ。Shiftキーを押しながらクリックして選択していくと、複数の画像を選択できる。

ロールオーバーの設定が完了した状態

無事にエフェクトが効いているかプレビュー画面で早速確認してみると、ロールオーバー時だけ色がはっきりと表示されるように、無事に設定ができていた。これをもしタグ打ちで設定するとしたら、すべてのサムネイルについて不透明度を低くしたものを別途用意し、そして動作指示をするHTMLコードをあれこれと書き込み……といった作業が発生し、コーディング初心者にとっては相当な労力が必要となるはずだ。このような手間のかかるエフェクトを気軽に使うことができるのも、Adobe MuseでWeb制作をするメリットのひとつかもしれない。

今回作成したギャラリーページのテストサイトは、テストページで公開している。ライトボックスの動作や、マウスオーバー時の変化などについてぜひ確認してみてほしい。

サイト全体の完成はまだ先になるが、メインコンテンツであるギャラリーページが形になり、ほっとしている筆者。次回は「問い合わせフォーム」の設置にチャレンジしてみたいと思う。