画像



楽天ブログ便利帳 - タグ帳 - 画像

画像の掲載方法は、『Ｑ＆Ａよくある質問』 をご覧下さい。
Q：画像登録（アップロード）ってどうやるの？
Q：画像（写真）を日記に貼るには？


画像を表示
タグ <img src="画像のアドレス">
こう書くと

<img src="画像のアドレス">
こうなる
「画像のアドレス」とは、次の様なものです。↓↓↓
http://image.space.rakuten.co.jp/lg01/76/0000032176/01/imgf125f42e86mno7.jpeg
「ＵＲＬ」とか、 「画像のソース」と言われる事もあります。

画像を中央に寄せる
タグ <center><img src="画像のアドレス"></center>
こう書くと

<center><img src="画像のアドレス"></center>

こうなる

画像を並べる
タグ <img src="画像のアドレス"><img src="画像のアドレス">
こう書くと

<img src="画像のアドレス"><img src="画像のアドレス">
こうなる

画像を左に寄せて、文字を回り込ませる
タグ <img src="画像のアドレス" align=left>
こう書くと

<img src="画像のアドレス" align=left>画像が左に寄せられます。
文章は通常通りに表示されます。
align=left　のタグを入れる事で、
画像が左に寄り、
文章は、画像の右側に回り込みます。

こうなる
　画像が左に寄せられます。
文章は通常通りに表示されます。
align=left　のタグを入れる事で、
画像が左に寄り、
文章は、画像の右側に回り込みます。

画像を右に寄せて、文字を回り込ませる
タグ <img src="画像のアドレス" align=right>
こう書くと

<img src="画像のアドレス" align=right>画像が右に寄せられます。
文章は通常通りに表示されます。
align=right　のタグを入れる事で、
画像が右に寄り、
文章は、画像の左側に回りこみます。

こうなる
　画像が右に寄せられます。
文章は通常通りに表示されます。
align=right　のタグを入れる事で、
画像が右に寄り、
文章は、画像の左側に回り込みます。

文字を回り込ませる
便利な小技回りこみを終了させる
タグ <img src="画像のアドレス" align=left>
<Br clear="left">
こう書くと

<img src="画像のアドレス" align=left> 画像が左に寄せられます。
文章は通常通りに表示されます。
画像が左に寄り、
文章は、画像の右側に回りこみます。
ここで回りこみを解除してみます。
<Br clear="left">
ここからは、回り込みが解除されました。
ここからは、通常の文章になります。

こうなる
　画像が左に寄せられます。
文章は通常通りに表示されます。
画像が左に寄り、
文章は、画像の右側に回りこみます。
ここで回りこみを解除してみます。
ここからは、回り込みが解除されました。
ここからは、通常の文章になります。
　 <img src="画像のアドレス" align=left>
の場合には、<Br clear="left"> を使用。

<img src="画像のアドレス" align=right>
の場合には、<Br clear="right"> を使用。

文字を回り込ませる
便利な小技画像と文章に余白を空ける
タグ <img src="画像のアドレス" align=left hspace="15" vspace="15">
こう書くと

<img src="画像のアドレス" align=left hspace="15" vspace="15">
　画像が左に寄せられます。
文章は通常通りに表示されます。
画像が左に寄り、
文章は、画像の右側に回りこみます。
画像に余白が出来ました。
ああああああああああ
いいいいいいいいいい
ううううううううううううう
ええええええええええ
おおおおおおおおおお
かかかかかかかかかか
きききききききききききき
くくくくくくくくくくくくくくくくく
けけけけけけけけけけけ
こここここここここここここ
ささささささささささささささ
ししししししししししししししし
すすすすすすすすすすすす
せせせせせせせせせせせ
上下に余白が出来ました。

こうなる

　画像が左に寄せられます。
文章は通常通りに表示されます。
画像が左に寄り、
文章は、画像の右側に回りこみます。
画像に余白が出来ました。
ああああああああああ
いいいいいいいいいい
ううううううううううううう
ええええええええええ
おおおおおおおおおお
かかかかかかかかかか
きききききききききききき
くくくくくくくくくくくくくくくくく
けけけけけけけけけけけ
こここここここここここここ
ささささささささささささささ
ししししししししししししししし
すすすすすすすすすすすす
せせせせせせせせせせせ
上下に余白が出来ました。
　 hspace="15"横の余白
vspace="15"縦の余白
数字が多いほど、余白の量が増える。
（ピクセル指定）

画像を左右交互に、文章は画像下中央。
タグ ■左に寄せる■
<Div Align="left"><TABLE width="60%"><TR><TD><center>画像のタグ
コメント</center></TD></TR></TABLE></Div>

■右に寄せる■
<Div Align="right"><TABLE width="60%"><TR><TD><center>画像のタグ
コメント</center></TD></TR></TABLE></Div>
こう書くと

こうなる
<Div Align="left"><TABLE width="60%"><TR><TD><center><img src="画像のアドレス">（改行）
クンクン</center></TD></TR></TABLE></Div>

クンクン

<Div Align="right"><TABLE width="60%"><TR><TD><center><img src="画像のアドレス">（改行）
「僕にも〜」 </center></TD></TR></TABLE></Div>

「僕にも〜」

<Div Align="left"><TABLE width="60%"><TR><TD><center><img src="画像のアドレス">（改行）
パクッ</center></TD></TR></TABLE></Div>

パクッ


『楽天ブログ』 で、このタグを作って、日記を書いてみました。→こちら
解説 実際には、写真を左右にズラしている枠は見えません。
ここでは、写真の位置が、どの様に調整されているか、
分かり易くする為、枠の線を見える様にしています。

<TABLE width="60%"><TR><TD>○</TD></TR></TABLE>
 赤い数字（ここでは60%）を変える事で、左右のズレを調整できます。
width="60%"　→　幅（ワイド）の広さを指定するタグ。
左に寄せる場合を例にすると、 少ない数ほど→枠が狭くなり→左に寄ります。

背景　これを使った日記を見る
タグ 【トップページ】、【フリーページ】
「自動改行なし（<BR>タグで指定） 」を選択
<TABLE background="画像のアドレス">
<TR>
<TD>
★
</TD>
</TR>
</TABLE>

【日記】
<TABLE background="画像のアドレス"><TR><TD>★</TD></TR></TABLE>

★の部分に「日記」などを書いて下さい。

背景を固定する　これを使った日記を見る
タグ 【トップページ】、【フリーページ】
「自動改行なし（<BR>タグで指定） 」を選択
<table BgColor="背景色" width="100%">
<TR>
<TD style="background-image: url(画像のアドレス);
background-attachment: fixed;
background-position:100% 100%;
background-repeat: no-repeat;">
★
</TD>
</TR>
</TABLE>

【日記】
<table BgColor="背景色" width="100%"><TR><TD style="background-image: url(画像のアドレス); background-attachment: fixed; background-position:100% 100%; background-repeat: no-repeat;">★</TD></TR></TABLE>

★の部分に「日記」などを書いて下さい。
　 ＜画像の位置＞
画像を固定したい位置によって、
background-position:100% 100%;
この部分の数字を変えて下さい。
■中央■
50% 50%
■左上■
0% 0%
■右上■
100% 0%
■左下■
0% 100%
■右下■
100% 100%

＜画像のアドレス＞
「画像のアドレス」とは、次の様なものです。↓↓↓
http://image.space.rakuten.co.jp/lg01/76/0000032176/01/imgf125f42e86mno7.jpeg
「ＵＲＬ」とか、 「画像のソース」と言われる事もあります。

＜背景色＞
背景の色の事です。
例えば、画像に合わせて、周りが「黒」の方が良い、といった場合がありますね。
そおいう時に、背景（全体）の色、画像の裏、地、の色を変える事を指しています。
色の番号については、【色見本帳】を見て下さい。
この中から色を選んで、その「#d5eaff」といった番号をコピーして使って下さい。
例：<table BgColor="#d5eaff" width="100%">

※注意
＜質問掲示板の回答より抜粋＞

「背景を固定する」と言うのは、【フリーページ】や【日記】のスペースの、
「右下」なり「中央」なりに、「画像を表示させる」という意味です。
よく、ページを上下にスクロールしても、 画像が中央に表示されたまま、
というページがありますね。 ああいう感じにする為のタグではありません。 　
ちなみに、ブログでは、これは出来ません。 楽天に限らず、どのブログでも同じです。
ただし、似たような事はできます。
【フリーページ】ならば、【フリーページ】の編集できる部分（書いた物が表示される部分）
に、「スクロールして読ませるスペース」を作ります。
この「スクロールされる範囲の中」で、背景を固定表示させる、という方法です。
日記が縦長にならない様に、スクロールを付けている日記を見た事ありますか？
このスクロールの中で、画像を固定表示させる、という方法です。
かなり複雑なタグになりますが、もし、この様なものをイメージされているのだとしたら、
まったく別のタグになりますので、ご了承下さい。 　
この方法は、
ページ全体のスクロールの中に、更にスクロールのスペースを作る、
という事になります。
ほんどの人は（読みにくい）と感じるようで、私もそう感じます。
が、しかし（笑）、
もし、ご希望でしたら、お知らせ下さい。ご紹介させて頂きます。
　 　
楽天ブログ便利帳 - タグ帳 - 画像