■画像背景２日記・色背景 | きなこの愉快な楽天日記枠＆miniﾀｸﾞ講座

■画像背景２　　日記・色背景

★画像を使った日記枠　NO２★

H２１年４月１２日　タグ修正済み

背景に色を使った日記枠に行く

NO１へいく

★背景１つ　固定スタイルソース
（枠の出ないタイプです）

そのままコピーペーストして使ってください。

<table border=0 background="http://から始まる画像アドレス" style="WIDTH:550px;height: 400px ;background-repeat:no-repeat;background-position:50% 50%;"><TR><TD> </TD></TR></table><a href="http://plaza.rakuten.co.jp/kinako24/">Designed by Kinako</a>

このタグでは、height=400px　と高さ指定をしていますが
文字数が多い場合は、赤表示の、数値を外してください。

Designed by Kinako

★日記枠の説明★

これの画像位置は、中央にきます。
画像によっては文字が見にくくなりますので
文字色や大きさ、段落を考えて で調整してください。

ただし、楽天の日記を書くページは タグを使わなくても
Enterキーを押すだけで、行間は出来ます。
日記枠を、ページで編集する時は＜自動改行（初心者向け）＞でして下さい。

 とは行を変えるタグです。

WIDTH=550px;
日記枠は出ませんが、ボックス全体の幅です。
background
自分の画像アドレスを書き込んでください。
background-repeat
画像を繰り返すかどうかの指示です。
no-repeat と書き込まれていますね。
ここでは、繰り返さないという指示をしています。

<: no-repeat> を取り外すと、指定した枠内に
同じ画像を繰り返した背景になります。

補足を参照してください。

《画像の位置》を簡単に変える事が出来ます。

中央に固定したい時	50% 50%	center center　　　でもよい。
右下に固定したい時	100% 100%	right bottom　　　でもよい。
右上に固定したい時	100% 0%	right top　　　　　でもよい。
左下に固定したい時	0% 100%	left bottom　　　　でもよい。
左上に固定したい時	0% 0%	left top　　　　　　でもよい。

★画像の大きさや、日記の文字数によっては
画像位置がきちんと出てきません。
それを頭に入れた上で、色々試してみてくださいね。

・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:・:--☆--:・:--☆--:・:・:

★背景１つ　固定スタイルソース
（枠のあるタイプです）

そのままコピーペーストして使ってください。
ただし、先に画像URLを用意して書き込んでからUPしてくださいね。

<table border=0 background="http://から始まる画像アドレス" style="WIDTH:550px;height: 400px ;border-width:5px;border-style:double;border-color:#9999FF;background-repeat:no-repeat;background-position:50% 50%;"><TR><TD> 

ここに日記の文章を書く

<TD></TR></table><a href="http://plaza.rakuten.co.jp/kinako24/">Designed by Kinako</a>

このタグでは、height=400px　と高さ指定をしていますが
文字数が多い場合は、赤表示の、数値を外してください。

Designed by Kinako

これの画像位置は、右下にきます。
先にも書きましたが right bottom と表示してある赤文字は
100% 100% と同じ意味です。

枠の無いタイプで書いたのと同じです。
＜％＞の位置
を替える事で、画像位置を変える事が出来ます。

★画像を使った日記枠　NO１★ で説明しました
枠のスタイルを好きなものに変更してください。

カラーサンプルサイト１

カラーサンプルサイト２

カラーコードを使う時は　#　からコピーして使ってくださいね。

日記枠の説明を参照してくださいね

 補足を参照してください。

★背景に色を使った日記枠★　　

＜Center＞タグを使ったタイプです。

NO１へいく

★枠のないタイプ★

そのままコピーペーストして使ってください。

< CENTER style="WIDTH:550px;background-color:背景色;font-weight:bold;color:文字色;font-size:16px;font-family:Comic Sans MS;" >

ここに日記の文章を書きます。

</center><a href="http://plaza.rakuten.co.jp/kinako24/">Designed by Kinako</a>

:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:

この日記枠は、枠無しタイプです。
背景のカラーのみ表示されます。

＜WIDTH=550＞で日記枠幅を決めてください。

＜font-family＞とは、書体を表します。
好きな書体に変えてください。


↑ のようになります。

。。。。。。。。。。。。。。。。。

この見本の日記枠のタグは、 ↓ の様になります。

<CENTER style="WIDTH:550px;background-color:#4f4f4f;font-weight:bold;color:#f0f0f0;font-size:16px;font-family:Comic Sans MS;"> ここに日記の文章を書きます。 </center><a href="http://plaza.rakuten.co.jp/kinako24/">Designed by Kinako</a>

これと同じ日記枠でも、色々なタグの表示があります。
ここでは、あえて、解りやすくしてあります。

★枠のあるタイプ★

そのままコピーペーストして使ってください。

<CENTER style="WIDTH:550px;background-color:好きな背景色; border-width:3px;border-style:好きな枠のスタイル;border-color:好きな枠の色; font-weight:bold;color:#996666;font-size:16px;font-family:Comic Sans MS;">

ここに日記の文章を書く

</center><a href="http://plaza.rakuten.co.jp/kinako24/">Designed by Kinako</a>

:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:・:--☆--:

枠無しと同じですが、赤い部分が増えました。

＜WIDTH:550px;＞日記枠幅です。
文字数を変えて好きな幅にして下さい。

＜border-style＞は 日記画像背景１ を参照してください。

枠無しタイプと同じで、＜font-family＞部分は
お好きな書体に変えてください。

枠無しタイプを参照してくださいね。

。。。。。。。。。。。。。。。。。。。。。

この見本の日記枠のタグは、 ↓ の様になります。

< center style="WIDTH:550px;background-color:#FFFF66;border-width:4px;border-style:dashed;border-color:#C4C400;font-weight:bold;color:#996666;font-size:10pt;font-family:Comic Sans MS;" >

このまま、コピーペーストして使えます。

</center><a href="http://plaza.rakuten.co.jp/kinako24/">Designed by Kinako</a>

これと同じ日記枠でも、色々なタグの表示があります。
ここでは、あえて、解りやすくしてあります

色んなフォント