ブログに貼った画像に文字を回り込みさせるHTML

スポンサーサイト

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

文字カウント、<p>タグ<br />タグの自動挿入、ワンクリックで画像回り込みなど記事作成が楽になるツール

ブログに貼った画像に文字を回り込みさせるHTML

mawarikomi.pngブログ記事に画像を貼り付けると、説明しやすくなって効果的になります。

ということで、ブログに貼り付けた画像に文字を回り込みさせるHTMLを覚えておくと、とても便利です。


特に無料ブログは、画像に文字を回り込みさせる機能がついていないこともありますので、役に立ちます。


ブログに画像を貼り付けると、画像のHTMLは下のようになっています。

<img src="画像が保存されている場所(URL)">



この画像のHTMLのうしろに、画像に文字を回り込みさせるHTMLを追加します。

配置を指定するalign(アライン)を使います。
alignの意味は、一列に整列する・提携する・調節するです。.

画像のHTMLと配置を指定するalignを組合わせてみます。

<img src="画像が保存されている(URL)" align="画像を回り込みさせる方向">


画像を回り込みさせる方向の場所に配置を指定する値を入力します。

画像の位置入力する値HTML
right<img src="画像が保存されている(URL)" align="right">
left<img src="画像が保存されている(URL)" align="left">





画像が右で文字が左の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ





画像が左で文字が右の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



ちゃんと、文字が画像に回りこんでいますね。
でも、なんとなく画像と文字がくっつきすぎていて見づらいですね。

画像のまわりに余白をつけるときに使うHTMLがあるんです。

marginです。

ここでは、marginを無料ブログでも簡単に使える方法を一覧にしました。
余白サイズ(値)余白が入る場所HTML
値が1つ上下左右style="margin:値1;"
値が2つ値1が上下、値2が左右style="margin:値1 値2;"
値が3つ値1が上、値2が左右、値3が下style="margin:値1 値2 値3;"
値が4つ値1が上、値2が右、値3が下、値4が左style="margin:値1 値2 値3 値4;"


この中で、値を4つ入れるHTMLを覚えておけば迷いもなくなります。

時計回りに、上・右・下・左です。

<img src="画像が保存されている(URL)" align="画像を回り込みさせる方向" style="margin:値1 値2 値3 値4;">


値は半角スペースでつないで、px(ピクセル)で入力します。


画像が左で文字が右の場合を使って、右に余白を作ってみます。

align="left" style="margin:0px 20px 0px 0px;"

ここでは、画像の右に20pxの余白をつくります。
上 右 下 左:0px 20px 0px 0px


ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



画像と文字の間に余白ができました。

ぴったりと画像と文字がくっついているより、ちょっと余白が空いているほうが見やすいですね。



文字が画像に回り込むタイミングは、文字の行数が画像の高さ以上になったときです。

下の画像&文字をみると、画像を小さくしたことで文字が回り込みが早くなっていますね。

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ




画像に文字を回り込みさせたあとに、回り込みはここで終了というHTMLも忘れず入れましょう。

画像と文字の位置HTML
画像が左で文字が右<br clear="left">
画像が右で文字が左<br clear="right">
画像が左右で文字が真ん中<br clear="all">




回り込み解除をしないと、そのあとの文章や画像の位置がぐちゃぐちゃになってしまいます。

allは、すべての回り込みを解除してくれるので<br clear="all">を覚えておくと便利です。



最後まで読んでいただき、ありがとうございます。





文字カウント、<p>タグ<br />タグの自動挿入、ワンクリックで画像回り込みなど記事作成が楽になるツール

コメント (0)

コメントを書く

 

 非公開コメント ()

トラックバック (0)

Copyright © 脱サラしたいサラリーマンがアフィリエイトを実践、気ままにネットビジネス All Rights Reserved.

テキストや画像等すべての転載転用販売を固く禁じます

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