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

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

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

ここのまま続きの文章を書いた場合、以下のように、文字が下に表示されてしまいます。

komitsudo_himawari_3col_pop.png
テスト文章



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

<img src="http://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0">



<img src="http://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0" align="top">


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

例:
<a href="http://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" target="_blank">
<img src="http://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" alt="komitsudo_himawari_3col_pop.png" border="0" align="top">テスト文章
<br clear="all">

komitsudo_himawari_3col_pop.pngテスト文章


align="top"topを下記のように変更することで、表示方法が変わります。
  • top … (画像横の上部に1行の文字列を表示します)
  • middle … (画像横の中央に〃)
  • bottom … (画像横の下部に〃)
  • left … (画像を左側に回りこませ、画像の右側に複数行の文字列を表示します)
  • right … (画像を右側に回りこませ、画像の左側に複数行の〃)


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

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


komitsudo_himawari_3col_pop.pngkomitsudo_himawari_3col_pop.png



【初稿 2006/07/17 11:31:09】