れびうぶろぐ @楽天ブログ

れびうぶろぐ @楽天ブログ

04

この日記用のテンプレは外枠と中のパーツ部分に分かれています。
慣れるまでは使いにくいかもしれません。
パーツを追加していくことによって様々な使い方が出来ると思います。
パーツは複数組み合わせることが出来ます。
パーツは外枠の<!--1--><!--1-->という部分の
<!--1--> ここに追加します。 <!--1-->

複数追加できるように <!--1--><!--1-->というのを初めから5個用意しておきます。順番に番号を振ってあります。
もちろんパーツは1個だけでも良いし5個以上でも大丈夫です。
今はこの色しかないですがそのうち姉妹サイトでもカスタマイズした物が作れるようにしますね。

パーツは少しずつ追加していきたいと思います。パーツのリクエストも受け付けています。

このテンプレを使う際にはまずフリーページで
自動改行あり で1度試すことをおすすめします。
ちょっと特殊なんで初めてだとうまくいかない可能性がありますので^^;


一番下に作成した物の見た目のサンプルがあります。



外枠部分
そのままだと今見えてる周りの枠(ピンクで点線)になります。
出来れば文字を大きくして色を付けている部分以外はいじらないようにしてください。
パーツを加えたときにおかしくなる可能性があります。

周りの線を太くしたい場合は
赤色の2 の部分の値を大きくしてください。
線の種類を替えたい場合は こちら を参考に
紫色のdashed という所を替えてください。
線の色を替えたい場合は こちら の色見本を参考に
青色のffaaaa という所を替えてください。
文字の行間を替えたい場合は
ピンクの130 という所を替えてください。
背景色を替えたい場合は こちら の色見本を参考に
緑色のffffff という所を替えてください。

ここから下がソースです。
<table border="0" width="600" cellspacing="0"><tr><td><table border="0" bgcolor="#ffffff" width="600" cellspacing="0" cellpadding="0" style="border: 2 px dashed # ffaaaa ;line-height: 130 %"><tr><td align="left" bgcolor="# ffffff "><font size="2">
日記部分
</font></td></tr> <!--1--><!--1--><!--2--><!--2--><!--3--><!--3--><!--4--><!--4--><!--5--><!--5--> </table></td></tr><tr><td align="right"><font size="1">template作成 <a href="http://plaza.rakuten.co.jp/dododon/" target="_blank">ぴ~333</a></font></td></tr></table>
template作成  ぴ~333





パーツ部分

1
画像 画像 画像 画像 画像

1のソース
<tr><td><table border="0" width="600" cellspacing="3"><tbody><tr><td width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ffaaaa" align="center">画像
</td><td width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ffaaaa" align="center">画像
</td><td width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ffaaaa" align="center">画像
</td><td width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ffaaaa" align="center">画像
</td><td width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ffaaaa" align="center">画像
</td></tr></tbody></table></td></tr>



2
タイトル
文章部分

2のソース
<tr><td><table border="0" width="600" cellspacing="0"><tbody><tr><td align="center" bgcolor="#ffcccc"><font size="2">タイトル
</font></td></tr><tr><td bgcolor="#ffffff" align="left"><font size="2">文章部分
</font></td></tr></tbody></table></td></tr>

3
画像 画像 画像 画像 画像

3のソース <tr><td><table border="0" width="600" cellspacing="5" bgcolor="#ffcccc"><tbody><tr><td valign="middle" align="center" width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ff8888">画像
</td><td valign="middle" align="center" width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ff8888">画像
</td><td valign="middle" align="center" width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ff8888">画像
</td><td valign="middle" align="center" width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ff8888">画像
</td><td valign="middle" align="center" width="120" height="120" bgcolor="#ffffff" style="border:2px dashed #ff8888">画像
</td></tr></tbody></table></td></tr>


4

サイトマップなど

4のソース
<tr><td><table border="0" width="600" cellspacing="5" bgcolor="#ffcccc"><tbody><tr><td align="center" valign="middle"><table border="0" cellspacing="0" bgcolor="#ffffff" style="border:2px dashed #ff8888"><tbody><tr><td width="600" colspan="3" bgcolor="#ffeeee" align="center"><b><font size="2">サイトマップなど
</font></b></td></tr><tr><td width="200" align="left"><font size="2">☆
</font></td><td width="200" align="left"><font size="2">☆
</font></td><td width="200" align="left"><font size="2">☆
</font></td></tr><tr><td width="200" align="left"><font size="2">☆
</font></td><td width="200" align="left"><font size="2">☆
</font></td><td width="200" align="left"><font size="2">☆
</font></td></tr><tr><td width="200" align="left"><font size="2">☆
</font></td><td width="200" align="left"><font size="2">☆
</font></td><td width="200" align="left"><font size="2">☆
</font></td></tr><tr><td width="200" align="left"><font size="2">☆
</font></td><td width="200" align="left"><font size="2">☆
</font></td><td width="200" align="left"><font size="2">☆
</font></td></tr></tbody></table></td></tr></tbody></table></td></tr>


5

画像1 コメント1 画像2 コメント2
画像3
コメント3 画像4 コメント4
画像5
コメント5 画像6 コメント6

5のソース
<tr><td><table border="0" width="600" cellspacing="5" bgcolor="#ffcccc"><tbody><tr><td><table border="0" bgcolor="#ffffff" cellspacing="0" style="border:2px dashed #ff8888">
<tbody><tr><td width="100" height="100" bgcolor="#ffeeee" align="center">画像1
</td><td width="200" height="100" align="left"><font size="2">コメント1
</font></td><td width="100" height="100" bgcolor="#ffeeee" align="center">画像2
</td><td width="200" height="100" align="left"><font size="2">コメント2
</font></td></tr><tr><td width="100" height="100" bgcolor="#ffdddd" align="center">画像3
</td><td width="200" height="100" bgcolor="#ffeeee" align="left"><font size="2">コメント3
</font></td><td width="100" height="100" bgcolor="#ffdddd" align="center">画像4
</td><td width="200" height="100" bgcolor="#ffeeee" align="left"><font size="2">コメント4
</font></td></tr><tr><td width="100" height="100" bgcolor="#ffeeee" align="center">画像5
</td><td width="200" height="100" align="left"><font size="2">コメント5
</font></td><td width="100" height="100" bgcolor="#ffeeee" align="center">画像6
</td><td width="200" height="100" align="left"><font size="2">コメント6
</font></td></tr></tbody></table></td></tr></tbody></table></td></tr>



サンプル
こんな感じの物が出来たりします。

日記部分















画像1 コメント1 画像2 コメント2
画像3
コメント3 画像4 コメント4
画像5
コメント5 画像6 コメント6
サイトマップなど
template作成  ぴ~333



© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: