画像の貼り付け

100万ポイント山分け！1日5回検索で1ポイントもらえる

047791

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

「楽天広場」ですぐ使える
超初心者向けタグ講座

6.　画像の貼り付け

● 画像を登録する
● 画像を表示する
● 画像サイズの変更
● 画像タイトルの変更
● 画像をリンクボタンにする
● 画像をテーブルの壁紙にする

画像を表示するタグ
<img>

□■□ 　画像を登録する　 □■□

(注）画像の倉庫に登録できるのは、画像容量200Kバイト以下の画像に限られます。
また枚数も200枚までと制限があります。

□■□ 　画像を表示する　 □■□ 楽天のホームページでは画像の倉庫から画像を貼り付けます
使用タグ＝ <img> 　属性＝「src=」「width=」「height=」「alt=」

1.	楽天広場にログインして画像の倉庫に移動します
2.	画像を登録するで正しく画像が登録してあると、登録された画像の一覧が表示されます
3.	サムネイル画像をクリックするとオリジナルサイズの画像が表示されます
4.	画像の下に画像を表示するタグが表示されるのでページの編集画面にそのまま貼りつけます

■　編集画面	■　ページの表示
<IMG SRC= "http://plaza.rakuten.co.jp/img/user/ 00/00/0000000/000.jpg" width= "100" height= "70" alt= "サンプル">

「SRC=」で画像ファイルをurlで指定します
「width=」で画像の横幅をピクセルで指定します（%で指定することもできます）
「height=」で画像の高さをピクセルで指定します（%で指定することもできます）
「alt=」画像にカーソルをのせたとき表示されます。画像が表示されない場合は画像の代わりに表示されます。

□■□ 　画像のサイズ変更　 □■□ ホームページのデザインに合わせて「画像のサイズ」を調整します
使用タグ＝ <img> 　属性＝「src=」「width=」「height=」「alt=」

■　編集画面	■　ページの表示
<IMG SRC="http://plaza.rakuten.co.jp/img/user/00/00/0000000/000.jpg" width= "50" height= "35" alt="サンプル">

■　編集画面	■　ページの表示
<IMG SRC="http://plaza.rakuten.co.jp/img/user/00/00/0000000/000.jpg" width= "100" height= "70" alt="サンプル">

画像のサイズを変更するには、属性「width=」「height=」の値をそれぞれ変更します。
（注）このとき縦横の比率は変えないように注意してください。
比率を無視して変更すると

や

のようになってしまいます。

□■□ 　画像タイトルの変更　 □■□ 「画像タイトル」を変更します
使用タグ＝ <img> 　属性＝「src=」「width=」「height=」「alt=」

■　編集画面	■　ページの表示
<IMG SRC="http://plaza.rakuten.co.jp/img/user/00/00/0000000/000.jpg" width="100" height="70" alt= "サンプル" >

画像の倉庫から画像を貼り付けると画像の登録時「タイトル」欄に入力したものがこの部分に表示されます
この部分は、画像にカーソルを合わせたときに表示される他、何らかの理由で画像が表示されない場合、下の例のように画像が表示される箇所に表示されますサンプル

■　編集画面	■　ページの表示
<IMG SRC="http://plaza.rakuten.co.jp/img/user/00/00/0000000/000.jpg" width="100" height="70" alt= "この部分は画像にカーソルを合わせたときに表示されます。画像の倉庫のタイトル記入欄は20文字までの文字数制限がありましたがページで変更するとこんな長い文章でも大丈夫" >

画像にカーソルを合わせてみてください。属性「alt=」でページの説明文などを表示します

□■□ 　画像をリンクボタンにする　 □■□ 画像にリンクを貼ります　
使用タグ＝ <a><img> 　属性＝「href=」「src=」「width=」「height=」「alt=」

■　編集画面	■　ページの表示
<a href= http://plaza.rakuten.co.jp/mokopapa > <IMG SRC="http://plaza.rakuten.co.jp/img/user/00/00/0000000/000.jpg" width="100" height="70" alt="サンプル"> </a>

リンクのページで説明したタグを使用します。
青字の部分＝リンク先のアドレス
赤字の部分＝画像の倉庫の「画像を表示するタグ」
<a href=リンク先のアドレス>と</a>で画像の倉庫の「画像を表示するタグ」を囲めば画像をリンクボタンにできます
このページで使用している

もこの方法でリンクを貼っています

画像にリンクを貼ると画像に「枠」が表示されます。
枠を表示しない場合は「画像を表示するタグ」に、属性　「border=0」　を追加します。
ついでに、属性　「alt=」　に続く部分をリンク先の説明などに変えておくとカーソルを乗せたときに表示されて便利です

■　編集画面	■　ページの表示
<a href= http://plaza.rakuten.co.jp/mokopapa > <IMG SRC="http://plaza.rakuten.co.jp/img/user/00/00/0000000/000.jpg" width="100" height="70" alt="モコパパのページへGO！" border=0 > </a>

「border=0」を付け忘れるとすぐ下の「トップに戻るボタン」はこんな感じ…

□■□ 　画像をテーブルのバックにする　 □■□ 画像をテーブルの壁紙に使う
使用タグ＝ <table><tr><td> 　属性＝「background=」「width=」「height=」「alt=」

■　編集画面

■　ページの表示

「モコで～す」

テーブルのページで説明したタグを使用します。テーブルの壁紙に画像を使用することで、画像の上に文字を載せたり、テーブルを額縁のように使用することができます
画像の倉庫の「画像を表示するタグ」はこんな感じですね。
(例）
<IMG
SRC=" http://plaza.rakuten.co.jp/img/user/00/00/0000000/000.jpg " width="00" height="00" alt="○○">
ピンクで表示した部分を<td>タグの属性「background=」に使用します
青で表示した部分を<table>タグの属性「width=」「height=」に使用してテーブルと画像のサイズを同じにします