コピペで簡単！Yahooショッピング 新ストアデザインの看板コード

コピペでシンプル看板

新ストアデザインのシンプル看板コード

YahooショッピングのPCページが新ストアデザインになってしばらくたちます。

Yahooショッピングを巡回していると各ショップさんが様々なやり方で新ストアデザイン対策をやっていますね。

今回ご紹介するのは、YahooストアクリエイターProの新ストアデザインの看板コードです。

看板の場所

看板コードを記載する場所は、

ストアクリエイターPro > ストア構築 > 新ストアデザイン > 看板

です。

ここはサイトでいうヘッダー部分。ストアクリエイターProにサイズ指定の明記はないのですが、縦や横に長すぎると自動でスクロールが出たりしてダサくなるので、安全な大きさで設置してみたいと思います。

デモはこちらです。

実際のコード

難しいことは何もないのですが、今回は左右幅1050pxで設計しました。Flexboxなどで横並びにできればいいのですが、さすがにストアクリエイターProでモダンなコードは使えないので、古典的なfloatで横並びにしています。

<div style="width:1050px; margin:auto; overflow:hidden;">
 <div style="float:left;width:300px;">
  <a href="#"><img src="https://via.placeholder.com/300x80/" width="250px"></a>
 </div>

 <div style="float:left;width:400px;">
  <p style="margin-top: 10px; margin-left: 50px; font-size: 13px;">説明文を入れる説明文を入れる説明文を入れる<br>説明文を入れる説明文を入れる説明文を入れる<br>説明文を入れる説明文を入れる説明文を入れる</p>
 </div>

 <div style="float:left;width:300px;">
  <p style="margin-top: 30px; margin-left: 50px; font-size: 14px;"><a href="#">MENU</a> | <a href="#">MENU</a> | <a href="#">MENU</a></p>
 </div>
</div>

画像は例によってplaceholder.comを使っていますが、実際はご自身で制作した店舗ロゴなどに差し替えて使用してください。

ではまた。