プレート文字回りこみ
| １時間で作ってみよう
|
| * |
| １Ｈテンプレート
|
| * |
| ご利用規約
|
| * |
| 若葉マークさんのミニテンプレ
|
| * |
| タイトル用テンプレ
|
| * |
| フリーページテンプレ
|
| * |
| 日記用テンプレ
|
| * |
| テンプレートライブラリ
|
| * |
| ツールライブラリ
|
| * |
| １時間で作った後は
|
| * |
|
メッセージを送る
|
| * |
自分でとった写真やイラストなどを入れたい場合のテンプレートです。写真の周りに文字が回りこみます。このままレース柄のテンプレートを使った場合の写真サイズは250ｐｘ四方の大きさがベストですが、 プレートの柄を変える ことも可能です（素材屋さんなどで配布しているプレートを入れてみてください）。また、ここで配布しているプレートを使う場合は「中央メインがた」のＨＰ形式で使うと、ＴＯＰページに表示される日記の最初の文章がかなり窮屈になりますので（100px位の幅しか余らないので）ご注意ください。
文字は短ければ右側だけに表示され、長く書けばこの見本のように、写真の下にまわりこみます。
日記のページは「フリーページのページの作成」で言うところの◎自動改行あり（初心者向け）と同じ様式になっているのでタグの間を空けないで下さい。形が崩れている場合はどこかが開いてしまっていると思います。
他の色は検討中です。リクエストがあれば作ります
使い方
まず「クイックテンプる！」をクリック、もう一度テンプる！マークが出ますからそれをクリックすると編集画面に行きます。
仮の画像を入れてありますので、画像をクリックしてください。下に「詳細」とかかれたウィンドウが出ますから、そこに入れたい画像のイメージタグを入れてください。楽天の画像の倉庫や画像オプションに登録している画像なら、表示されるＩＭＧタグをそのまま入れればＯＫです。
次にＩＭＧタグの中にstyle="float:left; margin:20px 30px 50px 25px;（←よく見えませんが、数値ごとに1半角スペースづつ空いています。）を入れてください。そのあと、更新ボタンを押せばＯＫです。
注意！ ここで配布しているレース模様のプレートを使って、画像のサイズも250px×250pxの物を使う場合にはmarginを変える必要はありませんが、他のプレートを使う、または画像サイズが違う場合にはmarginを変えないと画像の周りにきれいに文字が回りこみません。
marginの変え方
margin: 20px 30px 50px 25px というのはそれぞれ、
上のスペース 、 右のスペース 、 下のスペース 、 左のスペースを 意味しています。なので、文字がプレートの周りにうまく回りこむように各数値を変えてください。（20の倍数ぐらいの幅で大まかに変えてみて、最後に微調整するといいと思います。）
プレートの変え方
ソースの中の太字の部分の画像のＵＲＬを入れたい画像に変えるだけです。そのあと、プレートにあわせて画像のサイズを変えたり、マージンを変えたりしてみてください。（配布の際はご覧のピンクのレースが入っています。素材屋さんから借りる際は各配布サイトの規約に従ってお願いします。プレートを変えた場合のサンプルは こちら ）
style="background-image: url( http://plaza.rakuten.co.jp/img/user/81/01/6788101/134.png ); background-repeat: no-repeat;"
画像のサイズの変え方
楽天での登録画像はあらかじめwidthとheightが入っていると思いますが、widthの数値を変えてheightを削る、またはheightの数値を変えてwidthを削るという作業をすれば、画像の縦横比を変えずに画像のサイズだけ変えることが出来ます。
| 画像リンク コメント
|
画像リンク コメント
|
画像リンク コメント
|
画像リンク コメント
|
プレート付き日記用テンプレソース・ピンク
<TABLE style="border-width :1px;border-style
: solid;border-color : #ffb0c8;" cellspacing="10"
border=0><TR><TD><TABLE
border="0" cellspacing="0"
cellpadding="0" height="300"
style="background-image: url( http://plaza.rakuten.co.jp/img/user/81/01/6788101/134.png
); background-repeat: no-repeat;"><TR><TD
height=250 valign=top align=left><IMG
SRC="http://image.space.rakuten.co.jp/lg01/16/0000012316/72/img4ad5c7ba0ll0mo.png"
ALT="イチゴのジャンバースカート"
WIDTH="250" style="float:left; margin:20px 30px 50px 25px
;"><div style="font-size:14px;
" align=left>ここに好きなだけ文章を入れてください。文字は回りこみます。</div></TD></TR></TABLE><TABLE
align="center" border="0"><TR><TD
align="center" height=20><FONT
SIZE="2" COLOR="#ffb0c8">◆</FONT><FONT
SIZE="2" COLOR="#FFE580">◆</FONT><FONT
SIZE="2" COLOR="#FFF5CC">◆</FONT><FONT
SIZE="2" FACE="ＭＳ ゴシック">タイトル</FONT><FONT
SIZE="2" COLOR="#FFF5CC">◆</FONT><FONT
SIZE="2" COLOR="#FFE580">◆</FONT><FONT
SIZE="2" COLOR="#ffb0c8">◆</FONT></TD></TR><TR><TD
colspan="2" align="center"><TABLE><TR><TD
width="100" height="100"
align="center" style="border-width
: 1px;border-style : dashed;border-color
: #ffb0c8;" >画像リンク<div style="font-size:10px;color:#FF8980;">コメント</div></TD><TD
width=5></TD><TD width="100"
height="100" align="center"
style="border-width : 1px;border-style
: dashed;border-color : #ffb0c8;" >画像リンク<div
style="font-size:10px;color:#FF8980;">コメント</div></TD><TD
width=5></TD><TD width="100"
height="100" align="center"
style="border-width : 1px;border-style
: dashed;border-color : #ffb0c8;" >画像リンク<div
style="font-size:10px;color:#FF8980;">コメント</div></TD><TD
width=5></TD><TD width="100"
height="100" align="center"
style="border-width : 1px;border-style
: dashed;border-color : #ffb0c8;" >画像リンク<div
style="font-size:10px;color:#FF8980;">コメント</div></TD></TR></TABLE></TD></TR></TABLE><div
align="right"><A HREF="http://plaza.rakuten.co.jp/1hour/"
TARGET="_blank"><font size="1"
color=ff8080>designed by 1hアフィリ</font></A></div></TD></TR></TABLE>
