--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年11月02日

画像を左に配置してそのとなりに文字を書く。(CSS編集)

 ブログの記事を書くときには、文字ばかりでなく、画像を入れることが多いですね。ところが画像を入れたいのだけど、思ったところに画像を配置するのは、なかなか難しいと感じることはありませんか?(yozoはかなり苦労しています。)そいういうわけで、ちょっと画像の配置について考えてみることにしました。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。


はじめに

 通常、記事に画像を入れると左揃えになって、画像の続きに文字を入力すると、文字は画像の下にきます。
061102pic1.jpg

便利なんてのんきなことをいってますね♪┐( -"-)┌ヤレヤレ...


画像のとなりに文字を書く。(文字の回りこみ。)

 記事の左にある画像の右側に文字を書きたいときは、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" />これで回り込みが解除されました。


061102pic7.jpg


「BlogPetくらいから紫がと
ても好きになって現在に
至ってます。」

BlogPetくらいからねぇ?♪
うさもは、ずっとBlogPetだと
思うんだけどね♪(; ̄ー ̄A アセアセ・・・


これで回り込みが解除されました。


左に画像の2つ並べてそのとなりに文字を書く。

2つの画像を左にそろえて並べますから、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" />これで回り込みが解除されました。


061102pic6.jpg
061102pic4.jpg


使い勝手がいいかもね♪
検索されてるかなぁ?♪
でもそれならうれしいね♪
何しろここのブログの
モットーは
「わからないことは、
みんなで解決しよう!」
だからね♪(*^-^)


これで回り込みが解除されました。


  • yozoからのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


yozoの気が向いたと記2.0の関連記事紹介

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New CSS編集をしましょう | Top | 0611掲示板♪ Old≫

トラックバックURL


コメント

yozoさん、こんばんは♪ヾ(=^▽^=)ノ
オオーw(*゜o゜*)w これはとっても分かりやすい記事ですね!!
私もブログを始めたころに「回りこみ」で検索して
いろいろ調べたなぁ♪
そのときにこの記事があったらよかったのにと思いました!!(笑)
私はimgの中にクラスを入れるタイプで回りこみをしていますが、
divに入れるというのもありですね。なるほどー!!
とっても分かりやすい記事でした。
私もこのように分かりやすい記事を書くようにしなければ!!

うさもちゃんのキャプの言葉がナイスでした!!☆⌒d(*^ー゜)b グッ!!

コメント

yozoさん はじめまして♪miyuと申します。
メインのブログでは カンタンに画像を並べる事が出来たのですが
2つ目のブログをFC2で開設して1ヶ月・・・。
なかなか思うようにいかずに悩んでいたところでした。
今 yozoさんのブログに出会い そして
とてもわかりやすい説明なので PC初心者の私でも
ちゃんと並べる事が出来て とっても嬉しいです。
どうもありがとうございました<(_ _)>
これからも 色々と参考にさせていただきながら
カスタマイズを勉強していこうと思っています。
どうぞ宜しくお願いします(*^_^*)

コメント

yozoさん、こんばんわ\(^0^)/
デザイン、変えたんですね。秋らしくていいです。
ちょっと、質問があります。
alt="画像の代わりの文字1"の「画像の代わりの文字1」の意味が、少し判りません。例でいいので、是非教えてくださいm(_ _)m
今度、使ってみたいです。

コメント

>まゆびさん、おはよーございまっす♪

>オオーw(*゜o゜*)w これはとっても分かりやすい記事ですね!!
(///o///)ゞ テレテレ ありがとーございまっす♪とても励みになりまっす m(_ _)m

>私はimgの中にクラスを入れるタイプで回りこみをしていますが、
>divに入れるというのもありですね。なるほどー!!
えへへ・・・そうなんですよ♪ yozoも通常はimgの中にclass="imgleft"を入れているんです。今回は、一つ一つの画像にdivでの枠をつけていますから、さらにdivのclass="imgleft"で回り込みの設定をしました。これで左右の配置はOKですね。(゚-゚*)(。。*)ウンウン

>うさもちゃんのキャプの言葉がナイスでした!!☆⌒d(*^ー゜)b グッ!!
「わぁいヽ(゚ー゚*ヽ)(ノ*゚ー゚)ノわぁい まゆびさん、ありがとー♪ (*^-^)」by うさも

コメント

>miyuさん、おはよーございまっす♪いらっしゃいませー♪

>今 yozoさんのブログに出会い そしてとてもわかりやすい説明なので 
>PC初心者の私でもちゃんと並べる事が出来て とっても嬉しいです。
たった今、お邪魔させていただきました。うまく左に2つ並んでいますね♪
お役に立ててうれしーですよ♪(=⌒▽⌒=) ニャハハハ♪

>これからも 色々と参考にさせていただきながらカスタマイズを勉強していこうと
>思っています。どうぞ宜しくお願いします(*^_^*)
はい♪yozoこそ、参考にしていただけるようにがんばりますね♪
こちらこそよろしくお願いします m(_ _)m

コメント

>ネーちゃんさん、おはよーございまっす♪

>デザイン、変えたんですね。秋らしくていいです。
そーですか♪ ありがとーございまっす♪ m(_ _)m
ハロウィンも終わって、大阪もそろそろ紅葉が見ごろになりますので、
壁紙を変更してみました。v(≧∇≦)v いえぇぇぇぇいっ♪

>alt="画像の代わりの文字1"の「画像の代わりの文字1」の意味が、少し判りません。
imgタグの中のaltは画像が表示されないときに画像の替わりに表示される文字なんです。この記事の一番最初の画像だったら、alt="うさもの台詞 「便利♪」"のような記述にすればいいかもしれませんね。ちなみにyozoは画像ファイル名にしています。ヾ( ̄o ̄;)オイオイ
altのうまい使い方は、ネットで検索してみても参考になる記事がたくさんあると思いますよ。お時間あるときにでも探してみてくださいね。m(_ _)m

コメント

yozoさん、こんにちは!
オオ~!すごく分かりやすいです!
画像を並べて表示するのにはそんな技があったんですね…!
慣れてくると、画像の配置も自分好みにしたいなんて思うんですけど…
今使っているブログ人では無料だと色々な制約が多くて;;
初心者用に親切設計なんですが、その親切がかえってアダになっているような気がします^^;
思い切ってFC2に移転させようかしら~なんて思っちゃいます^^;

コメント

>しゃおりんさん、こんばんはー♪

>画像を並べて表示するのにはそんな技があったんですね…!
そうなんですよ♪せっかくたくさんの画像があっても自在に配置できないと、ついつい画像を使用するのが億劫になっちゃいますもんね。yozoもいつもこの配置については苦労します。yozo自身が、この記事をコピペして楽しようという魂胆なんですよ(*^-^)

>初心者用に親切設計なんですが、その親切がかえってアダになっているような気がします
そうかもしれませんね。親切ということは、自在にならないようになっているはずですもんね。お世話になっておりながら、「余計なお世話だよ!」なんていうわけにもいきませんしね(^-^;

>思い切ってFC2に移転させようかしら~なんて思っちゃいます^^;
あはは・・・きっとその方がストレスは無くて済むでしょうね。FC2ブログだけでなく、忍ブログやら、xareaブログなどもカスタマイズ自由でやりたい放題できるようですが、とりあえずyozoはここのFC2ブログお薦めですよ。なぁ~んてCMしておきまっすヾ( ̄o ̄;)チガウッテバ、、、

コメント

こんばんは!
前に画像の間に文字を入れる回り込みを教えていただいてずっと活用しています。
なるほど今回は並べた画像の隣に文字を置くんですね。
きっとこちらもいずれ使わせていただくことになるかもです。
ココログはCSS編集が出来ないけれど、とても参考になります。
FC2も何故かCSS編集してないかも・・・はい、ちゃんと次回までにはしておかないとね(^^;
そのままタグで置いてました、画像・・・恥

コメント

>ととろさん、こんばんはー♪

>前に画像の間に文字を入れる回り込みを教えていただいてずっと活用しています。
もうばっちりご自分で使いこなせていますもんね♪きっかけになれてうれしいですよ♪

>なるほど今回は並べた画像の隣に文字を置くんですね。
>きっとこちらもいずれ使わせていただくことになるかもです。
XHTML1.1では非推奨となるようですが、XHTML1.0ですから、ととろさんがココログでされているように、style属性で、同じようにできますよ。{ }の中味をstyle=" "の中に書くだけですからね♪そのうちココログもCSS編集できるようになるのでは・・・と思うのですが・・・(^○^)

>FC2も何故かCSS編集してないかも・・・はい、ちゃんと次回までにはしておかないとね(^^;
あはは・・・FC2ならそのままできますからね。しかもCSS編集といっても0からやるわけでもなし、楽勝だと思いますよ。(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪

>そのままタグで置いてました、画像・・・恥
いえいえ♪恥だなんてそんなことはありませんよ。できればいいのですからね。そのままでも、左に2つ並びますね。ただ、その右側に文字を書くのは無理でしょ?その方法なんですよ♪

コメント

こんにちはー。yozoちゃん。
私も出遅れちゃった。遅くなってごめんね・・・。

わお♪これいいねーー!!!とっても参考になるよーーー♪
いつも私の記事だと、下に文章が入る形だったから。
関連記事も見直してみたんだけど、これとっても便利だなぁー!!!って思った。
早速明日にでも使ってみたいなぁ♪うんうん。
いつも親切な記事でとっても分かりやすかったよ♪
なるほどね。
エキサイトの時は、右、左、中央って選べたもんね。
それが出来なくなっちゃったから、どうしてるのかなぁ・・・。っては思っていたんだよ。
ありがとねーー☆

コメント

>enuちゃん、こんばんはー♪

>私も出遅れちゃった。遅くなってごめんね・・・。
あはは・・・どんまい♪どんまい♪お互いOKということにしましょうか♪
ってyozoがしきっていーのでしょうか(>▽<;; アセアセ

>いつも私の記事だと、下に文章が入る形だったから。
ふふふ・・・画像のとなりに文字を回り込ませるって言うんですよ。
とりあえず、設定は簡単だからね。楽しんでやってみてくださいね♪(*^-゚)vィェィ♪

>エキサイトの時は、右、左、中央って選べたもんね。
そうですね。ほとんど意識せずに、画像の続きに文章を書けば、自動的に回り込ませるようになってましたね。本当はこの記事のような設定をしなくちゃいけなかったんですよ。でも、難しくないですからね。チャレンジしてみてくださいね!\(*⌒0⌒)bがんばっ♪

コメント

yozo様 こんばんは♪

大変わかりやすい解説をありがとうございます!
この記事を見ながら、本日挑戦いたしました。
なんとかできたかな ふぅ。

これからも参考にさせてくださいね。
ありがとうございました♪

コメント

>weraさん、こんばんはー♪

>大変わかりやすい解説をありがとうございます!
>この記事を見ながら、本日挑戦いたしました。なんとかできたかな ふぅ。
おお!できましたか!それはお役に立ててうれしいですよ♪
オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
こちらこそ今後ともよろしくお願いしまっす m(_ _)m

コメント

こんにちはー。yozoちゃん。
早速回り込みの解除してみたんだけどうまくいかないの。
そのまま文字がコードが表示されちゃうんだよ・・・。
>="画像の代わりの文字" width="幅" height="高さ"
ここってそのままでOK??
なんでかうまくいかないんだぁ・・。
早速やってみたんだけどね。
ダメなのかなぁ・・・。
どこかがおかしいんだろうなぁ・・・。
もし時間があったら教えてくれたら嬉しいなぁ☆

コメント

>enuちゃん、おはよーございまっす♪

>alt="画像の代わりの文字" width="幅" height="高さ"
>ここってそのままでOK??
いえいえ、ちゃんと入力してくださいね♪
altは自分でその画像の説明を" "の中に入力してください。
widthとheightは、画像をアップロードしたときに、表示されていませんか?その数字ですよ。画像によって違いますからね♪
詳しくは下の記事(関連記事の2です)を見てくださいね。\(*⌒0⌒)bがんばっ♪
http://yozoblog2.blog63.fc2.com/blog-entry-378.html

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。