七鍵＠楽天

今日はＨＰに画像を貼る方法の復習をしましょう。
つまり「絵」や「写真」をＨＰに載せてみよう！ってことです(〃⌒▽⌒)
まずは、楽天専用の方法をご紹介します。

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

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

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

って画面になりますよね(〃⌒▽⌒)
この呪文を「日記」や「TOP自由欄」などの書き込み欄に貼り付けると、あら不思議・・・



画像が表示されますよねー(￣▽￣人)
覚えていますか？
この辺りは基本中の基本ですよね。
しっかりマスターしましょう(〃⌒▽⌒)

次に画像の倍率を変える方法を紹介します。

例）
<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」に線の幅を指定します。
指定する数が大きければ大きいほど太い線になるってことです。

プラス・・・
IE専用の裏技も紹介しておきます(〃⌒▽⌒)

例）
<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);">

表示結果）








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

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

最後のIE専用裏技は余計でしたが・・・
他の記述は基本中の基本です(〃⌒▽⌒)
しっかりマスターしましょう(￣▽￣人)