CSSでマウスオーバー時に画像を半透明にする

画像にリンクを貼る際、マウスを画像に載せると色が薄くなることで「クリック」できるということをユーザーに伝えることができます。

【サンプル】

2014OGP

CSS

a:hover img{
opacity:0.7;
}

Lightning テーマを使ってカスタマイズする方

管理画面の上ナビゲーション VK ExUnit – CSSカスタマイズを選択
スクリーンショット 2016-04-20 12.38.39

CSSカスタマイズに上記のCSSをコピペします。

スクリーンショット 2016-04-20 12.45.23

 

この記事を書いた人

佐々木亜紀
佐々木亜紀
株式会社アドプラス 代表取締役 
千葉コワーキングスペース201オーナー

ウェブ制作10年、実店舗運営7年。
50万PV/月のメディア運営中
ワードプレス制作と実店舗運営の経験を生かしてワードプレスの基礎構築講座を主宰。

中小企業庁
ミラサポ専門家派遣事業登録専門家
千葉県産業振興センター登録専門家

動画で学ぶワードプレス講座

3年間対面のワードプレス講座をさせていただいた内容が動画講座に生まれ変わりました。

こんな方のためのワードプレス動画講座です

・依頼せず自分で作りたい
・コストを抑えてサイト運営したい
・ホームページとブログが一緒になっているサイトが必要
・整体院・個人サロン・士業など個人事業者
・これから事業を立ちあげる
・小さな会社のウェブ担当者

この動画で学ぶワードプレス講座は
専門知識を学ぶ動画ではありません。

たった40本の動画(合計4時間)の
サンプルサイトの作り方を見ながら
操作方法を覚えるだけです。