FC2ブログのテンプレート工房

以前に画像と文字を横に並べて記事を投稿する方法を紹介しました。

今回は複数の画像に文字を回り込ませて記事を投稿する方法を紹介します。

多くの方は初期設定（改行をそのまま反映）のままなので、それを前提にFC2ブログの記事を投稿する場合を説明します。


記事投稿画面で、下記のように複数の画像リンクを<div>タグで囲みます。

<div class="fleft"><a href="～"><img src="左上画像URL" /></a><a href="～"><img src="右上画像URL" /></a>
<a href="～"><img src="左下画像URL" /></a><a href="～"><img src="右下画像URL" /></a></div>ここの文字が画像の右側に回り込まれます。<br style="clear:left;" />ここからの文字が回り込み解除されます。

左上画像と右上画像は、改行せずに続けて記述してください。
左下画像と右下画像も、改行せずに続けて記述してください。

右上画像と左下画像の間は改行してください。


そしてスタイルシートの末尾に以下を加えてください。

.fleft {
float:left; /* 左へ回り込み */
margin-right:20px; /* 右間隔 */
margin-bottom:10px; /* 下間隔 */
}

marginの数値は調整してください。

これで<div></div>で囲まれた複数画像に文字を回り込ませることができます。

関連記事

• 記事先頭にランキング投票や広告等を入れる (2009/05/11)
• 自分のコメントに背景色をつける (2009/05/11)
• サイトマップに記事番号（通番）を表示する (2009/05/09)
• 複数の画像に文字を回り込ませる (2009/05/08)
• 記事内のリストにだけ、リストアイコン画像を設定する (2009/05/07)
• コメントを含めた検索 (2009/05/05)
• タイトルの横に検索窓を設置する (2009/04/29)