コピペでOK！シリウスの画像をマウスオーバーで変化させてみよう

シリウスは、リンクしている画像やボタンにマウスをのせても、なにも変化がないので、リンク画像か、リンクボタンか、わかりにくいこともあるんじゃないでしょうか？

今回は、簡単にコピペで次世代型サイト作成システム「SIRIUS」のリンクしている画像やボタンを、マウスオーバーで変化させてわかりやすくしてみましょう。

SIRIUSでマウスオーバーしてみよう

CSSに追加記述するだけで、画像に白い半透明なマウスオーバーをかけることができます。

以下のボタンにマウスを置いてみると変化するのがわかります。

マウスを置くとボタンの画像が白く半透明になったのがわかりましたか？

これがマウスオーバーの効果です。

では、簡単なのでコピペしてやってみましょう。

シリウスでマウスオーバーする方法

あなたが、マウスオーバーさせたいサイトの管理画面を開いてください。

ホーム管理画面の上にある、メニューバーから、編集スタイルシートの編集を選択します。

スタイルシート編集ダイアログ画面が開きます。

デフォルトでは、style.css、commonstyles.css、tables.cssの3つがあると思うので、style.cssが選択されて開いていることを確認して、一番下に、以下のソースをコピペするだけの簡単な作業です。

a:hover img {
opacity: .8;
}

ソースを貼り付けたら、保存を押してプレビュー画面でマウスオーバーしているか確認してみてください。

CSSにたったこれだけ記述するだけでリンクしている画像が半透明になり、変化がつきましたね。簡単でしょ！？

色々試して、あなた好みにしてくださいね。