2006年11月02日
画像を左に配置してそのとなりに文字を書く。（CSS編集）
ブログの記事を書くときには、文字ばかりでなく、画像を入れることが多いですね。ところが画像を入れたいのだけど、思ったところに画像を配置するのは、なかなか難しいと感じることはありませんか？（yozoはかなり苦労しています。）そいういうわけで、ちょっと画像の配置について考えてみることにしました。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。
はじめに
通常、記事に画像を入れると左揃えになって、画像の続きに文字を入力すると、文字は画像の下にきます。
便利なんてのんきなことをいってますね♪┐( -"-)┌ﾔﾚﾔﾚ...
画像のとなりに文字を書く。（文字の回りこみ。）
記事の左にある画像の右側に文字を書きたいときは、float:left;とします。
これは画像を左(left)に配置して、文字はその画像に回り込ませるという指定です。
そして、文字の最後は、clear:both;で回り込みを解除します。
CSS編集で追加するコード
/*画像の回り込みの設定*/
.imgleft
{
float:left;
}
/*文字の回り込みの解除*/
.clear
{
clear:both;
}
この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="imgleft" />回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。
---------別の方法---------
<div class="imgleft"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。
←
「BlogPetくらいから紫がと
ても好きになって現在に
至ってます。」
BlogPetくらいからねぇ〜♪
うさもは、ずっとBlogPetだと
思うんだけどね♪（;￣ー￣A ｱｾｱｾ･･･
これで回り込みが解除されました。
左に画像の２つ並べてそのとなりに文字を書く。
２つの画像を左にそろえて並べますから、class="imgleft"を2回使います。
もちろん、文字の最後は、clear:both;で回り込みを解除します。
※CSS編集で追加するコードはありません。
この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<img src="画像URL1" alt="画像の代わりの文字1" width="幅" height="高さ" class="imgleft" /><img src="画像URL2" alt="画像の代わりの文字2" width="幅" height="高さ" class="imgleft" />回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。
---------別の方法---------
<div class="imgleft"><img src="画像URL1" alt="画像の代わりの文字1" width="幅" height="高さ" /></div><div class="imgleft"><img src="画像URL2" alt="画像の代わりの文字2" width="幅" height="高さ" /></div>回り込みさせたい文字<br class="clear" />これで回り込みが解除されました。
←
使い勝手がいいかもね♪
検索されてるかなぁ〜♪
でもそれならうれしいね♪
何しろここのブログの
モットーは
「わからないことは、
みんなで解決しよう！」
だからね♪(*^-^)
これで回り込みが解除されました。
この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoの気が向いたと記2.0の関連記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New CSS編集をしましょう | Top | 0611掲示板♪ Old≫
トラックバックURL
トラックバック
≫ 画像を左右に並べて間に文を書く from yozoの気が向いたと記2.0
←「おしえないー♪」って教えなさい！(;｀O´)o! →これも秘密？(/=｀◇´)/≪教えろー左のこうさぎ：うさも右のこねこ：うららちゃんうららちゃんは、さるのこしかけのウッキさんちのこねこです。 [Read More]
トラックバック
≫ 「画像を並べてみる」 from キラキラ☆neverland
う〜ん いい香り♪ わ〜い！画像が並んだ♪メインブログはカンタンに出来たんだけどココのブログは イマイチ良くわからなかくて悩んでいました。そしたら。。。yozoさんのブログに「左に画像の２つ並べてそ [Read More]
コメント
オオーw(*゜o゜*)w これはとっても分かりやすい記事ですね!!
私もブログを始めたころに「回りこみ」で検索して
いろいろ調べたなぁ♪
そのときにこの記事があったらよかったのにと思いました!!(笑)
私はimgの中にクラスを入れるタイプで回りこみをしていますが、
divに入れるというのもありですね。なるほどー!!
とっても分かりやすい記事でした。
私もこのように分かりやすい記事を書くようにしなければ!!
うさもちゃんのキャプの言葉がナイスでした!!☆⌒d(*^ー゜)b グッ!!
Posted by まゆび at 2006.11.02 22:19 | edit
コメント
メインのブログでは カンタンに画像を並べる事が出来たのですが
２つ目のブログをFC2で開設して１ヶ月・・・。
なかなか思うようにいかずに悩んでいたところでした。
今 yozoさんのブログに出会い そして
とてもわかりやすい説明なので ＰＣ初心者の私でも
ちゃんと並べる事が出来て とっても嬉しいです。
どうもありがとうございました<(_ _)>
これからも 色々と参考にさせていただきながら
カスタマイズを勉強していこうと思っています。
どうぞ宜しくお願いします(*^_^*)
Posted by miyu at 2006.11.03 00:01 | edit
コメント
デザイン、変えたんですね。秋らしくていいです。
ちょっと、質問があります。
alt="画像の代わりの文字1"の「画像の代わりの文字１」の意味が、少し判りません。例でいいので、是非教えてくださいm(_ _)m
今度、使ってみたいです。
Posted by ネーちゃん at 2006.11.03 01:24 | edit
コメント
＞オオーw(*゜o゜*)w これはとっても分かりやすい記事ですね!!
(///o///)ゞ ﾃﾚﾃﾚ ありがとーございまっす♪とても励みになりまっす m(_ _)m
＞私はimgの中にクラスを入れるタイプで回りこみをしていますが、
＞divに入れるというのもありですね。なるほどー!!
えへへ・・・そうなんですよ♪ yozoも通常はimgの中にclass="imgleft"を入れているんです。今回は、一つ一つの画像にdivでの枠をつけていますから、さらにdivのclass="imgleft"で回り込みの設定をしました。これで左右の配置はＯＫですね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
＞うさもちゃんのキャプの言葉がナイスでした!!☆⌒d(*^ー゜)b グッ!!
「わぁいヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい まゆびさん、ありがとー♪ (*^-^)」by うさも
Posted by まゆびさんへ at 2006.11.03 08:11 | edit
コメント
＞今 yozoさんのブログに出会い そしてとてもわかりやすい説明なので
＞ＰＣ初心者の私でもちゃんと並べる事が出来て とっても嬉しいです。
たった今、お邪魔させていただきました。うまく左に２つ並んでいますね♪
お役に立ててうれしーですよ♪(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
＞これからも 色々と参考にさせていただきながらカスタマイズを勉強していこうと
＞思っています。どうぞ宜しくお願いします(*^_^*)
はい♪yozoこそ、参考にしていただけるようにがんばりますね♪
こちらこそよろしくお願いします m(_ _)m
Posted by miyuさんへ at 2006.11.03 09:12 | edit
コメント
＞デザイン、変えたんですね。秋らしくていいです。
そーですか♪ ありがとーございまっす♪ m(_ _)m
ハロウィンも終わって、大阪もそろそろ紅葉が見ごろになりますので、
壁紙を変更してみました。v(≧∇≦)v いえぇぇぇぇいっ♪
＞alt="画像の代わりの文字1"の「画像の代わりの文字１」の意味が、少し判りません。
imgタグの中のaltは画像が表示されないときに画像の替わりに表示される文字なんです。この記事の一番最初の画像だったら、alt="うさもの台詞 「便利♪」"のような記述にすればいいかもしれませんね。ちなみにyozoは画像ファイル名にしています。ヾ(￣o￣;)ｵｲｵｲ
altのうまい使い方は、ネットで検索してみても参考になる記事がたくさんあると思いますよ。お時間あるときにでも探してみてくださいね。m(_ _)m
Posted by ネーちゃんさんへ at 2006.11.03 09:21 | edit
コメント
オオ〜！すごく分かりやすいです！
画像を並べて表示するのにはそんな技があったんですね…！
慣れてくると、画像の配置も自分好みにしたいなんて思うんですけど…
今使っているブログ人では無料だと色々な制約が多くて；；
初心者用に親切設計なんですが、その親切がかえってアダになっているような気がします＾＾；
思い切ってFC2に移転させようかしら〜なんて思っちゃいます＾＾；
Posted by しゃおりん at 2006.11.03 14:44 | edit
コメント
＞画像を並べて表示するのにはそんな技があったんですね…！
そうなんですよ♪せっかくたくさんの画像があっても自在に配置できないと、ついつい画像を使用するのが億劫になっちゃいますもんね。yozoもいつもこの配置については苦労します。yozo自身が、この記事をコピペして楽しようという魂胆なんですよ(*^-^)
＞初心者用に親切設計なんですが、その親切がかえってアダになっているような気がします
そうかもしれませんね。親切ということは、自在にならないようになっているはずですもんね。お世話になっておりながら、「余計なお世話だよ！」なんていうわけにもいきませんしね(^-^;
＞思い切ってFC2に移転させようかしら〜なんて思っちゃいます＾＾；
あはは・・・きっとその方がストレスは無くて済むでしょうね。FC2ブログだけでなく、忍ブログやら、xareaブログなどもカスタマイズ自由でやりたい放題できるようですが、とりあえずyozoはここのFC2ブログお薦めですよ。なぁ〜んてCMしておきまっすヾ(￣o￣;)ﾁｶﾞｳｯﾃﾊﾞ､､､
Posted by しゃおりんさんへ at 2006.11.03 20:39 | edit
コメント
前に画像の間に文字を入れる回り込みを教えていただいてずっと活用しています。
なるほど今回は並べた画像の隣に文字を置くんですね。
きっとこちらもいずれ使わせていただくことになるかもです。
ココログはCSS編集が出来ないけれど、とても参考になります。
FC2も何故かCSS編集してないかも・・・はい、ちゃんと次回までにはしておかないとね(^^;
そのままタグで置いてました、画像・・・恥
Posted by ととろ at 2006.11.03 20:49 | edit
コメント
＞前に画像の間に文字を入れる回り込みを教えていただいてずっと活用しています。
もうばっちりご自分で使いこなせていますもんね♪きっかけになれてうれしいですよ♪
＞なるほど今回は並べた画像の隣に文字を置くんですね。
＞きっとこちらもいずれ使わせていただくことになるかもです。
XHTML1.1では非推奨となるようですが、XHTML1.0ですから、ととろさんがココログでされているように、style属性で、同じようにできますよ。｛ ｝の中味をstyle=" "の中に書くだけですからね♪そのうちココログもCSS編集できるようになるのでは・・・と思うのですが・・・(^○^)
＞FC2も何故かCSS編集してないかも・・・はい、ちゃんと次回までにはしておかないとね(^^;
あはは・・・FC2ならそのままできますからね。しかもCSS編集といっても0からやるわけでもなし、楽勝だと思いますよ。(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
＞そのままタグで置いてました、画像・・・恥
いえいえ♪恥だなんてそんなことはありませんよ。できればいいのですからね。そのままでも、左に２つ並びますね。ただ、その右側に文字を書くのは無理でしょ？その方法なんですよ♪
Posted by ととろさんへ at 2006.11.03 23:41 | edit
コメント
私も出遅れちゃった。遅くなってごめんね・・・。
わお♪これいいねーー!!!とっても参考になるよーーー♪
いつも私の記事だと、下に文章が入る形だったから。
関連記事も見直してみたんだけど、これとっても便利だなぁー!!!って思った。
早速明日にでも使ってみたいなぁ♪うんうん。
いつも親切な記事でとっても分かりやすかったよ♪
なるほどね。
エキサイトの時は、右、左、中央って選べたもんね。
それが出来なくなっちゃったから、どうしてるのかなぁ・・・。っては思っていたんだよ。
ありがとねーー☆
Posted by enu at 2006.11.06 11:59 | edit
コメント
＞私も出遅れちゃった。遅くなってごめんね・・・。
あはは・・・どんまい♪どんまい♪お互いＯＫということにしましょうか♪
ってyozoがしきっていーのでしょうか(＞▽＜;; ｱｾｱｾ
＞いつも私の記事だと、下に文章が入る形だったから。
ふふふ・・・画像のとなりに文字を回り込ませるって言うんですよ。
とりあえず、設定は簡単だからね。楽しんでやってみてくださいね♪(*^-ﾟ)vｨｪｨ♪
＞エキサイトの時は、右、左、中央って選べたもんね。
そうですね。ほとんど意識せずに、画像の続きに文章を書けば、自動的に回り込ませるようになってましたね。本当はこの記事のような設定をしなくちゃいけなかったんですよ。でも、難しくないですからね。チャレンジしてみてくださいね！＼(*⌒0⌒)ｂがんばっ♪
Posted by enuちゃんへ at 2006.11.06 17:39 | edit
コメント
大変わかりやすい解説をありがとうございます！
この記事を見ながら、本日挑戦いたしました。
なんとかできたかな ふぅ。
これからも参考にさせてくださいね。
ありがとうございました♪
Posted by wera at 2006.11.06 22:48 | edit
コメント
＞大変わかりやすい解説をありがとうございます！
＞この記事を見ながら、本日挑戦いたしました。なんとかできたかな ふぅ。
おお！できましたか！それはお役に立ててうれしいですよ♪
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
こちらこそ今後ともよろしくお願いしまっす m(_ _)m
Posted by weraさんへ at 2006.11.07 00:24 | edit
コメント
早速回り込みの解除してみたんだけどうまくいかないの。
そのまま文字がコードが表示されちゃうんだよ・・・。
＞="画像の代わりの文字" width="幅" height="高さ"
ここってそのままでOK??
なんでかうまくいかないんだぁ・・。
早速やってみたんだけどね。
ダメなのかなぁ・・・。
どこかがおかしいんだろうなぁ・・・。
もし時間があったら教えてくれたら嬉しいなぁ☆
Posted by enu at 2006.11.08 08:33 | edit
コメント
＞alt="画像の代わりの文字" width="幅" height="高さ"
＞ここってそのままでOK??
いえいえ、ちゃんと入力してくださいね♪
altは自分でその画像の説明を" "の中に入力してください。
widthとheightは、画像をアップロードしたときに、表示されていませんか？その数字ですよ。画像によって違いますからね♪
詳しくは下の記事（関連記事の２です）を見てくださいね。＼(*⌒0⌒)ｂがんばっ♪
http://yozoblog2.blog63.fc2.com/blog-entry-378.html
Posted by enuちゃんへ at 2006.11.08 08:52 | edit