714165 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

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




シンプルなテンプレ3


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

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


サンプル3

 タイトル
画像1
 テキストバナー1
 テキストバナー2
 テキストバナー3
 テキストバナー4
画像2
画像3
 テキストバナー5
 テキストバナー6
 テキストバナー7
 テキストバナー8
画像4


コピペ用タグ

<!--テーブル 開始-->
<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">
<!--画像テーブル1 開始-->
<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> 画像1</TD></TR></TBODY></TABLE>
<!--画像テーブル1 終了-->
</td>
<td width="280" align="left" valign="bottom">
<!--テキスト用テーブル(上部) 開始-->
<table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#669966">
<tr> <td bordercolor="#999966"> テキストバナー1</td></tr>
<tr> <td bordercolor="#999966"> テキストバナー2</td></tr>
<tr> <td bordercolor="#999966"> テキストバナー3</td></tr>
<tr> <td bordercolor="#999966"> テキストバナー4</td></tr> </table>
<!--テキスト用テーブル(上部) 終了-->
</td><td width="120" valign="bottom">
<!--画像テーブル2 開始-->
<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> 画像2</TD></TR></TBODY></TABLE>
<!--画像テーブル2 終了-->
</td></tr><tr align="center" valign="top"><td width="120" valign="bottom">
<!--画像テーブル3 開始-->
<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>画像3</TD></TR></TBODY></TABLE>
<!--画像テーブル2 終了-->
</td><td width="280" align="left" valign="bottom">
<!--テキスト用テーブル(下部) 開始-->
<table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#669966">
<tr> <td bordercolor="#999966">  テキストバナー5</td></tr>
<tr> <td bordercolor="#999966">  テキストバナー6</td></tr>
<tr> <td bordercolor="#999966">  テキストバナー7</td></tr>
<tr> <td bordercolor="#999966">  テキストバナー8</td></tr> </table>
<!--テキスト用テーブル(下部) 終了-->
</td><td width="120" valign="bottom">
<!--画像テーブル4 開始-->
<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>画像4 </TD></TR></TBODY></TABLE>
<!--画像テーブル4 終了-->
</td></tr> </table>
<!--テーブル 終了-->


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

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

 カラーコード一覧

画像の入るタグ
<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> 
の解説

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、線種が実線
と指定してます。



使い方サンプル
注目 ダイエットサプリ  【αリポ酸vsカルニチン】
話題の3成分コエンザイムQ10・α(アルファ)リポ酸・L‐カルチニンが全て入った最強ダイエット...
αリポ酸100
4,179円 (税込)
L-カルニチン2ヶ月分で3850円 
GAPS アルファリポ酸プラスL-カルニチン
カルニチン2個セット 
L-カルニチン粒 
うわさのリポ酸!α(アルファ)リポ酸 プラチナ
αリポ酸プラチナ
(税込2,079円)

<!--テーブル 開始-->
<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">
<!--画像テーブル1 開始-->
<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> 画像1</TD></TR></TBODY></TABLE>
<!--画像テーブル1 終了-->
</td>
<td width="280" align="left" valign="bottom">
<!--テキスト用テーブル(上部) 開始-->
<table width="100%" border="1" cellpadding="2" cellspacing="4" bordercolor="#669966">
<tr> <td bordercolor="#999966"> テキストバナー1</td></tr>
<tr> <td bordercolor="#999966"> テキストバナー2</td></tr>
<tr> <td bordercolor="#999966"> テキストバナー3</td></tr>
<tr> <td bordercolor="#999966"> テキストバナー4</td></tr> </table>
<!--テキスト用テーブル(上部) 終了-->
</td><td width="120" valign="bottom">
<!--画像テーブル2 開始-->
<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> 画像2</TD></TR></TBODY></TABLE>
<!--画像テーブル2 終了-->
</td></tr></table>
<!--テーブル 終了-->


 タイトル
画像1
 テキストバナー1
 テキストバナー2
 テキストバナー3
 テキストバナー4
画像2
画像3
 テキストバナー5
 テキストバナー6
 テキストバナー7
 テキストバナー8
画像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> 画像1</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"> テキストバナー1</td></tr> <tr> <td bordercolor="#996600"> テキストバナー2</td></tr> <tr> <td bordercolor="#996600"> テキストバナー3</td></tr> <tr> <td bordercolor="#99600"> テキストバナー4</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"> テキストバナー5</td></tr> <tr> <td bordercolor="#996600"> テキストバナー6</td></tr> <tr> <td bordercolor="#996600"> テキストバナー7</td></tr> <tr> <td bordercolor="#996600"> テキストバナー8</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>


© Rakuten Group, Inc.