七鍵＠楽天

今回はＨＰに画像をはってみましょう。
画像というと少し分かりづらいですかね。
「絵」や「写真」をＨＰに載せてみよう！ってことです(〃⌒▽⌒)
とは言いましても・・・
ここ「楽天」ではとっても簡単に画像を載せることができますよね。
皆さん知ってるとは思いますが、念のため

管理画面から「画像倉庫（画像の登録管理）」という画面を開き、
まずあなたのパソコンに保存してあります写真や絵を「楽天」に保存します。
すると、「保存した画像の一覧」というところに保存した画像が出てきますよね。
それをクリックすると・・・

下記のHTMLを利用すると、ホームページにこの画像を表示できます。

<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key">

って画面になりますよね(〃⌒▽⌒)
この呪文を貼り付けると、あら不思議・・・



画像が表示されますよねー(￣▽￣人)

とまぁ、ここまでは「楽天」ヘルプページにも書いてあることです。
これだけでは芸が無いのでもう少しふみこんで、いろいろなことをやってみましょう(￣^￣*)

まずは、縦横比を変えてみましょう。

例）
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="300" height="100" alt="key">

表示結果）



見てのとおりですね(〃⌒▽⌒)
「width」が画像の幅、「height」が画像の高さを表しています。
もちろん、

<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="50" height="50" alt="key">

のように指定しますと、縮小表示されます。

表示結果）



もともとある画像を拡大したり縮小したり、縦横比を変えてみたりしたいときに便利ですよね(〃⌒▽⌒)

次は画像の周りを線で囲んでみましょう！

例）
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" border="1">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" border="7">

表示結果）





これも簡単ですよね(〃⌒▽⌒)
「border」に線の幅を指定します。
指定する数が大きければ大きいほど太い線になるってことです。

さて、ここまでは基本中の基本で、特にめずらしくもなんともないですよね。
基本だけじゃ簡単すぎてつまらないよ！って方のために、少しめずらしい裏技を紹介しましょう(〃⌒▽⌒)
でも、気をつけてください。
InternetExplorerというブラウザにしか対応していない裏技ですので（笑

例）
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: blur(direction=45, strength=20);">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: xray();">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: invert();">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: flipv();">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: fliph();">
<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: wave(freq=3,lightstrength=50,strength=5);">

表示結果）








あまり深く考えないで下さい（笑
こう記述したらこうなるんだ、くらいのちょっとした裏技でした(〃⌒▽⌒)

（もう少し詳しく知りたい方はこちらを参考にしてみて下さい）

どうでしたか？
今回は少し変わった画像の表示方法も紹介しました(〃⌒▽⌒)
まぁ、あくまで基本は「画像をそのまま表示する」ってことで覚えておきましょう！

さて、次回は・・・
ページに横線をひく方法を紹介します。

---

↑↑こんな線だけじゃつまらないので・・・

こんなかわいい下線も(〃⌒▽⌒)

紹介しますので楽しみにしておいて下さいね(ﾟ▽^*)ﾉ⌒☆