img~♪ウェブリブログで知ってた方がいいタグ~#1

ブログ始めて3ヶ月、書くより、見る方が楽しい今日この頃の柴成です☆
その間に、「ブログ始めました」って記事もいっぱい読んだの。
で、思ったのですが、皆様、基本的なタグで、
結構悪戦苦闘していらっしゃるご様子。

私は数年前に「タグ打ち」でHPデビュー(笑)していますので、
ブログ書くにあたって、基本的なところでつまずくコトってなかったのですが、
HP作成ソフトを使っている方とか、まったく初めての方とかは、
そうはいかないみたい。

事務局のブログ見ても、「画像の貼り方が分かりません」って質問多いし。
・・・他社のブログも同じ様な質問が多かったですね。
ので、ブログの画像タグ指定を簡単にまとめてみました。

基本的にはどこのブログも、1つは画像アップする機能があるようですが。
・・・ここでは、他からのimgタグを使ったリンク呼び出し方法を書きます。

☆まず。

その画像のURLを取得します。
直リンクオッケーなサイト様なら、画像のURLが表示されています。
自分で用意した画像なら、自分のHPスペースにアップします。
自分のHPがなくても、HPスペースさえあればいいので。
BIGLOBE契約者の場合だと、HPスペースを得るには【ここ】でURLをもらって、
【ここ】でサーバーにアップします。
必要なことはそのページに書いてありますので、きちんと読んでくださいね。
画像のファイル名は半角英数小文字です。

すると「http://あなたのHPアドレス/画像の名前」、という画像URLが取得できます。
次に、ブログの画像を貼りたい位置にタグを書きます。

タグというのはHTMLを生成する命令文とでも思っていただければ・・・。
基本的には<>(必ず半角)の中に書くのです。
画像を貼り付けるタグは
<img src="画像のURL">です。
(半角にすると表示しなくなるので全角で書いていきますが、
必ず半角で書いてください。)
これで投稿すると、画像が載ったブログになります。
うまくいかない場合は、ファイル名が間違っているか、
タグ記述ミスのコトが多いです。
(" "←ダブルクォーテーションは忘れないように!)

☆次に

画像を、右とか左とかの位置指定したい場合。
<img src="画像のURL" align="画像の位置指定">
で、左右の位置が指定できます。
”画像の位置指定”の部分には右ならright、左ならleftになります。
が!
配置属性は「非推奨属性」・・・・ま、気にしない、気にしない・・・f(^_^;)
これらは、見る人の環境によって左右されますので、
必ずしも自分と同じ表示にはならないと思いますから、寛容にお願いします(笑)
※このブログはサイドバーを左に付けていますので、
右寄せの画像が切れているかも。
・・・ウェブリブログ・・・改善の余地あり~(T^T#)


【例】

<img src="画像のURL" align="right">画像     


<img src="画像のURL" align="left">画像         




ど真ん中配置!
<div align="center"><img src="画像のURL"></div>
画像




画像指定だけを続けて書くと、
<img src="画像のURL" class="right">画像         
<img src="画像のURL" class="left">画像        
<div align="center"><img src="画像のURL"></div>
画像

レイアウトがめちゃめちゃに崩れる場合があるので、
間にテキストを挟むか、<br clear="all">と、画像の後に入れるかしてくださいね。



☆もう一つ

画像を拡大縮小できます。
<img src="画像のURL" width="幅指定" height="高さ指定">
幅、高さ、共にピクセルかパーセンテージ指定します。
画像がはみ出したりする場合に使えますよ♪
縦横比が合わないと変な画像画像になっちゃうので、比率だけ、気をつけてね(笑)

【例】<img src="画像のURL" width="150" height="80">
   (※:ピクセル指定の場合は数字だけでいいです。)
   <img src="画像のURL" width="50%" height="50%">
(ここでも%は半角です。)
縦横比が同じ場合は、width、height、どちらかの指定だけで大丈夫です。
あとは機械に任せちゃいましょう☆

ちょっと駆け足気味で書いてみましたが、
ご理解いただけましたでしょうか???
なにかありましたら、コメントを置いていってくださいな(=^-^=)
問題はHPスペースを持ってない場合なのよね~・・・☆☆☆

◎ご参考になりましたら、コメント残してね~(*^-^*)


★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

よかったらこちらにもどうぞ♪
オリジナルイラストサイト【柴成館】

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆


Click Here!

ロリポップ広告

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆

できるホームページHTML入門 Windows対応

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 1

なるほど(納得、参考になった、ヘー)

この記事へのコメント

2005年03月28日 22:52
ご苦労様です。
私はタグを知らないので
img srcの次の=を抜かしていました。
本棚には数年前に買ったタグ辞典があるんですけどね・・・img探したら細かく記載されていました。
HP作成ソフトを使っているとHTMLは覚えませんねえ。基本は大切ですね!
親切に教えてくれてありがとうございました。
柴成
2005年03月29日 00:18
m-haru様、いらっしゃいませ♪
度々おじゃまして、失礼致しました。
こんな私でも何かのお役に立てれば嬉しいです。
また来てくださいね。
2005年04月03日 17:09
初めまして、kankoです。

画像について質問してもいいですか?
画像を左に設定した場合、文字が画像にくっついてしまうのです。「HSPACE」を使用しても余白が付きません。どうしたらいいですか?教えて頂けると嬉しいです。
柴成
2005年04月03日 17:22
kankoさん、いらっしゃいませ♪
画像表示時のテキスト回り込みカットは、上にも書いていますが、
br clear="all"
というタグが有効です。
これで、画像を左側に設置した場合の、文字の右側回り込みがカットされて、画像の下に付きます。
hspaceは両側にマージンを取ってしまうので、取り扱いの難しいタグですね。
画像を複数並べる時は、テーブルタグの中に入れてしまった方が楽かもしれませんよ。
お役に立てました?(=^-^=)
2005年04月03日 21:51
柴成さま

ありがとうございます♪
さっそく試してみますね。

この記事へのトラックバック