画像と画像、文字を並べる方法

Date:2006/07/17 11:31

FC2ブログで、記事中に画像を表示させようとした場合、標準機能を使って行うと、下記のようなコードが書かれます。

<a href="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" target="_blank">
<img src="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0"></a>
<br clear="all">

『href=""』と『src=""』の『""』中は、各ブログによって異なります。

ここのまま続きの文章を書いた場合、

テスト文章
のように、文字が下に表示されてしまいます。

文字を画像と並べて表示させたい場合、次のように画像を表示するimageタグのコードを変換します。

<img src="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0">
↓
<img src="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0" align="top">

上記を行い、<br clear="all">の直前に文章を追記します。

例：
<a href="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" target="_blank">
<img src="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" alt="komitsudo_himawari_3col_pop.png" border="0" align="top"></a>テスト文章
<br clear="all">

テスト文章

align="top"のtopを下記のように変更することで、表示方法が変わります。

top … （画像横の上部に１行の文字列を表示します）
middle … （画像横の中央に〃）
bottom … （画像横の下部に〃）
left … （画像を左側に回りこませ、画像の右側に複数行の文字列を表示します）
right … （画像を右側に回りこませ、画像の左側に複数行の〃）

また、画像を横に並べて表示したい場合は、上記の応用です。

例：
<a href="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" target="_blank">
<img src="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0" align="left">
<img src="http://blog70.fc2.com/k/komitsudo/file/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0"></a>
<br clear="all">