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>で囲まれた複数画像に文字を回り込ませることができます。


関連記事
[ 4127 ]
よく見たら、リンクありがとう御座います。
まだ更新してませんが、今月からガンガンいきます。
ようやく休みをもらいまして、色々見てます。
ドンドン使いやすくなりますねーー。
利用させていただきます。
[ 2009/05/09 09:24 ] [ 編集 ]
[ 4131 ] > あなろぐさん
FXも楽しみですが、あなろぐさんの日常日記も大好きです^^
[ 2009/05/09 13:22 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る