楽天ショップのスマホ用HTMLテンプレート作ってみた。
こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。
こんにちは。定期券は改札の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タグは基本的なものだけなので、ご安心を！）
それでは皆様、良い夏、良いスーパーセールを…
コメントはまだありません。