上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 本文テキスト上に画像を配置するには、管理画面・ツールボタンの富士山画像「ファイル挿入」を使いますよね。
 でも、ブログによっては、雑誌のレイアウトみたいに、画像の横にテキストが回り込んでいて、かっこいいものがあります。

Capu1419.jpg こんな感じで、テキストが画像の横に回り込み、かっこいい感じになっています。
 また、テキストの固まりである記事に変化を与え、読者の目や心をブログの内容、ブログ本体に引きつける効果があります。
 これは、どうすれば出来るのか?


 今回は、コレを解説します。




 ちょっとだけやっかいなことに、コレをやる方法は2種類あります。
 片方は、厳格なHTML文書では非推奨とされる要素を使います。当サイトテンプレートでは大丈夫ですが、ごくごく希にこの要素が使えないテンプレートもあるかも知れません。(みたこと無いので、あったとしても相当レアです)

 まず最初は、恐らく一般的に使われている厳格ではない方から。



align="left",align="right"



 画像を挿入すると、テキスト編集画面に

<img src="http://blog-imgs-~~~.jpg" alt="赤ちゃん画像" border="0" width="150" height="150" />


 こんな文字が打ち出されますよね。コレが、「画像のHTMLタグ」と言うものになります。
 これに、

align="left"
align="right"

(sample)
<img src="---.jpg" alt="画像の説明" align="left" />

 を入れてやると、「left」であれば画像が左により、文字が右側に回り込みます。「right」は逆です。

align="left"
Capu1419.jpg画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。


align="right"
画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。


<br clear="all">

 そして、文字が回り込むのを解除するのが、以下のタグになります。

<br clear="all">

(使用例)
<img src="画像.jpg" alt="画像説明" align="left" />画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。<br clear="all">画像の左右寄せ、テキストの回り込みのテスト。
画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。画像の左右寄せ、テキストの回り込みのテスト。<br clear="all">
画像の左右寄せ、テキストの回り込みのテスト。





厳格な記述方法



 次は、スタイルシートを利用した、厳格なHTML構文を求められる場合に使う方法です。先ほど紹介した構文を、表右蘭のように書き換えればOKです。

align="left"style="float:left"
align="right"style="float:right"
<br clear="all"><br style="clear:both" />

 もしもどうにも上手くいかないなぁと言う場合がありましたら、こちらを思い出してみてください。もしかしたら…ひょっとしたら、上手くいく可能性も…。
このエントリーをはてなブックマークに追加
Fri.12.30.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。