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

SIRIUSマウスオーバーTOP

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

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

Sponsored Links

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

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

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

 

ボタン

 

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

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

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

 

 

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

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

HTML・CSSをさわる前に必ずバックアップしておきましょう。

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

 

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

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

 

 

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

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

ちなみにコピペしたソースに書いてある数字を小さくするほど透明度が増し、画像が薄くなります。

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

Sponsored Links

こちらの記事もよく読まれています

SNSでもご購読できます。

コメントを残す

*

CAPTCHA