SIRIUS(シリウス)で画像リンクにマウスオーバーするとす~と色が変わるやり方

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他

新サイトのご紹介

SIRIUSの大型バージョンアップ(ver1.5)によってシステム内部に様々な改良が加えられました。

これにより当サイトでご紹介している独自の機能拡張の一部が【新】SIRIUSテンプレートに標準で搭載されるようにもなってます。

反対に大型バージョンアップによって、これまでご紹介してきたTipsの中にはうまく作動しないものも出てきてます。

よって今後このサイトの更新はストップすることにしました。(サイトはしばらくは残しておきます)

これに伴い、【新】SIRIUSテンプレートに対応した『SIRIUSでホームページ作成』サイトを新規公開しました。

さらに【新】SIRIUSテンプレートをベースにしたカスタムテンプレート【Volar】も公開中です。(※SIRIUS購入の特典になります)

【Volar】はこれまで私がご紹介してきたTipsが最初から組み込まれたカスタムテンプレートであり、当サイトではご紹介してない新機能も追加搭載してます。

※当サイトの更新ストップにより、一部の記事は自動的に新サイトの同記事に自動転送されます。

画像リンクにマウスオーバーするとす~と色が変わるやり方

サンプル画像

 

このタイトル、イマイチパッとしませんね。
コピーセンスゼロのお手本みたい。。。。

 

そんなことはどうでもいいんですが、
画像リンクをリンクだとはっきり訪問者にわからせるための手段の一つに
画像の色を変えるというのがあります。

 

リンクのついた画像にマウスを乗せると通常は指マークに変わると思います。

 

しかしそれだけだとリンクだよということがはっきり伝わらず
そのままスルーされてしまう場合もありえます。

 

これが画像にマウスを乗せたときに指マークだけでなく、
画像の色が変化したならどうでしょう。

 

指マークだけの時よりは確実に目立つでしょうね。

 

クリックしてくれる確率も高まる、、、かもしれません。

いや、確実に高まりますよ。(^^ゞ

 

そんな色の変わるやり方をご紹介しますので、
ぜひあなたのサイトにも取り入れてみてください。

 

画像の色の変換方法についてはいくつかあるんですけど、
今回ご紹介するのは使っているサイトも多いと思われる
『透明度を変える』だけの簡単な方法です。

 

下の↓画像にマウスを乗せてみてください。
す~と色が薄くなりますでしょ?

 

サンプル画像

設定

カスタマイズの際の注意点として、元に戻せるようオリジナルファイルのコピーは必ず作ってください。

それでも不安な方はサイトのバックアップを事前に作成しておくと安心です。

 

「テンプレート」→「スタイルシート編集」を開き、
下の↓設定部分を探します。(上の方にあります)

 

コード

a img {
      border: none;
      text-decoration: none;
}

 

この下に以下のスタイルを追加します。

 

コード

a img:hover {
         opacity: 0.7;
         filter: alpha(opacity=70);
}

 

これの意味は
「リンクの付いた画像にマウスオンした際には
透明度を10(完全不透明)から0.7(30%だけ透明になる)に変更する」
というものです。

透明度を40%にしたい時は0.7を0.6に、70を60に変更します。

 

ただしこのままだとマウスを乗せたときに一気に色が変わってしまうので、
ほわ~と色をゆっくり変える設定を足してやりましょう。

 

先ほどの

a img {

      border: none;

      text-decoration: none;

}

 

に以下を加筆します。

-webkit-transition: 0.2s ease-in-out;

-moz-transition: 0.2s ease-in-out;

transition: 0.2s ease-in-out;

 

これの意味は 0.2秒かけて色を変化させるというモノです。

 

もっとゆっくりにしたい時は3ヵ所の0.2を全部0.5などに変えてやります。

 

最終的にはこんな↓感じになります。

 

コード

a img {
	border: none;
	text-decoration: none;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
a img:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

 

これでリンクの付いた画像すべてに適用されます。

 

-webkit-transition 以下の3行は(ほわ~と変わる動作)、インターネットエクスプローラー9以下では確か機能しなかったはずです。ただし透明度の変化はそのまま有効です。

 

以上です。

 


てっぺん