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

<a href="https://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" target="_blank">
<img src="https://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="https://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0">

↓

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


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

例：
<a href="https://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" target="_blank">
<img src="https://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 … （画像横の上部に１行の文字列を表示します）
  • middle … （画像横の中央に〃）
  • bottom … （画像横の下部に〃）
  • left … （画像を左側に回りこませ、画像の右側に複数行の文字列を表示します）
  • right … （画像を右側に回りこませ、画像の左側に複数行の〃）


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

例：
<a href="https://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" target="_blank">
<img src="https://blog-imgs-27.fc2.com/k/o/m/komitsudo/komitsudo_himawari_3col_pop.png" alt="プレビュー画像" border="0" align="left">
<img src="https://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】