楽天ショップのスマホ用HTMLテンプレート作ってみた。

こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました!こちらからご確認できます。

楽天ショップのスマホHTMLテンプレート

こんにちは。定期券は改札の50m手前から用意しておくogaRia中村です。

楽天市場では8月31日にスーパーセールの開催も決まり、8月20日より告知も開始されました。楽天ショップな皆様は絶賛駆け込み準備中ではないでしょうか。

そこで!

わたくし、微力ながらお役に立つべく!!

スマートフォンページの構築に使えそうなHTMLテンプレートをご用意してみました~!
RMS「スマートフォン編集」機能で使えるHTMLで構築しましたので、ご安心をば!
スーパーセールに向けて少しでもスマホページをリッチにしてくださいませ~!

2パターン作ってみた。

楽天ショップのスマホページあるあるなレイアウトで2パターン作ってみました。

それぞれ、
 ・画像URLの書換え
 ・リンク先の書換え
 ・テキストの書換え
 ・価格の書換え
だけで完成します。

テンプレート1. 縦に伸びてく感じの

次のHTMLを上から下までまるっとコピーして頂き、赤文字になっている箇所を適宜お書き換えください。

<table width="100%" border="1" bordercolor="#ddd" cellpadding="8" cellspacing="0">
  <tr>
    <td width="100%" height="32" bgcolor="#000">
      <p><b><font size="2" color="#fff">新着商品(タイトル)</font></b></p>
    </td>
  </tr>

 <!--------↓1商品目↓-------->
  <tr>
    <td width="100%">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
      <tr>
        <td>
          <img src="画像のURL" width="120" height="120" />
        </td>
        <td>
          <a href="http://www.rakuten.co.jp">
            <b><font size="4">
            商品名などをここに入れます。この文字がリンクになります。
            </font></b>
          </a>
          <p><font size="2" color="#555">
            自由文自由文自由文自由文自由文自由文自由文
            自由文自由文自由文自由文自由文自由文自由文
          </font></p>
          <p><font size="3" color="#bf0000"><b>
          1,000円
          </b></font></p>
        </td>
      </tr>
    </table>
    </td>
  </tr>

 <!--------↓2商品目↓-------->
  <tr>
    <td width="100%">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
      <tr>
        <td>
          <img src="画像のURL" width="120" height="120" />
        </td>
        <td>
          <a href="http://www.rakuten.co.jp">
            <b><font size="4">
            商品名などをここに入れます。この文字がリンクになります。
            </font></b>
          </a>
          <p><font size="2" color="#555">
            自由文自由文自由文自由文自由文自由文自由文
            自由文自由文自由文自由文自由文自由文自由文
          </font></p>
          <p><font size="3" color="#bf0000"><b>
          1,000円
          </b></font></p>
        </td>
      </tr>
    </table>
    </td>
  </tr>

 <!--------↓3商品目↓-------->
  <tr>
    <td width="100%">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
      <tr>
        <td>
          <img src="画像のURL" width="120" height="120" />
        </td>
        <td>
          <a href="http://www.rakuten.co.jp">
            <b><font size="4">
            商品名などをここに入れます。この文字がリンクになります。
            </font></b>
          </a>
          <p><font size="2" color="#555">
            自由文自由文自由文自由文自由文自由文自由文
            自由文自由文自由文自由文自由文自由文自由文
          </font></p>
          <p><font size="3" color="#bf0000"><b>
          1,000円
          </b></font></p>
        </td>
      </tr>
    </table>
    </td>
  </tr>

 <!--------↓4商品目↓-------->
  <tr>
    <td width="100%">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
      <tr>
        <td>
          <img src="画像のURL" width="120" height="120" />
        </td>
        <td>
          <a href="http://www.rakuten.co.jp">
            <b><font size="4">
            商品名などをここに入れます。この文字がリンクになります。
            </font></b>
          </a>
          <p><font size="2" color="#555">
            自由文自由文自由文自由文自由文自由文自由文
            自由文自由文自由文自由文自由文自由文自由文
          </font></p>
          <p><font size="3" color="#bf0000"><b>
          1,000円
          </b></font></p>
        </td>
      </tr>
    </table>
    </td>


  </tr>
</table>

商品数を増やしたい場合は、『◯商品目』て書かれてるブロックのHTMLをまるっとコピーして、貼付けしていってくださいねー!

テンプレート2.横に3商品並ぶ感じの

次のHTMLを上から下までまるっとコピーして頂き、赤文字になっている箇所を適宜お書き換えください。

<table width="100%" border="1" bordercolor="#ddd" cellpadding="8" cellspacing="0">
  <tr>
    <td width="100%" height="32" bgcolor="#000" colspan="3">
      <p><b><font size="2" color="#fff">新着商品(タイトル)</font></b></p>
    </td>
  </tr>
  <tr>

   <!--------↓1商品目↓-------->
    <td width="33%">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
      <tr>
        <td>
          <img src="http://www.rakuten.co.jp/image.jpg" width="100%" />
          <a href="http://www.rakuten.co.jp">
            <p><b><font size="3">
            この文字がリンクになります。
            </font></b></p>
          </a>
          <p><font size="2" color="#555">
            自由文自由文自由文自由文自由文自由文自由文
            自由文自由文自由文自由文自由文自由文自由文
          </font></p>
          <p><font size="3" color="#bf0000"><b>
          1,000円
          </b></font></p>
        </td>
      </tr>
    </table>
    </td>

   <!--------↓2商品目↓-------->
    <td width="33%">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
      <tr>
        <td>
          <img src="http://www.rakuten.co.jp/image.jpg" width="100%" />
          <a href="http://www.rakuten.co.jp">
            <p><b><font size="3">
            この文字がリンクになります。
            </font></b></p>
          </a>
          <p><font size="2" color="#555">
            自由文自由文自由文自由文自由文自由文自由文
            自由文自由文自由文自由文自由文自由文自由文
          </font></p>
          <p><font size="3" color="#bf0000"><b>
          1,000円
          </b></font></p>
        </td>
      </tr>
    </table>
    </td>

   <!--------↓3商品目↓-------->
    <td width="33%">
    <table width="100%" border="0" cellpadding="8" cellspacing="0">
      <tr>
        <td>
          <img src="http://www.rakuten.co.jp/image.jpg" width="100%" />
          <a href="http://www.rakuten.co.jp">
            <p><b><font size="3">
            この文字がリンクになります。
            </font></b></p>
          </a>
          <p><font size="2" color="#555">
            自由文自由文自由文自由文自由文自由文自由文
            自由文自由文自由文自由文自由文自由文自由文
          </font></p>
          <p><font size="3" color="#bf0000"><b>
          1,000円
          </b></font></p>
        </td>
      </tr>
    </table>
    </td>

  </tr>
</table>

RMSの貼付け場所

ここ、ここ!ここですよ~

RMSメインメニュー
 > 1-2 デザイン設定
 > 2 スマートフォンデザイン設定
 > トップページ編集
 > トップ説明文(1) (※トップ説明文2も使えます)

HTML編集後にレイアウトが崩れてしまうようであれば、お手元で適宜ご修正ください。(※使っているHTMLタグは基本的なものだけなので、ご安心を!)

それでは皆様、良い夏、良いスーパーセールを…

  1. コメントはまだありません。

  1. トラックバックはまだありません。