趣味の備忘録
 

画像の横に文章を表示する方法

p_earth.jpgこんな感じに画像の横に文章があるサイトって結構ありますよね?ブログを始めたときに一番気になってたテクニックの一つです。

せっかくなのでちゃんとしたやり方を残しておこうと思います。
FC2の画像貼り付けを行った場合、次のようなコードが自動で張り付くと思います。
 <a href="http://blog-imgs-31.fc2.com/b/i/b/bibo6/p_earth.jpg" target="_blank"><img src="http://blog-imgs-31.fc2.com/b/i/b/bibo6/p_earths.jpg" alt="p_earth.jpg" border="0" /></a>

でも、これをそのまま貼り付けると、画像と文章ってこんな感じになりますよね。
p_earth.jpgテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

そこで、コードに少し手を加えます。太文字・下線の部分が追加したコードです。
 <a href="http://blog-imgs-31.fc2.com/b/i/b/bibo6/p_earth.jpg" target="_blank"><img style="float:left; margin-left:10px;" src="http://blog-imgs-31.fc2.com/b/i/b/bibo6/p_earths.jpg" alt="p_earth.jpg" border="0" /></a>

こうすることで、画像の横に文章が回るようになります。
p_earth.jpg
ほら、こんな感じになります。
ちゃんと文章が画像の横に来てますよね。

ちなみに文章の回りこみを解除する場合、解除したい位置で次のコードを挿入します。

<div clear="all" style="clear:both;"></div>


関連記事
 
 
コメント






(編集・削除用)

 

管理者にだけ表示を許可
 
 
トラックバック
http://bibo6.blog34.fc2.com/tb.php/57-00f623ae
 
 
備忘録検索
 
カテゴリ
 
スポンサードリンク
 
月別 備忘録
 
人気記事
 
最近のコメント
 
ランキングに参加中
ページ先頭へ
Copyright © bibo6@管理人 / Designed by Paroday 改