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

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

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

追加＞ギャラリー＞グリッド

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

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

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

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

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

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

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

入力したらOKします。

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

グリッドを選択＞設定

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

画像の表示方法＝フィット

列＝1

行＝1

余白＝0

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

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

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

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

スキンの変更：

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

色：

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

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

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

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

フォント：

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

角のサイズ：

角丸の設定を行えます

境界線の設定：

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

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

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

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