画像 - お取り寄せいいもの見つけたよ！

画像

画像を表示してみましょう
１　フォト管理（画像オプション）　　登録　および　ＨＴＭＬタグを取得
　　日記のタグ支援機能にある　楽天広場フォト　を有効に使いましょう
２　指定した場所に画像を表示する
３　画像の代わりのテキストを指定する
４　画像のサイズを指定する
５　画像の枠線を設定する
６　テキストとの並び方を指定する
７　画像にテキストを回りこませる
８　画像に対するテキストの回りこみを解除する
９　画像とテキストの間隔を指定する
１０　イメージマップはこちら

１　フォト管理（画像オプション）　登録　および　ＨＴＭＬタグを取得
　登録できる画像１枚あたりの容量は５００KBです。
　登録できる画像容量の上限は５０MBです。
　画像１枚あたりの容量によって登録できる枚数が変わってきます。
　登録できる枚数を比較してみましょう。

画像１枚の容量

登録できる枚数

０

２５００

５０００

　１０KB　なら

５　０００　枚

　２０KB　なら

２　５００　枚

　５０KB　なら

１　０００　枚

１００KB　なら

　　５００　枚

５００KB　なら

　　１００　枚

　画像の登録　および　ＨＴＭＬタグ　の取得は
　フォト管理　および　日記のタグ支援機能にある　楽天広場フォト　
　の２種類の方法があります
　ＨＴＭＬタグの取得は　日記のタグ支援機能にある　楽天広場フォト　
　を使うと便利です
　
１）フォト管理(画像オプション) の管理画面トップ
　　フォト一覧にある　新規フォト登録　をクリックする
アルバム９個

２）新規フォト登録　画像選択画面

　　登録フォト選択　　　　登録する画像を選択
　　登録フォトタイトル　　登録する画像名を入力
　　登録先のアルバム　　登録するアルバムを選択
　　登録コメント　　　　　　コメントを入力
登録画像選択画面

３）新規フォト登録直後にＨＴＭＬタグを取得

　　フォトを登録する　をクリックすると　登録後の画面が表示されます
　　縮小画像　と　ＨＴＭＬタグ　が表示されます
　　ボックス内の文字を全て選択　すると
　　ＨＴＭＬタグのコピー＆ペーストが簡単です（新規登録時のみ表示されます）
　　
登録画像登録後画面

　　表示されるＨＴＭＬタグは
　　<IMG SRC="画像アドレス" width="幅" height="高さ" alt="登録画像名">

４）登録した画像よりＨＴＭＬタグを取得

　　フォト一覧より　縮小画像をクリック　して使う画像を選択する
登録画像一覧画面

　　縮小画像をクリック　すると　選択した画像の編集画面　に
　　画像　と　ＨＴＭＬタグ　が表示されます
画像一覧より画像選択画面

　　表示されるＨＴＭＬタグは
　　<IMG SRC="画像アドレス" width="幅" height="高さ" alt="登録画像名">

５）日記の　タグ支援機能にある　楽天広場フォト　を使って画像を掲載する

（１）新しい画像を登録して使う
日記更新時　新しく登録して使う画像選択

　　画像を選択して　つぎへ　をクリックすると
　　本文編集欄に　ＨＴＭＬタグが自動挿入されます
日記更新時　新しく登録して使う画像登録後

　　表示されるＨＴＭＬタグは
　　<img src="画像アドレス" width="幅" height="高さ" alt="登録画像名" border="0">

　　border="0"　は枠線を表示しない指定

（２）登録されている画像を使う
　　使う画像を選択
日記　登録画像より画像選択画面

　　つぎへ　をクリックすると
　　本文編集欄に　ＨＴＭＬタグが自動挿入されます
日記　登録画像より画像選択後画面

　　表示されるＨＴＭＬタグは
　　<img src="画像アドレス" width="幅" height="高さ" alt="登録画像名" border="0">

　　border="0"　は枠線を表示しない指定

PAGE TOP▲

２　指定した場所に画像を表示する
ここで使うＨＴＭＬタグは

<img src="★">

★は画像アドレス
楽天広場で使う場合は　絶対ＵＲＬ（http://から始まるアドレス）で指定します。
楽天広場で使える画像のファイル形式は　GIF、JPEG、PNG　です。

PAGE TOP▲

３　画像の代わりのテキストを指定する
ここで使うＨＴＭＬタグは

<img src="★" alt="☆">

☆は画像の代わりのテキスト
画像を表示できないブラウザのために、
画像の変わりに表示されるテキストを指定します。
画像の読み込みに失敗した場合にもテキストが表示されます。

楽天広場の　フォト管理（画像オプション）では　
登録時に入力する　フォトタイトル　がこのテキストにあたります。　

PAGE TOP▲

４　画像のサイズを指定する
ここで使うＨＴＭＬタグは

<img src="★" width="●" height="○">

●は画像の幅で　ピクセル　または　%　で指定します。
○は画像の高さで　ピクセル　または　%　で指定します。
ピクセルでは画像のサイズを直接指定し、
パーセント（　%　）ではウインドウの大きさに対する割合で指定します。

属性を複数指定する場合は　半角のスペース　で区切ります。

１枚の画像を使って表示する大きさを変更してみましょう
使う画像の大きさ　幅　480px　　高さ　360px　　ファイルサイズ　20KB
ファイルサイズ２０KB

画像オプションに登録した画像のＨＴＭＬタグは下のように表示されます。
<IMG SRC="画像アドレス" width="480" height="360" alt="登録画像名">

幅（　width　）　と　高さ（　height　）　を変更してみましょう

幅と高さの比率を同じで縮小する例　（　１・２・３　とも同じ大きさ　）

１　幅　と　高さ　を指定　（　指定する数値によっては計算が面倒　）
　　左　　　幅　 width="240"　の場合　高さは　 height="180"
　　中央　幅　 width="150"　の場合　高さは　 height="113"
　　右　　　幅　 width="100"　の場合　高さは　 height="75"
幅　240　高さ　180

２　幅　を指定　（　高さは自動決定される　）
　　左　　　幅　 width="240"　のみ指定
　　中央　幅　 width="150"　のみ指定
　　右　　　幅　 width="100"　のみ指定
幅　240　のみ指定

３　高さ　を指定　（　幅は自動決定される　）
　　左　　　高さ　 height="180"　のみ指定
　　中央　高さ　 height="113"　のみ指定
　　右　　　高さ　 height="75"　　のみ指定
高さ　180　のみ指定

幅と高さの比率を変えて縮小する例

左　幅　 width="400"　　高さ　 height="150"　で変形
右　幅　 width="100"　　高さ　 height="150"　で変形
幅　400　高さ　150

幅と高さの比率を同じで拡大する例

拡大指定すると　画質　が落ちます
使う画像の大きさ　幅　200px　　高さ　150px　　ファイルサイズ　12KB
２００－７０％

幅　 width="600"　　高さ　 height="450"　に指定
幅　600　高さ　450

PAGE TOP▲

５　画像の枠線を設定する
ここで使うＨＴＭＬタグは

<img src="★" border="■">

■は枠線の太さでピクセルで指定します。
一般的には画像の周りに枠線は引かれません。
画像にリンクを設定するときにも
表示される枠線の有無や太さを指定することができます。

border="0"　の例	border="5"　の例	border="10"　の例

スタイルで枠線を設定することもできます
ここで使うＨＴＭＬタグは

<img style="border:▲ □ ■;" src="★">

▲は枠線幅で　サイズを表す数値+単位　を指定　　　例　10px

□は枠線色で　色名　または　カラーコ－ド　を指定

■は枠線種類で　枠線の種類　を指定
枠線の種類は以下の種類があります。

dotted	点線
dashed	破線
solid	実線
double	二重線
groove	線がへこんだように見える枠線
ridge	線が浮き上がったように見える枠線
inset	線より内側がへこんだように見える枠線
outset	線より内側が浮き上がったように見える枠線

枠線をスタイルで設定枠線幅　　　10px 枠線色　　　fuchsia 枠線種類　　dotted	枠線をスタイルで設定枠線幅　　　10px 枠線色　　　fuchsia 枠線種類　　dashed
枠線をスタイルで設定枠線幅　　　10px 枠線色　　　fuchsia 枠線種類　　solid	枠線をスタイルで設定枠線幅　　　10px 枠線色　　　fuchsia 枠線種類　　double
枠線をスタイルで設定枠線幅　　　10px 枠線色　　　fuchsia 枠線種類　　groove	枠線をスタイルで設定枠線幅　　　10px 枠線色　　　fuchsia 枠線種類　　ridge
枠線をスタイルで設定枠線幅　　　10px 枠線色　　　fuchsia 枠線種類　　inset	枠線をスタイルで設定枠線幅　　　10px 枠線色　　　fuchsia 枠線種類　　outset

PAGE TOP▲

６　テキストとの並び方を指定する
ここで使うＨＴＭＬタグは

<img src="★" align="□">表示するテキスト

□はtop、middle、bottom　で指定します。
top　　　　　画像の上部と周囲のテキストの上部を揃える
middle　　　画像の中央と周囲のテキストのベースラインを揃える
bottom　　画像の下部と周囲のテキストのベースラインを揃える（デフォルト）

align="top"　の例	align="middle"　の例	align="bottom"　の例
ｔｏｐ	middle	bottom

PAGE TOP▲

７　画像にテキストを回りこませる
ここで使うＨＴＭＬタグは

<img src="★" align="□">表示するテキスト

□はleft、right　で指定します。
left　　　　画像を左側に表示　テキストを右側に表示
right　　　画像を右側に表示　テキストを左側に表示
画像の高さ内にテキストが収まりきれなかった部分は
画像の下に表示されます。

align="left"	left　　　　画像を左側に表示　テキストを右側に表示 right　　　画像を右側に表示　テキストを左側に表示画像の高さ内にテキストが収まりきれなかった部分は画像の下に表示されます。
align="right"	left　　　　画像を左側に表示　テキストを右側に表示 right　　　画像を右側に表示　テキストを左側に表示画像の高さ内にテキストが収まりきれなかった部分は画像の下に表示されます。

PAGE TOP▲

８　画像に対するテキストの回りこみを解除する
ここで使うＨＴＭＬタグは

<br clear="▲">

▲はleft、right、all　で指定します。
left　　画像が左側（　<img src="★" align="left">　）の回り込みの解除
right　画像が右側（　<img src="★" align="right">　）の回り込みの解除
all　　　どちらの場合にも有効

align="left" <br clear="left">	left　　画像が左側（　<img src="★" align="left">　）の回り込みの解除ここから回り込みを解除テキストは画像の下に表示されます。
align="right" <br clear="right">	right　画像が右側（　<img src="★" align="right">　）の回り込みの解除ここから回り込みを解除テキストは画像の下に表示されます。

PAGE TOP▲

９　画像とテキストの間隔を指定する
ここで使うＨＴＭＬタグは

<img src="★" vspace="▼" hspace="▽">表示するテキスト

▼は画像に対する上下の余白（ピクセル）
▽は画像に対する左右の余白（ピクセル）

vspace="20"
align="left"

▼は画像に対する上下の余白（ピクセル）
▽は画像に対する左右の余白（ピクセル）
余白を含めた高さまで
画像の横に表示

ここから画像の下に表示

vspace="20"
align="left"
上下の余白に
色をつけています

▼は画像に対する上下の余白（ピクセル）
▽は画像に対する左右の余白（ピクセル）
　　　色は上下の余白
余白を含めた高さまで画像の横に表示

ここから画像の下に表示

hspace="50"
align="left"

▼は画像に対する上下の余白（ピクセル）
▽は画像に対する左右の余白（ピクセル）
画像の高さまで画像の横に表示

ここから画像の下に表示

hspace="50"
align="left"
左右の余白に
色をつけています

▼は画像に対する上下の余白（ピクセル）
▽は画像に対する左右の余白（ピクセル）
　　　色は左右の余白

画像の高さまで画像の横に表示

hspace="50"
vspace="20"
align="left"

▼は画像に対する上下の余白（ピクセル）
▽は画像に対する左右の余白（ピクセル）
画像の高さまで画像の横に表示

ここから画像の下に表示

hspace="50"
vspace="20"
align="left"
上下左右の余白に
色をつけています

▼は画像に対する上下の余白（ピクセル）
▽は画像に対する左右の余白（ピクセル）
　　　色は上下の余白
　　　色は左右の余白

余白を含めた高さまで画像の横に表示

PAGE TOP▲

かずさかの部屋TOPへ