自宅で・ネットで副収入・お小遣い稼ぎ♪

所得倍増!???計画

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

さて今回は、ページを彩るイメージ(画像)タグの説明です。
文章だけで商品紹介などをすると、解説レポートのようになってしまいイマイチ商品の魅力が伝えにくいと思います。
そんな時、画像を織り交ぜながら記事を書いていくと見る方も疲れませんし、商品のイメージもより掴みやすくなります。


イメージ(画像)タグ <img src="" />

<div>や<p>と違って、この<img>タグも<br />と同じように終了タグを必要としません
ですので、タグ内の最後に半角スペースと/を忘れずに書き込みましょう


●ファイルパス src=""
属性 src="" の "" 内には「画像を置いてある場所のURL」を書き込みます
「置いてある場所」というのは、画像をアップロードした場所という意味です
「FC2ブログ」では、管理画面の「ツール」→「ファイルアップロード」で画像をアップロードできますが、この「画像をアップロードした場所」のURLを書き込めばOKです


<img src="http://blog-imgs-21.fc2.com/y/a/n/yanke977/logo_96_new.gif" />
携帯貯金箱

●代替テキスト alt=""
属性 alt="" の "" 内に文字や文章を書き込むことで、画像の代わりになるテキストを指定できます
<img />タグにはこの alt="" 属性を必ず書き込むようにしましょう


<img src="http://blog-imgs-21.fc2.com/y/a/n/yanke977/logo_96_new.gif" alt="携帯でお小遣い稼ぎ!携帯貯金箱" />

携帯でお小遣い稼ぎ!携帯貯金箱画像をポイントするとテキストが表示されます


alt="" 内に記述したテキストは、次のような場合に使用されます
・画像の表示ができなかった場合、画像の代わりにテキストが表示される
・音声ブラウザの場合、画像の代わりにこのテキストが読まれる(目の不自由な方のため)
・画像の読み込みが完了するまでの間、その部分にこのテキストが表示される
・IEの場合、マウスでポイントしたときにこのテキストが数秒間表示される


※alt="" は画像の代わりですので、説明文など補助的な文章を入れたい場合は title="" を使う方が良いようです


●枠線 border=""
属性 border="" の "" 内には、枠線の太さをピクセル値で書き込みます


<img src="http://blog-imgs-21.fc2.com/y/a/n/yanke977/logo_96_new.gif" border="4" />

携帯貯金箱


後で説明しますが、画像でリンクバナーを作成すると画像に枠線が表示されてしまいます
これを消すには border="0" を書き込めばOKです


●画像サイズ width="" height=""
属性 width="" と height="" で画像の幅と高さを指定できます
画像のサイズを指定しておくことで、ページの読み込み(表示)を速くすることができます
また、読み込み中のページのレイアウトも安定させることができます


・width=""  横のサイズをピクセル値か%で指定します
・height=""  縦のサイズをピクセル値か%で指定します


※属性の書き込みでサイズを小さくし、表示される大きさを変更しても画像のデータ量は元のままです
画像のサイズ変更は、なるべく元の画像で行うようにしましょう


●文字を画像に並べる style=""
スタイルシート style="" を追加すると、画像に並ぶ文字の位置を指定できます


・style="float:left; padding-right:10px;" 右側に文字を並べる
・style="float:right; padding-left:10px;" 左側に文字を並べる
※padding-left:10px; は「画像の左側に10ピクセルの余白を入れる」という意味です


<img src="" style="" />画像に並べる文字<br clear="all" />
<br clear="all" />は文字回り込みの解除タグですので、忘れずに書き込みましょう


<img src="http://blog-imgs-21.fc2.com/y/a/n/yanke977/logo_96_new.gif" style="float:left; padding-right:10px;" />携帯でお小遣い稼ぎ<br />★携帯貯金箱★<br />登録は携帯からどうぞ<br clear="all" />


携帯貯金箱携帯でお小遣い稼ぎ
★携帯貯金箱★
登録は携帯からどうぞ

と、こうなります

初歩的なタグ ⇒ 目次ページへ
リンクを貼る ⇒ リンクタグのページへ


ちょっと難しくなってきましたね;説明も難しくなってきましたw
次回はリンクボタン、いわゆる”リンクバナー”の作成の説明をしたいと思います。
あと数回、頑張ります!では今日はこのへんで♪
スポンサーサイト
コメント
この記事へのコメント
こんばんは~
こんばんは~
そういえば最近、タグ打ちしてませんね。
もっぱらツール使って作成してました。
忘れていることも多く為になりました。
たまにはタグ打ちもしないとダメですね。
次回の講座も頑張って下さい。

応援!
2008/11/12(水) 19:59 | URL | gigi #-[ 編集]
こんばんわ^^
おぉ~、為になる講座ですね。
<br clear>はじめて知りました。
これまで自分は画像いれるとうまくできなかったのはこれを知らなかったからかもしれません。なるほどです。

ではでは、次回も楽しみに。
おーえんぽちっとな。
2008/11/11(火) 19:47 | URL | ニートたこす #-[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://yanke977.blog62.fc2.com/tb.php/160-be57672c
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。