• 文字サイズ
解決済

楽天からヤフーへのコンバート 一部機能移行に失敗(CSS→inlineへの書き換え)。対処方法を教えてください。

  • 相談者:非公開
  • 2015/11/16 02:05
お世話になっております。「ゾンネの塩」三田村です。


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

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


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



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

楽天市場から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!イベント告知君」を出されるご予定はないのでしょうか?

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



  • 返信者:非公開
  • 2015/11/16 12:44
ECマスターズの田中です。

Yahoo!では、注意書きの通りCSSをインラインで書く必要があるため
CSSだけで実現させることはできません。
onmo………(省略)………
  • 返信者:非公開(質問者)
  • 2015/11/16 17:30
田中様、いつも確実なご回答ありがとうございます。

CSSもJavaScriptもYahoo!では排除されるのですね。

>マウスオーバー効果をもたせる………(省略)………
  • 返信者:非公開
  • 2015/11/16 18:59
ECマスターズの田中です。

はい、CSS inlinerの機能で、楽天のCSSをYahoo!に適用させることができますので、
まずはお試しいただきますよ………(省略)………
  • 返信者:非公開(質問者)
  • 2015/11/16 23:35
田中様、ありがとうございます。

ヤッタぁ!!……です。

田中さんのお墨付きをいただいて、俄然やる気が湧いてきました。

ネット店長としても、WE………(省略)………