オンマウスで変化するバナー

CMSにおいて通常バナーやロゴなどは画像で作ってしまいがち。

スライドショー・フォトギャラリーで作るとオンマウスで変化のあるものが作れます。

追加ギャラリーグリッド

でグリッドを追加します。

 

グリッドを選択画像の整理画像の追加

 

任意の画像を選択し画像の追加

 

 

ここで変化の設定が出来ますので先に

タイトル→オンマウスしたときに表示されます(無くてもOK)

説明→オンマウスしたときに表示されます(無くてもOK)

リンク先→クリック時のリンク先

 

入力したらOKします。

 

 

 

つづいて表示の設定を行います。

グリッドを選択設定

以下の内容に変更します。

 

画像の表示方法フィット

1

1

余白0

画像クリック時の動作リンク先へ移動

グリッドを選択スタイルの変更フレームなしを選択して

右のスタイルの編集をクリックします。

 

-スタイルの詳細の説明-

 

スキンの変更:

立体的に見せたり、テキストの配置を変更したり出来ます

 

色:

背景のマウスオーバー→オンマウス時のカラーを選択できます

境界線→フレームを設定した場合有効

タイトル→先に設定したタイトルのテキストカラー

テキスト→先に設定した説明のテキストカラー

 

フォント:

説明とタイトルのフォント→サイズの種類を設定

 

角のサイズ:

角丸の設定を行えます

 

境界線の設定:

境界線の幅の調整と影を設定できます

 

 

ここでは背景のマウスオーバーをイエローにします。

最後に位置とサイズを調整してプレビューで確認します。

バナーの上にカーソルを持ってくるとカラーの変化とテキストが浮かび上がります。

 

 

一般社団法人日本Wix振興プロジェクト