500ピクセル幅のテンプレート３ | 買ってよかったお取り寄せ！美味しいもの食べよぅ♪

100万ポイント山分け！1日5回検索で1ポイントもらえる

734077

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

500ピクセル幅のテンプレート　３

シンプルなテンプレ3

width="500"（テーブル幅、500ピクセル）のテンプレート
楽天広場での使用では”自動改行無し”で使ってください！！

幅が500ピクセルのテーブルは楽天広場の場合、両サイドにサブ項目を表示させるレイアウトの設定をなさっていらっしゃる方に便利です。
・・・あんまりシンプルじゃないね＾＾；

サンプル3

　タイトル

画像１

テキストバナー１
テキストバナー２
テキストバナー３
テキストバナー４

画像２

画像３

テキストバナー５
テキストバナー６
テキストバナー７
テキストバナー８

画像４

コピペ用タグ

<table width="500" border="0" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3">

<table width="100%" border="2" cellpadding="2" cellspacing="4" bordercolor="#669966"> <tr> <td> タイトル </td></tr> </table>

</td></tr>
<tr align="center" valign="top"> <td width="120" valign="bottom">

<TABLE width=120 height=110 style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid"> <TBODY> <TR> <TD valign=middle align=center> 画像１ </TD></TR></TBODY></TABLE>

</td>
<td width="280" align="left" valign="bottom">

<table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#669966">
<tr> <td bordercolor="#999966">　テキストバナー１ </td></tr>
<tr> <td bordercolor="#999966">　テキストバナー２ </td></tr>
<tr> <td bordercolor="#999966">　テキストバナー３ </td></tr>
<tr> <td bordercolor="#999966">　テキストバナー４ </td></tr> </table>

</td><td width="120" valign="bottom">

<TABLE style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid" height=110 width=120> <TBODY> <TR> <TD valign=middle align=center> 画像２ </TD></TR></TBODY></TABLE>

</td></tr><tr align="center" valign="top"><td width="120" valign="bottom">

<TABLE style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid" height=110 width=120> <TBODY> <TR> <TD valign=middle align=center> 画像３ </TD></TR></TBODY></TABLE>

</td><td width="280" align="left" valign="bottom">

<table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#669966">
<tr> <td bordercolor="#999966">　　テキストバナー５ </td></tr>
<tr> <td bordercolor="#999966">　　テキストバナー６ </td></tr>
<tr> <td bordercolor="#999966">　　テキストバナー７ </td></tr>
<tr> <td bordercolor="#999966">　　テキストバナー８ </td></tr> </table>

</td><td width="120" valign="bottom">

<TABLE style="border-right: #669966 5px solid; border-top: #669966 1px solid; border-left: #669966 1px solid; border-bottom: #999966 5px solid" height=110 width=120> <TBODY> <TR> <TD valign=middle align=center>画像４ </TD></TR></TBODY></TABLE>

</td></tr> </table>

タグ解説

*　  のはコメントといってブラウザに表示されない記号です。
　ご自分でわかりやすいようにところどころに目印として使うと便利ですが、使いすぎるとその分文字数が増えますので注意してください。
慣れてきたら省いてしまいましょう。

*　テーブルの色を変える場合はそれぞれのカラーコードを変えればOKです。

⇒ カラーコード一覧

画像の入るタグ

の解説

style=" border-right: #669966 5px solid ; border-top: #669966 1px solid ; border-left: #669966 1px solid ; border-bottom: #999966 5px solid "
は、
テーブルの
右（right）の線を色が#669966、太さが5px、線種がsolid（実線）
上（top）の線を色が#669966、太さが1px、線種が実線
左（left）の線を色が#669966、太さが1px、線種が実線
下（bottom)の線を色が#999966、太さが5px、線種が実線
と指定してます。

使い方サンプル

注目　ダイエットサプリ　　【αリポ酸ｖｓカルニチン】

話題の3成分コエンザイムQ10・α（アルファ）リポ酸・L‐カルチニンが全て入った最強ダイエット...

αリポ酸100
4,179円 (税込)

L-カルニチン2ヶ月分で3850円
GAPS アルファリポ酸プラスL-カルニチン
カルニチン2個セット
L-カルニチン粒

αリポ酸プラチナ
(税込2,079円)

　タイトル

画像１

テキストバナー１
テキストバナー２
テキストバナー３
テキストバナー４

画像2

画像3

テキストバナー５
テキストバナー６
テキストバナー７
テキストバナー８

画像4

　<table width="500" border="0" cellpadding="2" cellspacing="2"> <tr> <td colspan="3"><table width="100%" border="2" cellpadding="2" cellspacing="4" bordercolor="#663300"> <tr> <td align="center"><strong><font color="#663300">　タイトル</font></strong></td></tr> </table></td></tr> <tr align="center" valign="top"> <td width="120" valign="bottom"><TABLE width=120 height=110 style="BORDER-RIGHT: #996633 5px solid; BORDER-TOP: #996633 1px solid; BORDER-LEFT: #663300 1px solid; BORDER-BOTTOM: #663300 5px solid"> <TBODY> <TR> <TD vAlign=middle align=center> 画像１</TD></TR></TBODY></TABLE></td><td width="280" align="left" valign="bottom"><table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#996633"> <tr> <td bordercolor="#996600">　テキストバナー１</td></tr> <tr> <td bordercolor="#996600">　テキストバナー２</td></tr> <tr> <td bordercolor="#996600">　テキストバナー３</td></tr> <tr> <td bordercolor="#99600">　テキストバナー４</td></tr> </table></td><td width="120" valign="bottom"><TABLE width=120 height=110 style="BORDER-RIGHT: #996633 5px solid; BORDER-TOP: #996633 1px solid; BORDER-LEFT: #663300 1px solid; BORDER-BOTTOM: #663300 5px solid"> <TBODY> <TR> <TD vAlign=middle align=center> 画像2</TD></TR></TBODY></TABLE></td></tr><tr align="center" valign="top"><td width="120" valign="bottom"><TABLE width=120 height=110 style="BORDER-RIGHT: #996633 5px solid; BORDER-TOP: #996633 1px solid; BORDER-LEFT: #663300 1px solid; BORDER-BOTTOM: #663300 5px solid"> <TBODY> <TR> <TD vAlign=middle align=center> 画像3</TD></TR></TBODY></TABLE></td><td width="280" align="left" valign="bottom"><table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#996600"> <tr> <td bordercolor="#996600">　テキストバナー５</td></tr> <tr> <td bordercolor="#996600">　テキストバナー６</td></tr> <tr> <td bordercolor="#996600">　テキストバナー７</td></tr> <tr> <td bordercolor="#996600">　テキストバナー８</td></tr> </table></td><td width="120" valign="bottom"><TABLE width=120 height=110 style="BORDER-RIGHT: #996633 5px solid; BORDER-TOP: #996633 1px solid; BORDER-LEFT: #663300 1px solid; BORDER-BOTTOM: #663300 5px solid"> <TBODY> <TR> <TD vAlign=middle align=center> 画像4</TD></TR></TBODY></TABLE></td></tr> </table>

ジャンル別一覧