僕のブログに検索ワードを使って、「画像の横に文字」とか「動画 100M 圧縮」とかで越しになるった方。御免なさい、書いてません。以前、ブログパーツの横に文字を入れる方法を書いたことがあり、これを応用すれば「画像の横に文字」は何とかなりますが、とても面倒です。そこで今回の『NFWのブログ教室』では、もっと簡単に画像の横に文字を入れる方法を紹介します。「動画 100M 圧縮」についてはまた後日に・・・。
![](https://blogimg.goo.ne.jp/user_image/63/b1/3f3b7bfa8b035a57e2b68c391c3c0270.jpg)
このように画像の右側に文字をいれるにはimgタグのstyle属性を使います。具体的には<img src="画像のURL"
style="float:left">。赤い文字の部分を画像のURLの後に
半角スペースを空けて挿入します。
![](https://blogimg.goo.ne.jp/user_image/63/b1/3f3b7bfa8b035a57e2b68c391c3c0270.jpg)
今度は先ほどとは反対側、画像の左に文字を入れます。<img src="画像のURL"
style="float:right">。やはり赤い文字の部分を画像のURLの後に
半角スペースを空けて挿入します。
しかし・・・。
なんか忙しなく感じませんか。画像のすぐ横にまるでくっ付く様に文字が張り付いています。画像と文字の間にもう少し余裕を持たせたいですね。
![](https://blogimg.goo.ne.jp/user_image/63/b1/3f3b7bfa8b035a57e2b68c391c3c0270.jpg)
このように、画像と文字の間に少し間隙があると何となく落ち着いた感じになります。やりかたはstyle="float:left" またはstyle="float:right"の後にやはり
半角スペースを空けてから
hspace="10"と記入します。10というのはあくまで例えであって5でも20でもかまいません。単位はピクセルで数字が大きいほど間隙が広くなります。各々感性に合わせて調整してみて下さい。
ついでという訳ではありませんが、画像について記事書いていて長文になって画像の下まで文字がきた場合、hspace="10"の後に半角スペースを空けて
vspace="10"を加えると画像の下に10ピクセルの間隙ができます。
と・こ・ろ・が
![](https://blogimg.goo.ne.jp/user_image/63/b1/3f3b7bfa8b035a57e2b68c391c3c0270.jpg)
なあ~んだ、簡単じゃん!と思われたそこの
あなた!
甘いですねぇ。このままではいずれ・・・
![](https://blogimg.goo.ne.jp/user_image/63/b1/3f3b7bfa8b035a57e2b68c391c3c0270.jpg)
二枚以上の画像を使おうとした時、このような失敗をしてしまします。
PCは人間と違って要領が良くありません。命令の始めと終わりをきちんとその都度出してやる必要があります。img src="画像のURL"で画像を表示させる命令、style="float:left"で画像の表示位置の命令(「回り込み」と言います)。命令を出せばその都度、その命令の終わりをPCに指示してやります。この場合style属性の終了を指示する訳ですから文字の後に
<br style="clear:both">という命令終わりの指示を出します。これは「一枚の画像と説明文」毎に行ってください。
一番上の画像について例をとると
<img src="画像のURL" style="float:left"> このように画像の右側に文字をいれるにはimgタグのstyle属性を使います。具体的には<img src="画像のURL" style="float:left">。赤い文字の部分を画像のURLの後に半角スペースを空けて挿入します。<br style="clear:both"> |
説明文の後に赤い部分を加えることで、上のような画像表示の混乱を回避できます。
『NFWのブログ教室』今回のまとめ |
画像の右に文字 | style="float:left" |
画像の左に文字 | style="float:right" |
画像の横方向に10ピクセルの余白 | hspace="10" |
画像の縦方向に5ピクセルの余白 | vspace="5" |
回り込み停止 | <br style="clear:both"> |