ヤフーストアのスマホカテゴリページのフリースペースHTMLとCSS

NO IMAGE

ヤフーストア編集が久々過ぎて大混乱!?

ではないんですが、「え?なんでそんな表示になるの!?」

ということがあって、解決したのでメモっておきます。

パソコン用ページのフリースペースHTMLテンプレート

パソコン用のカテゴリページのフリースペースは、HTML書きたいホーダイですね。

ただ、PC用に(幅マックスの)画像を作ってしまうと、スマホ用も別で画像を作らないといけないので、当店の場合は兼用にしています。

大きさは800px×480pxとか、800px×400pxとかです。

こんな感じです。

パソコン用に表示させるときはセンターに配置します。

<div style="text-align:center;"><img src="バナー"></div>

スマホ用のHTML・CSSテンプレート

パソコン用のHTHLをコピペしたら、それで済むと思っていたら、、、

スマホで確認してびっくり。

半分右にはみ出しているじゃないですか。

ということで、画面内に収めるためのHTML・CSSテンプレート。

<img src="バナー" style="width:100%;" alt="バナー">

最初、style=”width=100%”と書いてしまって、全然修正できずに混乱しましたが、スタイルシート(CSS)は「=」ではなく「:」ですね。

HTML4のクセでついつい「=」を書いちゃいます(^^)