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

Question

お世話になっております。「ゾンネの塩」三田村です。


11/11の「いい買い物の日」をキッカケに、
今後は、Yahoo!サイトにも力を入れていきたいと思い、
月初から弊店楽天サイトよりあれこれコピーを始めています。

まだ、一部の商品しか反映できていませんが
今月中に何とか充実させたいと思っています。
(商品点数が少ないこともあり、自力で行っています）


さて、楽天とヤフーは似て非なるものも多く
(商品名のつけ方やSEOキーワードなどもルールが違いますし……)
今後もいろいろご質問させていただくかと思います。
その節は、改めてよろしくお願いいたします。



まずは本日、１点だけ質問させて下さい。

楽天市場からYahoo!ショッピングにコピーする際に
まったく反映されない項目があり、対処方法が分からず困っています。


弊店楽天サイトでは、
リンク付き画像にマウスポイントを置くと画像が明るく見える
「マウスオーバー効果」を自分でつけています。

下記のような簡単なHTML構文をRMS内に貼りつけただけです。






同様の効果をYahoo!ショッピングのサイトでも行いたいのですが
上記のHTMLを貼りつけてみたもののまったく効果がありませんでした。


上記の弊店楽天用HTMLをフリースペースに貼りつけてみましたら






……と変換されましたので、サイトで確認してみましたら、
不細工にも「上記の文字列の一部がテキスト表示」されており、
あわてて取り消しました。


そこで理由を調べてみましたら

「Yahoo!ストアマネージャー内のフリースペースでは、
　～の記述ができません。
　その為、CSSはHTMLの中にインラインで記述する必要があります。」

という注意書きがありました。
おそらく、これに該当するエラーだと思います。
（ただし、その指示の意味は分かりかねますが……）



そこでご質問です。

「CSSはHTMLの中にinlineで記述する必要がある」
……というYahoo!において
私が楽天で行っているような
「マウスオーバー効果」を出す方法を教えてください。

「リンク付き画像に透過効果を持たせる」という
シンプルなテクニックに絞って教えていただければ十分です。



〈備考〉
「マウスオーバー効果をつけたいと考える理由」

※弊店Yahoo!版トップページは
　楽天用PC版･スマホ版が混じったような画面構成になっています。
　一見にぎやかなのですが、
　「どこがリンク付き画像か、そうでないか」の見分けがつかず
　「お客様のクリックチャンスを逃しているよう」に感じております。

（参考:弊店サイトURL）
http://store.shopping.yahoo.co.jp/zonne-no-shio/


また先日はじめてYahoo!のセミナーに参加しましたところ
「トップページにもっともっと
　バナーやnewsletterなどのリンクを貼ってください」
……といわれました。
ますます「クリック→リンク先を開く」ことへの誘導が必要です。
上記の理由から「マウスオーバー効果」はぜひともつけたいと思います。


なお、私も大変お世話になっている「楽天イベント告知君」ですが、
今後「Yahoo!イベント告知君」を出されるご予定はないのでしょうか？

「毎月５のつく日はポイント５倍」など、
ポイントに対しての小まめなケアは、楽天同等以上だと思います。
現在のところ私は対処し切れていないので、
Yahoo!版もご検討いただけると大変ありがたいです。
                                            　
　　　　　　　　　　　　　　　　　　　　　　　　以上　
　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　三田村明彦

Answer

ECマスターズの田中です。

Yahoo!では、注意書きの通りCSSをインラインで書く必要があるため
CSSだけで実現させることはできません。
onmouseoverのようなJavaScriptを実行させる属性も、強制的に削除されてしまいます。

マウスオーバー効果をもたせる場合は、
Yahoo!トリプルにてバナーを表示させる部分のHTMLファイルを作成していただき、
タグで埋め込んでいただけますでしょうか。

Yahoo!版イベント告知君につきましては、
過去に他の会員の皆様からもご要望をいただいておりますので、
引き続き、提供に向けて検討を行わせていただきます。

Answer

田中様、いつも確実なご回答ありがとうございます。

CSSもJavaScriptもYahoo!では排除されるのですね。

>マウスオーバー効果をもたせる場合は、
>Yahoo!トリプルにてバナーを表示させる部分のHTMLファイルを作成していただき、
>タグで埋め込んでいただけますでしょうか。

まずは、まだ登録していない「Yahoo!トリプル」がゼヒモノ。
そして該当バナーのHTMLファイルをタグで埋め込む……でいけるのですね。
……さて、私にそのスキルとスピードがあるかどうか不安ですがトライしてみます。

BINGO！……の発見かどうか分かりませんが、
CSS inlinerというフリーソフトを見つけました。



説明（レビュー含む）によれば……

《楽天CSS》








……のようなHTML構文を、1クリックで
《Yahoo!で取り込み可能なinline》




……に変換してくれる……とあります。

まだ、試していませんが
私がやろうとしていることも、助けてくれる助っ人となってくれそうでしょうか？

これがほんとうならば、ほんとうにコンバートが楽にできそうです。

※実際にトライしてみればよい話ですが、
　htmlは必要に迫られて見よう見まねで対応しているだけの素人なので……

 プロの田中さんのご感想をお聞かせいただけるとありがたいです。

　私レベルのスキルでは膨大な時間がかかりそうでしたら……
　マウスオーバー効果は諦めて、SEOや商品点数・ポイント増やすなどで対応してみます。

いずれにしましても､楽天CSSをちょこちょこ触っても無力であることが分かりまして
無駄な努力時間をかけずに済みました。おおいに助かりました。
ありがとうございました。

よろしければCSS inlinerへのご感想をひとこといただければありがたいです。
（その後回答を持って解決した……に向かいたいと思います）。

Answer

ECマスターズの田中です。

はい、CSS inlinerの機能で、楽天のCSSをYahoo!に適用させることができますので、
まずはお試しいただきますようお願いします。

Answer

田中様、ありがとうございます。

ヤッタぁ!!……です。

田中さんのお墨付きをいただいて､俄然やる気が湧いてきました。

ネット店長としても､WEB担当者としても、
毎回私ごときの初心者の質問に丁寧にお答えいただいて感謝しております。


これにてめでたく｢解決した！」を押させていただきます。

今後ともよろしくお願い申し上げます。

ありがとうございました。

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

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