Yahoo!ショッピングのストア構築時にhoverを使う

Yahoo!ショッピングでストア構築(無料版)

YahooStore

Yahoo!のストアクリエイターProでストア構築をしました。
有料版のトリプルを使えば簡単に構築出来るようですが
月額3000円~と結構するようですね。
今回は無料版での構築でした。

無料版はCSSが使えない

なんとCSSが使えないとは。
HTMLでスタイルタグも使用不可。
どうやら無料版で装飾しようとすると
HTMLにインラインでCSSを書かないといけないようです。トホホ。

hover

マウスカーソルをバナーに重ねた際に見た目を変えたいなと、
hoverを入れたいのだけれどインラインでどうやるんだと少し悩みました。

ブラウザ(GoogleChrome)の「要素を検証」にて
ソース上に直接入力してアレコレ試してみると
onmouseoverやonmouseoutを使用することでなんとかなることがわかりました。

そこでストアエディタで入力して本番環境で試してみることに・・・

ストアエディタだとなぜか反映されない

困ったことに機能が反映されない。。
GoogleChromeでコードを見るとonmouseoverが消えてる。。なぜだ。
onmouseoutは残っている。
自動的に消されている?

半角スペースをなくすと動いた!

onmouseoverまわりの半角スペースを取ると動きました。
Yahoo!のストア構築でタグ関連で上手く機能しなかったら
とりあえず半角スペースを消してみようと思います。

ブラウザで上手くいった時のコードを見ていると
入力したものと若干違っていました。
勝手に変換されてるみたいです。
まあ、とりあえず動けばいいやということで深くは考えないことに。

メモとして今回動いたコード(勝手に変換済み)を載せておきます。
コピペして使用すればhoverが効いてると思います。

<a href="リンク先URL">
    <img src="画像URL" style=""onmouseover="this.style.opacity=0.7"onmouseout="this.style.opacity=1">
</a>

1 個のコメント

  • はじめまして、こんにちは!
    yahooストアでボタン色の変更をしたく方法を探していたところ、
    こちらのサイトにたどり着き、【Yahoo!ショッピングのストア構築時にhoverを使う】の記事のタグを使用させていただきてようやく動作しましたm(__)m ありがとうございます!

    ただ、グローバルナビ的なものに使用したかったので、3つのボタンをfloatさせて横並びにさせたのですが、firefoxなどでは上手く表示されるのですが、IE(6?)では右のボタンが次の段に落ちてしまいます。
    floatタグの話になってしまいましたが、、^^;
    プログラミングに関しては、まだ浅いのでご教示いただければと思いコメントさせていただきました。よろしくお願いいたします。

    3つの頭にを入れて
    最終にを入れてみたのですが意味がなかったようです、、。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です