賢威7のマウスオーバーでコンテンツ画像を白くぼんやりさせる方法!

スクリーンショット 2016-02-07 14.54.11

 

今回は賢威7でコンテンツのマウスオーバー色を白くぼんやりさせる方法をご紹介します!

このコンテンツを白くぼんやりさせる設定は僕のサイトにもしてあるので、実際にマウスオーバーしていただいた方がどんな感じかわかりやすいと思います。

 

マウスオーバー色を白くぼんやりさせるとは?

しなみ僕のサイトのコンテンツ(画像)にマウスオーバーするとこんな感じに白くぼんやりします。

 

<マウスオーバーする前>

スクリーンショット 2016-02-07 14.57.37

<マウスオーバーした後>

スクリーンショット 2016-02-07 14.57.46

 

こんな感じで、マウスオーバーした後のコンテンツ画像部分が白くぼんやりなっているのがわかります。

この明度は設定で変更することができるので上の色よりも濃くすることも薄くすることも可能です。

 

マウスオーバー色を白くぼんやりさせる方法

ダッシュボード⇒外観⇒base.cssから設定していきます。

このbase.cssの最後の部分に以下のコードを書き込んで下さい。

スクリーンショット 2016-02-07 15.04.58

 

書き込むコードは以下の通りです。

 

マウスオーバー色の変更

/*–ヘッダー—*/
#header a:hover img {opacity: .6;}

/*–コンテンツ—*/
#main-contents a:hover img {opacity: .6;}

/*–パンくず—*/
#breadcrumbs a:hover img {opacity: .6;}

/*–グローバルメニュー—*/
#global-nav a:hover img {opacity: .6;}

/*–サイドバー2カラムの場合(2カラムの場合)—*/
#sidebar a:hover img {opacity: .6;}

/*–サブコンテンツエリア(3カラム時の左側)-*/
#sub-contents a:hover img {opacity: .6;}
/*–フッター—*/
#footer a:hover img {opacity: .6;}

 

この『opacity』の部分で透明度を変更できますので、調整して適切な具合にしてください。

実際に書き込むとこんな感じになります。

 

スクリーンショット 2016-02-07 15.08.57

 

簡単にコードを書き込むだけで設定できるので是非やってみてください。

賢威7カスタマイズ大図鑑へ戻る

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ