HTMLタグと画像のURL | じゃすとどぅーいっと!

じゃすとどぅーいっと!

ヨノナカニヒトノクルコソウレシケレトハイフモノノオマエデハナシ





まずは、HTMLタグについてです。



画像ボタンなどを使って貼り付けた画像を、HTMLタグで表示させると

<a href="http://stat.ameba.jp/user_images/20090726/18/

jekyll-noah/0e/b4/j/o0380010010220762397.jpg">

<img height="58" alt="じゃすとどぅーいっと!"

src="http://stat.ameba.jp/user_images/20090726/18/

jekyll-noah/0e/b4/j/t02200058_0380010010220762397.jpg"

width="220" border="0" /></a>

↑のような感じに表示されます。



上記のタグを、最初の部分から順に説明していきます。





<a href="アドレス">

</a>

リンクさせる時に使うタグです。


アドレス部分が、サイト等のURLなら、そのページへ飛びます。

画像のURLなら、画像が拡大表示されます。 ※URLによってされない場合もあります


画像をクリックさせたくない場合は、この部分を消してください。

※右クリックが出来なくなる訳ではありません


アドレスの前後には半角の " が必須です。

リンクさせたい文字や画像の最後に </a> をつけるのを忘れないように。





<a href="アドレス" target="_blank">

</a>

リンク先を表示するウインドウについての設定です。


target="_blank"がある場合は、リンク先が新しいウインドウで開きます。

ない場合は同じウインドウで開く事になります。


"アドレス"target="_blank" の間には半角のスペースを入れてください。









<img src="アドレス">

画像を表示するタグです。


画像を表示させたいだけなら、この部分だけで十分だと思います。


アドレスの前後には半角の " が必須です。






<img height="画像の高さ"

alt="カーソルを合わせた時に表示させたい言葉"

src="アドレス" width="画像の幅" border="0" />

表示する画像についての細かい設定です。


height="画像の高さ"width="画像の幅" については、原寸大で貼り付けている場合は表示されない事もあります。

要は、原寸大で貼り付けている場合は必要ありません。


自由に設定する事は出来ますが、表示される画像が汚くなってしまう場合もあるので、あまりオススメはしません。



alt="カーソルを合わせた時に表示させたい言葉" は、特に必要なければ消してしまっても大丈夫です。


画像の名前や、リンク先のタイトルを表示させたい場合に使ってください。



border="0" は画像の周りに付く境界線を消すためのものです。

" "内の数字が0以外の場合、画像の周囲に境界線が付きます。


ただ、自分としてはこの部分があって困ったとか、なくて困ったと言うような経験はしてないので、特に気にしなくてもいいような気がします。

念のため、意味くらいは覚えておいてください。









次に、画像のURLについてです。


【画像のURLの見かた】

①画像を右クリックすると、下の方に プロパティ と言うのがあります。

②そこをクリックすると、 アドレス(URL) と書かれた部分があると思います。

③その横にある http://~ が、その画像のアドレスです。




サムネイルサイズと原寸大の画像では、URLが違います。

その違いについて解説します。


≪サムネイルサイズの画像のURL≫


■2009年3月3日以前にアップした画像の場合

http://stat.ameba.jp/user_images/00/ac/10112632648_s.jpg


■2009年3月3日以降にアップした画像の場合

http://stat.ameba.jp/user_images/20090726/18/

             jekyll-noah/0e/b4/j/t02200058_0380010010220762397.jpg



≪原寸大サイズの画像のURL≫


■2009年3月3日以前にアップした画像の場合

http://stat.ameba.jp/user_images/00/ac/10112632648.jpg


■2009年3月3日以降にアップした画像の場合

http://stat.ameba.jp/user_images/20090726/18/

                   jekyll-noah/0e/b4/j/o0380010010220762397.jpg



2009年3月3日以前にアップした画像については _s の部分を消すと、原寸大のサイズで表示されるようになります。


2009年3月3日以降にアップした画像については t ~ _ の部分を o に書き換えると原寸大のサイズで表示されるようになります。





質問などありましたら、お気軽にコメやメッセでどうぞ。

間違いがあった場合、ご指摘いただけると助かります。



【目次】  ←クリックで飛べます