WordPressテーマ「CUBEY (tcd023)」
 

【賢威6.1】マウスカーソルを当てた時(マウスオーバー)に画像の色を白っぽくするカスタマイズ

賢威マウスオーバーで画像を白くする
賢威6.1で画像リンクにマウスカーソルを当てた時(マウスオーバー時)に、画像が白っぽく、明るくなる方法をご紹介します。

特定エリア適用、特定ページ適用方法の2種類をご紹介します。

↓こちらの画像にマウスカーソルを当てると、画像が白っぽくなります。

賢威マウスオーバーリンク明るくする

画像に変化を持たせることで、クリック率が少し上がるかもしれません。とはいえ、クリック率の向上はコンテンツ内容が一番大切です。

あくまで画像エフェクトの補助としてお考えください。

画像リンクをマウスオーバーで明るく白っぽくカスタマイズ

賢威テンプレートカスタマイズ

ダッシュボード →外観 →テーマ編集 →design.css を選択。

どの場所でもOKですので、下記のcssコードを貼り付けて保存します。明るさの度合いは数値を変更するだけでOKです。

画像リンクをマウスオーバーで明るくする追加CSS

/*–ヘッダー—*/
#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;} 

エリア別にスタイルを反映させることも出来る

では今回のスタイルをコンテンツとパンくずだけに適用させたい場合は、該当するエリアのスタイルソースだけをdesign.cssに挿入します。

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

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

こんな感じです。

特定のページだけにこのスタイルを適用させたい場合

もしある1ページにだけこのスタイルを適用させたい場合は、design.cssは編集しません。

WordPress投稿画面テキストモードの記事編集内に、以下のコードを書き加えます。

<style type="text/css">
a:hover img {opacity: .6;} 
</style>

以上、画像リンクをマウスオーバー時に明るく・白っぽくする方法でした。

Pocket

WordPressテーマ「CUBEY (tcd023)」 
 

Sponsored Link

WordPressテーマ「BlogPress (TCD010)」

コメントを残す

このページの先頭へ