こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
Looking Out at the Sea / Yoshikazu TAKADA
どろっぷしっぴんぐ研究所では、5月20日に東京・池袋で開催するドロップシッピング攻略セミナーの募集を行っています。
□ 5/20（土）ドロップシッピング攻略セミナー第4回 集客編（コンテンツ作成、ブログ活用）
今回の募集は8名様限りと少人数での開催となります。
先着順となりますので受講を希望される方はお早めにお申込みください。
さて、今週の執筆者はショップできすぎくんカスタマイズでおなじみの岡田祐子さんです。
今回はショップできすぎくんでカーソルを乗せたときに画像を変化させる方法です。
やっぱりショップできすぎくんのカスタマイズは楽しいですね。
サンプルサイトを見るだけでも勉強になり面白いです。
興味のある方はぜひ試してみてください。
では、今週もお楽しみください。
ショップできすぎくんでカーソルを乗せたときに画像を変化させる方法
皆さま、こんばんは！
岡田です。
以前よりショップできすぎくんで作成したPC用のページについて不満に感じていたことがあります。
それは、「リンクが付いている画像の上にカーソルを乗せても、カーソルの形が手の形に変わるだけで
画像そのものが変化しない」こと。
カーソルの形が変わる上に画像が変化することで、リンクが付いていることがはっきりと閲覧者にアピールできます。
たったそれだけの事ですが、やはり閲覧者にとって使いやすい、分かりやすいページにするには工夫したいところです。
そこで、最近良く見かけるカーソルを乗せると画像が透けるように変化する手法、
あれをショップできすぎくんでも使えたらと思い、試してみましたので紹介します。
CSS opacity属性を使う
opacity属性とは透明度を指定するCSSです。半透明の画像や文字を表示することができます。
外部CSSに
「リンクが付いている画像の上にカーソルがのったら、その画像を指定した透明度（この場合は７０％）で表示する。」
を意味する以下のようなCSSを記述するだけで、ショップ内すべてに適応されます。
a:hover img{
opacity:0.7;
}
透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定します。
数字が小さいほど透明度が強くなり、0.0にすると完全な透明になります。
0.8～0.2まで4段階の変化度合いを確認できるよう、以下のページを用意しました。
□ CSS opacity属性を使い、カーソルが乗ったリンク付き画像の変化例
変化の様子を確認して、お好みで調整してみてください。
古いブラウザにも対応するには
opacity属性は2011年に新たに制定された属性なので、その前にリリースされたブラウザでは無視されてしまいます。
そのため、最新のブラウザと同様の表示を可能にするためには、ちょっとした工夫が必要です。
以下のようにIE用、Firefox（Mozilla系）用の記述を追加しておけば、ほぼ万全といえるでしょう。
a:hover img{
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
『filter: alpha(opacity=70);』IE用（opacity=70とは透明度が７０％を意味しopacity:0.7と同じ度合いを意味します。）
『-moz-opacity:0.7;』Firefox（Mozilla系）用
まとめ
以前なら今回ご紹介したように画像を変化させるためには、
「元画像と変化後の画像を用意し、JavaScriptか背景画像にしてCSSで入れ替える」など、手間と知識が必要でした。
でも、このopacity属性を使えば、画像編集ソフトもJavaScriptなど専門的な知識も必要ありません。
ぜひ挑戦してみてください。
ほかにもショップできすぎくんのカスタマイズに便利なCSSがありますので、またご紹介したいと思っています。
———————————————————–
【今週の執筆者】岡田祐子
（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。
□ぐるめ通販トライアルのブログ
———————————————————–
それでは、次号もお楽しみに。
※この記事は2017年5月4日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』
の一部を修正、改訂して掲載しています。
メルマガのご登録はこちら
ドロップシッピング十戒（pdf版）好評発売中！
どろっぷしっぴんぐ研究所、初のデジタルコンテンツ
pdf版『ドロップシッピング十戒』好評発売中です。
上記のリンク先ではドロップシッピング十戒の一覧や目次も掲載しています。
ご覧いただいてぜひご注文ください。
