テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.06.21

実践テンプレート!?

(12)

テーマ：アクセス向上(301)

カテゴリ：【テンプレート】

フレームやフォームなども楽天広場では使えませんので、少しずつ実践のテーブルのテンプレートの作り方を書いてみたいと思います。

手始めに最近の日記からフィルターを使ったものをひとつ作ってみたいと思います。
/////////////////////////////////////////////////////////////

まずはテンプレート基礎(1) の1-1テーブルを作ろう！を参考にテーブルをつくりましょう。

<table border>
<tr>
<td>
【本文内容】

</tr>
</table>

↓こんな感じですね（＾＾）

【本文内容】

これを横列４列、タテ行２行にしてみましょう

<table border>
<tr>
<td>
【画像1】
</td>
<td>
【画像2】

<td>
【画像3】
</td>
<td>
【画像4】

</tr>
<tr>
<td>
【コメント1】
</td>
<td>
【コメント2】
</td>
<td>
【コメント3】
</td>
<td>
【コメント4】
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

【画像1】	【画像2】	【画像3】	【画像4】
【コメント1】	【コメント2】	【コメント3】	【コメント4】

ここで、この枠（border）やそれぞれのセル（td）に色を付けたり、線の色、形を変えてテンプレートはできますが、せっかくですのでフィルターをつかってみましょう。

ボーダーには色を付けたくないので"0"を指定して、テーブルの幅を決め、文字の表示位置を決めます。影の部分の詰め物の幅を指定して、影の色と角度を指定しますと･･･

◆ソース◆

<tr>
<td style="width: 100px; padding: 10px; filter: shadow(color=#393939, direction=135);" width="100">
【画像1】
</td>
<td style="width: 100px; padding: 10px; filter: shadow(color=#393939, direction=135);" width="100">
【画像2】
</td>
<td style="width: 100px; padding: 10px; filter: shadow(color=#393939, direction=135);" width="100">
【画像3】
</td>
<td style="width: 100px; padding: 10px; filter: shadow(color=#393939, direction=135);" width="100">
【画像4】
</td>
</tr>
<tr>
<td width="100" valign="top">
【コメント1】
</td>
<td width="100" valign="top">
【コメント2】
</td>
<td width="100" valign="top">
【コメント3】
</td>
<td width="100" valign="top">
【コメント4】
</td>
</tr>
</table>

↓こんな感じですね（＾＾）


CASIO EX-Z50(EXZ50)	スタイリッシュな生活防水付デジタルカメラ”μ30DIGITAL	パナソニックデジタルカメラ LUMIXDMC-FX8-A(コンフォートブルー)536万画素CCD 2.5型液晶搭載...	キャノン IXY DIGITAL 55 [限定10台送料無料]

*****************************************************

【庶事所感】
時間がなかなか取れなくなると、まとまりの無い内容の日記になってしまって（；大汗）ダメですねぇ（＞＜）
時間のあるときには、こんな風に今まで日記に書いたタグやスタイルを使ってテンプレートを実際作ってみたいと思います。

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ