お世話になっております。「ゾンネの塩」三田村です。


11/11の「いい買い物の日」をキッカケに、
今後は、Yahoo!サイトにも力を入れていきたいと思い、
月初から弊店楽天サイトよりあれこれコピーを始めています。

まだ、一部の商品しか反映できていませんが
今月中に何とか充実させたいと思っています。
(商品点数が少ないこともあり、自力で行っています）


さて、楽天とヤフーは似て非なるものも多く
(商品名のつけ方やSEOキーワードなどもルールが違いますし……)
今後もいろいろご質問させていただくかと思います。
その節は、改めてよろしくお願いいたします。



まずは本日、１点だけ質問させて下さい。

楽天市場からYahoo!ショッピングにコピーする際に
まったく反映されない項目があり、対処方法が分からず困っています。


弊店楽天サイトでは、
リンク付き画像にマウスポイントを置くと画像が明るく見える
「マウスオーバー効果」を自分でつけています。

下記のような簡単なHTML構文をRMS内に貼りつけただけです。

<style type="text/css">
<!--
a:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
-->
</style>


同様の効果をYahoo!ショッピングのサイトでも行いたいのですが
上記のHTMLを貼りつけてみたもののまったく効果がありませんでした。


上記の弊店楽天用HTMLをフリースペースに貼りつけてみましたら

<style type="text/css">
<!--
a:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
-->
</style>


……と変換されましたので、サイトで確認してみましたら、
不細工にも「上記の文字列の一部がテキスト表示」されており、
あわてて取り消しました。


そこで理由を調べてみましたら

「Yahoo!ストアマネージャー内のフリースペースでは、
　<style>～</style>の記述ができません。
　その為、CSSはHTMLの中にインラインで記述する必要があります。」

という注意書きがありました。
おそらく、これに該当するエラーだと思います。
（ただし、その指示の意味は分かりかねますが……）



そこでご質問です。

「CSSはHTMLの中にinlineで記述する必要がある」
……というYahoo!において
私が楽天で行っているような
「マウスオーバー効果」を出す方法を教えてください。

「リンク付き画像に透過効果を持たせる」という
シンプルなテクニックに絞って教えていただければ十分です。



〈備考〉
「マウスオーバー効果をつけたいと考える理由」

※弊店Yahoo!版トップページは
　楽天用PC版･スマホ版が混じったような画面構成になっています。
　一見にぎやかなのですが、
　「どこがリンク付き画像か、そうでないか」の見分けがつかず
　「お客様のクリックチャンスを逃しているよう」に感じております。

（参考:弊店サイトURL）
http://store.shopping.yahoo.co.jp/SHOP-URL/


また先日はじめてYahoo!のセミナーに参加しましたところ
「トップページにもっともっと
　バナーやnewsletterなどのリンクを貼ってください」
……といわれました。
ますます「クリック→リンク先を開く」ことへの誘導が必要です。
上記の理由から「マウスオーバー効果」はぜひともつけたいと思います。


なお、私も大変お世話になっている「楽天イベント告知君」ですが、
今後「Yahoo!イベント告知君」を出されるご予定はないのでしょうか？

「毎月５のつく日はポイント５倍」など、
ポイントに対しての小まめなケアは、楽天同等以上だと思います。
現在のところ私は対処し切れていないので、
Yahoo!版もご検討いただけると大変ありがたいです。
　
　　　　　　　　　　　　　　　　　　　　　　　　以上　
　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　三田村明彦