コピペで使える!Yahoo!ショッピング構築用トップページコード

ヤフートリプルを使わないトップページ構築法

Yahoo!ショッピングのサイト構築

久しぶりにYahoo!ショッピングのサイト構築をしました。

今回はヤフートリプル(Yahoo!ショッピング出店者向けの有料レンタルサーバ)を使わない素のストアクリエイターProの構築だったので、備忘録がてらコードを記しておきます。

PC用とSP用、2つのコードが必要なヤフートリプル

ヤフートリプル素の状態だと、トップページ用にPC用とSP用のコードが必要になります。レスポンシブではありません。

またコードを書く場所には文字制限があり、さらにそこにはナチュラルに変なCSSが効いています。

使えるCSSにも制限があり、普通にCSSを書いたのではヘンテコな見た目になってしまいます。

リセットCSSをかましてからコードを書きたいところですが、外部ファイルの読み込みは不可なので確認しながら書いてゆくしかありません。ちなみにCSSはすべてインラインで書くのが基本です!なんやこの仕様…。

Yahoo!ショッピングPC用トップページコード

W3C Validationで見るとめちゃくちゃなコードですが、Yahoo!ショッピングトップでは普通に見える書いた本人も不思議なコードです。

デモはこちら。
https://codepen.io/codenowa/full/NWjZEOX

<img src="https://via.placeholder.com/900x40.gif?text=bunner" width="100%" style="margin: 0 auto;width: 100%;display: block;margin-bottom: 20px;" alt="">

<a href="#"><img src="https://via.placeholder.com/900x300" width="100%" style="margin: 0 auto;width: 100%;display:block;margin-bottom: 20px;" alt=""></a>

<a href="#"><img src="https://via.placeholder.com/900x300" width="100%" style="margin: 0 auto;width: 100%;display:block;margin-bottom: 20px;" alt=""></a>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="width: 100%;">
 <tr>
  <td width="49%" align="center"><a href="#"><img src="https://via.placeholder.com/500x200" width="100%" style="margin: 0 auto;width: 100%;display:block;margin-bottom: 20px;" alt=""></a></td>
  <td width="2%" align="center"></td>
  <td width="49%" align="center"><a href="#"><img src="https://via.placeholder.com/500x200" width="100%" style="margin: 0 auto;width: 100%;display:block;margin-bottom: 20px;" alt=""></a></td>
 </tr>
</table>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="width: 100%;margin-bottom: 50px;">
 <tr>
  <td width="49%" align="center"><a href="#"><img src="https://via.placeholder.com/500x200" width="100%" style="margin: 0 auto;width: 100%;display:block;margin-bottom: 20px;" alt=""></a></td>
  <td width="2%" align="center"></td>
  <td width="49%" align="center"><a href="#"><img src="https://via.placeholder.com/500x200" width="100%" style="margin: 0 auto;width: 100%;display:block;margin-bottom: 20px;" alt=""></a></td>
 </tr>
</table>

<img src="https://via.placeholder.com/900x40.gif?text=bunner" width="100%" style="margin: 0 auto;width: 100%;display: block;margin-bottom: 20px;" alt="">

<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" style="width: 100%;margin-bottom: 50px;">

 <tr>
  <td width="24%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <br><br>
   <p>
    <font size="1"><b>商品タイトル</b></font>
   </p><br>
   <p align="left">
    <font size="1">
     商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる</font>
   </p>
   <a href=" #" style=" display: inline-block; margin-top: 10px; padding: 13px 20px 13px 20px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">詳細はこちら</a>
  </td>

  <td width="1%" align="center"></td>

  <td width="24%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <br><br>
   <p>
    <font size="1"><b>商品タイトル</b></font>
   </p><br>
   <p align="left">
    <font size="1">
     商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる</font>
   </p>
   <a href="#" style=" display: inline-block; margin-top: 10px; padding: 13px 20px 13px 20px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">詳細はこちら</a>
  </td>

  <td width="1%" align="center"></td>

  <td width="24%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <br><br>
   <p>
    <font size="1"><b>商品タイトル</b></font>
   </p><br>
   <p align="left">
    <font size="1">
     商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる</font>
   </p>
   <a href="#" style=" display: inline-block; margin-top: 10px; padding: 13px 20px 13px 20px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">詳細はこちら</a>
  </td>

  <td width="1%" align="center"></td>

  <td width="24%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <br><br>
   <p>
    <font size="1"><b>商品タイトル</b></font>
   </p><br>
   <p align="left">
    <font size="1">
     商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる</font>
   </p>
   <a href="#" style=" display: inline-block; margin-top: 10px; padding: 13px 20px 13px 20px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">詳細はこちら</a>
  </td>

 </tr>
</table>

<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" style="width: 100%;margin-bottom: 50px;">

 <tr>
  <td width="24%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <br><br>
   <p>
    <font size="1"><b>商品タイトル</b></font>
   </p><br>
   <p align="left">
    <font size="1">
     商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる</font>
   </p>
   <a href="#" style=" display: inline-block; margin-top: 10px; padding: 13px 20px 13px 20px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">詳細はこちら</a>
  </td>

  <td width="1%" align="center"></td>

  <td width="24%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <br><br>
   <p>
    <font size="1"><b>商品タイトル</b></font>
   </p><br>
   <p align="left">
    <font size="1">
     商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる</font>
   </p>
   <a href="#" style=" display: inline-block; margin-top: 10px; padding: 13px 20px 13px 20px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">詳細はこちら</a>
  </td>

  <td width="1%" align="center"></td>

  <td width="24%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <br><br>
   <p>
    <font size="1"><b>商品タイトル</b></font>
   </p><br>
   <p align="left">
    <font size="1">
     商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる</font>
   </p>
   <a href="#" style=" display: inline-block; margin-top: 10px; padding: 13px 20px 13px 20px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">詳細はこちら</a>
  </td>

  <td width="1%" align="center"></td>

  <td width="24%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <br><br>
   <p>
    <font size="1"><b>商品タイトル</b></font>
   </p><br>
   <p align="left">
    <font size="1">
     商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる商品詳細を入れる</font>
   </p>
   <a href="#" style=" display: inline-block; margin-top: 10px; padding: 13px 20px 13px 20px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">詳細はこちら</a>
  </td>

 </tr>
</table>

基本コピペでイケると思いますが、Yahoo!ショッピングはplaceholder.comを受け付けないので何らかの画像に差し替えて試してください。

Yahoo!ショッピングSP用トップページコード

こちらはPCとCSSの許容が違うのかわりと普通(でもない?)のコードが使えます。

デモはこちらです。
https://codepen.io/codenowa/full/gOWNBeN

<table width="100%" border="0" cellpadding="5">
 <tr>
  <td width="100%">
   <div style="color: #242424;font-size: 14px;font-weight: 800;letter-spacing: 2px;line-height: 170%;">▼ ショップのオススメ!</div>
   <hr>
  </td>
 </tr>
 <tr>
  <td>
   <a href="#">
    <img src="https://via.placeholder.com/750x300" width="100%" alt="" style="margin-bottom: 10px;"></a>
  </td>
 </tr>
 <tr>
  <td>
   <a href="#">
    <img src="https://via.placeholder.com/750x300" width="100%" alt="" style="margin-bottom: 10px;"></a>
  </td>
 </tr>
</table>

<br>

<table width="100%" border="0" cellpadding="5">
 <tr>
  <td width="100%">
   <div style="color: ;font-size: 14px;font-weight: 800;letter-spacing: 2px;line-height: 170%;">▼ 季節のオススメ!</div>
   <hr>
  </td>
 </tr>
 <tr>
  <td>
   <a href="#">
    <img src="https://via.placeholder.com/750x300" width="100%" alt="" style="margin-bottom: 10px;"></a>
  </td>
 </tr>
</table>

<br>

<table width="100%" border="0" cellpadding="5">
 <tr>
  <td width="100%">
   <div style="color: #242424;font-size: 14px;font-weight: 800;letter-spacing: 2px;line-height: 170%;">▼ 売れ筋はこちら!</div>
   <hr>
  </td>
 </tr>
</table>

<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0">
 <tr>
  <td width="50%" align="center"><a href="#">
    <img src="https://via.placeholder.com/400x200" width="100%" alt="" style="margin-bottom: 10px;"></a>
  </td>

  <td width="50%" align="center"><a href="#">
    <img src="https://via.placeholder.com/400x200" width="100%" alt="" style="margin-bottom: 10px;"></a>
  </td>

 </tr>

 <tr>
  <td width="50%" align="center"><a href="#">
    <img src="https://via.placeholder.com/400x200" width="100%" alt="" style="margin-bottom: 10px;"></a>
  </td>

  <td width="50%" align="center"><a href="#">
    <img src="https://via.placeholder.com/400x200" width="100%" alt="" style="margin-bottom: 10px;"></a>
  </td>

 </tr>
</table>

<br>

<table width="100%" border="0" cellpadding="5">
 <tr>
  <td width="100%">
   <div style="color: #242424;font-size: 14px;font-weight: 800;letter-spacing: 2px;line-height: 170%;">▼ 新商品はこちら!</div>
   <hr>
  </td>
 </tr>
</table>

<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0">
 <tr>
  <td width="33.33333%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <p style="font-size:10px;color: #242424;text-align: center">商品詳細を入れる商品詳細を入れる商品詳細を入れる</p>
   <a href="#" style=" display: inline-block; margin-top: 5px; padding: 8px 10px 10px 8px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">リンクボタン</a>
  </td>

  <td width="33.33333%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <p style="font-size:10px;color: #242424;text-align: center">商品詳細を入れる商品詳細を入れる商品詳細を入れる</p>
   <a href="#" style=" display: inline-block; margin-top: 5px; padding: 8px 10px 10px 8px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">リンクボタン</a>
  </td>

  <td width="33.33333%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <p style="font-size:10px;color: #242424;text-align: center">商品詳細を入れる商品詳細を入れる商品詳細を入れる</p>
   <a href="#" style=" display: inline-block; margin-top: 5px; padding: 8px 10px 10px 8px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">リンクボタン</a>
  </td>
 </tr>
</table>
<p></p>

<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" style="margin-bottom: 10px;">
 <tr>
  <td width="33.33333%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <p style="font-size:10px;color: #242424;text-align: center">商品詳細を入れる商品詳細を入れる商品詳細を入れる</p>
   <a href="#" style=" display: inline-block; margin-top: 5px; padding: 8px 10px 10px 8px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">リンクボタン</a>
  </td>

  <td width="33.33333%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <p style="font-size:10px;color: #242424;text-align: center">商品詳細を入れる商品詳細を入れる商品詳細を入れる</p>
   <a href="#" style=" display: inline-block; margin-top: 5px; padding: 8px 10px 10px 8px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">リンクボタン</a>
  </td>

  <td width="33.33333%" align="center"><a href="#"><img src="https://via.placeholder.com/300" width="100%" border="0"></a>
   <p style="font-size:10px;color: #242424;text-align: center">商品詳細を入れる商品詳細を入れる商品詳細を入れる</p>
   <a href="#" style=" display: inline-block; margin-top: 5px; padding: 8px 10px 10px 8px; color: #fff; background-color: #242424; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; ">リンクボタン</a>
  </td>
 </tr>
</table>

<br>
<a href="#" style="display: block;margin: 30px auto 20px;text-align: center;width: 50%;padding: 12px 20px 12px 20px;color: #fff; background-color: #242424; font-size: 13px; font-weight: 600; letter-spacing: 2px;text-decoration: none;">お店の全商品はこちら!</a>
<br>

カラーや文字サイズ、スペースなどは各自調整してください。

ではまた。