Yahoo!ショッピングでストア構築(無料版)
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>
