画像の表示方法2010年11月19日
今回は画像の表示方法についてです。
ブログのようにHTMLエディタがあれば、
画像を簡単にアップロードしてページに表示させることが出来ますが、
エディタ以外の方法で画像を表示させる際に、
下記のソースの記述方法を覚えておくと便利です。

上記の画像を表示させたい場合は、下記のように記述します。
<img src="//img02.ti-da.net/usr/hatarakuweb/contents_free_downroad01.gif" alt="無料ダウンロード">
赤字の部分に画像のURLが入ります。
ソースを見てわかるように、
この画像は、contents_free_downroad01.gif というファイル名に
なっていることがわかると思います。
このファイル名を contents_free_downroad02.gif に変更し、
<img src="//img02.ti-da.net/usr/hatarakuweb/contents_free_downroad02.gif" alt="無料ダウンロード">
と記入するとこのように表示されます。

ちなみに、インターネット上にアップロードされた画像は、
画像の上で右クリックし「プロパティ」を選択すると表示されます。
(インターネットエクスプローラーの場合)
あと、
ソースの中に alt="無料ダウンロード と記入があるのがわかると思いますが、
これは代替テキストと呼ばれるもので、万一画像が表示されない場合に
テキストで画像の情報を説明するためのものです。
SEOにも少なからず影響があると言われてもいますので画像を表示する場合は、
忘れずに alt にテキスト情報を入れるようにしましょう。
ブログのようにHTMLエディタがあれば、
画像を簡単にアップロードしてページに表示させることが出来ますが、
エディタ以外の方法で画像を表示させる際に、
下記のソースの記述方法を覚えておくと便利です。

上記の画像を表示させたい場合は、下記のように記述します。
<img src="//img02.ti-da.net/usr/hatarakuweb/contents_free_downroad01.gif" alt="無料ダウンロード">
赤字の部分に画像のURLが入ります。
ソースを見てわかるように、
この画像は、contents_free_downroad01.gif というファイル名に
なっていることがわかると思います。
このファイル名を contents_free_downroad02.gif に変更し、
<img src="//img02.ti-da.net/usr/hatarakuweb/contents_free_downroad02.gif" alt="無料ダウンロード">
と記入するとこのように表示されます。

ちなみに、インターネット上にアップロードされた画像は、
画像の上で右クリックし「プロパティ」を選択すると表示されます。
(インターネットエクスプローラーの場合)
あと、
ソースの中に alt="無料ダウンロード と記入があるのがわかると思いますが、
これは代替テキストと呼ばれるもので、万一画像が表示されない場合に
テキストで画像の情報を説明するためのものです。
SEOにも少なからず影響があると言われてもいますので画像を表示する場合は、
忘れずに alt にテキスト情報を入れるようにしましょう。
Posted by カラハイ 黒島
│ヒント&ノウハウ