ブログもキレイに♪画像の文字回り込み
今日は美容とは関係ないオハナシ
こんなふうに、画像の横にテキストを持ってくるにはどうしたらいいの？
とご質問いただいたので早速返信しようと思ったら、なんかすごい長くなっちゃったし、タグをコメントに書いたら思ったように表示されないかも･･･なので記事にしました☆
わかりづらかったらごめんなさいー！でも精一杯説明します！
ちなみにこれはだいぶ前に買ったバスツアーズのバブルバス。マンダリン＆トマトのかおり！ふしぎにパッション！ここのシリーズ、いい香りよ～
さて、回り込みの方法は↓
FC2以外は使ってないからほかのブログの方スミマセン、結論
(下処理)
管理画面からアップした画像の場合はとりあえず
<br clear="all">
という部分を消す
アフィリエイト画像の場合はタグを全部つなげる(<>の前に改行を作らない)
(本番)
イメージタグ(<img src="http://xxxxx"ってかんじのタグ>)の前に改行ナシで
<span style="float: left; margin-left: 5px; margin-bottom: 3px; border: none;">
イメージタグの後ろにこちらも改行ナシで
</span>
と入れる。その後テキストを、改行ナシで書き込む
ここのブログで画像をアップし、文字を書くとこんなふーになります。
画像と改行されちゃうの。
行数増えちゃって縦に長い記事になっちゃいます。
画像の横にテキストがきてくれたら、コンパクト。
アフィリエイトやってる方は、商品画像のすぐ横に商品名だせて、すっきりさっぱりだよね
↑のをこんなかんじにすると、スッキリ。
でも大きめの画像の場合は、なんでもかんでも回り込みにせず、改行しちゃったほうがやっぱり読みやすいと思います☆
管理者ページから「新しい記事を書く」で画像をアップロードすると、本文のとこがこーなります
<a href="http://blog-imgs-29.fc2.com/m/y/s/mysister/060515_a.jpg" target="_blank"><img src="http://blog-imgs-29.fc2.com/m/y/s/mysister/060515_a.jpg" alt="イメージ" border="0"></a><br clear="all">
アフィリエイト画像のタグの場合は、改行だけ削除しちゃってください。自動改行＋HTMLタグの設定に初期状態ではなってるので。
たとえばエーハチネット
の場合は、
<a href="http://px.a8.net/svt/xx" target="_blank">
<img border="0" width="125" height="125" alt="" src="http://www21.a8.net/svt/bgt?aid=xxxx"></a>
<img border="0" width="1" height="1" src="http://www15.a8.net/0.gif?a8mat=xxxx" alt="">と、各タグで改行されてるので、
<a href="http://px.a8.net/svt/xx" target="_blank"><img border="0" width="125" height="125" alt="" src="http://www21.a8.net/svt/bgt?aid=xxxx"></a><img border="0" width="1" height="1" src="http://www15.a8.net/0.gif?a8mat=xxxx" alt="">とつなげちゃいます。(わかりづらいのでメモ帳とかにペーストすると違いがわかりますよー)
ごめんなさい、これほんのさわり。まだまだあるの。
一度覚えるとラクだからもちょっとお付き合いください
スタイルシート(CSS)で、画像を右か左に配置し、その後に書いたテキストを回り込ませる設定をします！
スタイルシートってのは定型辞書みたいなもので、携帯とか良く使う言葉登録できたりするのといっしょ。自分のスタイルを登録できるのです。
WEBサイト創ったりブログのカスタマイズするには必要な知識です。
あんまりむずかしく考えず、今回は「画像の横にテキストを持ってくる」ことだけを考えましょー
イメージタグというのが
<img src="http://xxx">
で、FC2の場合は管理画面から画像をアップし「記事を書く」で画像を記事にいれると、必ず最後に<br clear="all">ってタグがはいっちゃいます。こいつは削除！
コレ「回り込みを解除するよー」ってタグなんです。
これを消してもこんなふーになります
一行分しかよこにはいらないーーーーー
これじゃ、ちっともスッキリしないうえあんまり見た目もよくなーい！画像のトップとテキストのトップの位置を合わせたい
さて、冒頭で書いた結論
<span style="float: left; margin-left: 5px; margin-bottom: 3px; border: none;">
についての解説。
まず<span></span>ってのが、spanでくくった部分をひとまとめにするよー！って宣言のタグです。
その後、style="～～～"で、このまとまりをこんなふうに表示するよ！と命令してます。
float: left;このまとまりを左に寄せます
margin-left: 5px;まとまりの左に5ピクセルの余白を作ります
margin-bottom: 3px;まとまりの下に3ピクセルの余白を作ります
border: none;線はつけません
といった命令をしてます。余白を作るのは、画像にぴったりテキストがくっつくと、ちょっと見づらいから。
もう少しらくになる方法もあるんだけど、テンプレートをいじってしまうので、壊れてしまったとき責任がもてないのでここまでにしておきます。
上のスタイルは、辞書登録か、デスクトップにメモとしていつでもコピー＆ペーストできるようにしておくとらくちん。
長かった上わかりづらかったでしょーか(>_<)
うまくいきますように！
さらに追記。回り込ませたいテキスト量が少ないと、
たとえばこんなふうに表示したいのに
こんな感じで2段？にしたーいってとき
テキスト量がすくないとこんなふーになるのですよ
おおおううあーかっこわるい
なので、画像タグ＋テキストの後に<br clear="all" />で、回り込み解除してくださいねー
Aceさん、ご指摘ありがとうございました☆
こんなふうに、画像の横にテキストを持ってくるにはどうしたらいいの？とご質問いただいたので早速返信しようと思ったら、なんかすごい長くなっちゃったし、タグをコメントに書いたら思ったように表示されないかも･･･なので記事にしました☆
わかりづらかったらごめんなさいー！でも精一杯説明します！
ちなみにこれはだいぶ前に買ったバスツアーズのバブルバス。マンダリン＆トマトのかおり！ふしぎにパッション！ここのシリーズ、いい香りよ～
さて、回り込みの方法は↓
FC2以外は使ってないからほかのブログの方スミマセン、結論
(下処理)
管理画面からアップした画像の場合はとりあえず
<br clear="all">
という部分を消す
アフィリエイト画像の場合はタグを全部つなげる(<>の前に改行を作らない)
(本番)
イメージタグ(<img src="http://xxxxx"ってかんじのタグ>)の前に改行ナシで
<span style="float: left; margin-left: 5px; margin-bottom: 3px; border: none;">
イメージタグの後ろにこちらも改行ナシで
</span>
と入れる。その後テキストを、改行ナシで書き込む
ここのブログで画像をアップし、文字を書くとこんなふーになります。
画像と改行されちゃうの。
行数増えちゃって縦に長い記事になっちゃいます。
画像の横にテキストがきてくれたら、コンパクト。
アフィリエイトやってる方は、商品画像のすぐ横に商品名だせて、すっきりさっぱりだよね
↑のをこんなかんじにすると、スッキリ。でも大きめの画像の場合は、なんでもかんでも回り込みにせず、改行しちゃったほうがやっぱり読みやすいと思います☆
管理者ページから「新しい記事を書く」で画像をアップロードすると、本文のとこがこーなります
<a href="http://blog-imgs-29.fc2.com/m/y/s/mysister/060515_a.jpg" target="_blank"><img src="http://blog-imgs-29.fc2.com/m/y/s/mysister/060515_a.jpg" alt="イメージ" border="0"></a><br clear="all">
アフィリエイト画像のタグの場合は、改行だけ削除しちゃってください。自動改行＋HTMLタグの設定に初期状態ではなってるので。たとえばエーハチネット
の場合は、<a href="http://px.a8.net/svt/xx" target="_blank">
<img border="0" width="125" height="125" alt="" src="http://www21.a8.net/svt/bgt?aid=xxxx"></a>
<img border="0" width="1" height="1" src="http://www15.a8.net/0.gif?a8mat=xxxx" alt="">と、各タグで改行されてるので、
<a href="http://px.a8.net/svt/xx" target="_blank"><img border="0" width="125" height="125" alt="" src="http://www21.a8.net/svt/bgt?aid=xxxx"></a><img border="0" width="1" height="1" src="http://www15.a8.net/0.gif?a8mat=xxxx" alt="">とつなげちゃいます。(わかりづらいのでメモ帳とかにペーストすると違いがわかりますよー)
ごめんなさい、これほんのさわり。まだまだあるの。
一度覚えるとラクだからもちょっとお付き合いください
スタイルシート(CSS)で、画像を右か左に配置し、その後に書いたテキストを回り込ませる設定をします！
スタイルシートってのは定型辞書みたいなもので、携帯とか良く使う言葉登録できたりするのといっしょ。自分のスタイルを登録できるのです。
WEBサイト創ったりブログのカスタマイズするには必要な知識です。
あんまりむずかしく考えず、今回は「画像の横にテキストを持ってくる」ことだけを考えましょー
イメージタグというのが
<img src="http://xxx">
で、FC2の場合は管理画面から画像をアップし「記事を書く」で画像を記事にいれると、必ず最後に<br clear="all">ってタグがはいっちゃいます。こいつは削除！
コレ「回り込みを解除するよー」ってタグなんです。
これを消してもこんなふーになります
一行分しかよこにはいらないーーーーーこれじゃ、ちっともスッキリしないうえあんまり見た目もよくなーい！画像のトップとテキストのトップの位置を合わせたい
さて、冒頭で書いた結論
<span style="float: left; margin-left: 5px; margin-bottom: 3px; border: none;">
についての解説。
まず<span></span>ってのが、spanでくくった部分をひとまとめにするよー！って宣言のタグです。
その後、style="～～～"で、このまとまりをこんなふうに表示するよ！と命令してます。
float: left;このまとまりを左に寄せます
margin-left: 5px;まとまりの左に5ピクセルの余白を作ります
margin-bottom: 3px;まとまりの下に3ピクセルの余白を作ります
border: none;線はつけません
といった命令をしてます。余白を作るのは、画像にぴったりテキストがくっつくと、ちょっと見づらいから。
もう少しらくになる方法もあるんだけど、テンプレートをいじってしまうので、壊れてしまったとき責任がもてないのでここまでにしておきます。
上のスタイルは、辞書登録か、デスクトップにメモとしていつでもコピー＆ペーストできるようにしておくとらくちん。
長かった上わかりづらかったでしょーか(>_<)
うまくいきますように！
さらに追記。回り込ませたいテキスト量が少ないと、
たとえばこんなふうに表示したいのにこんな感じで2段？にしたーいってときテキスト量がすくないとこんなふーになるのですよおおおう
うあーかっこわるいなので、画像タグ＋テキストの後に<br clear="all" />で、回り込み解除してくださいねー
Aceさん、ご指摘ありがとうございました☆