2006年04月22日
センタリング♪
2006/08/17 17:00追記
画像タグの<img>のalign属性は非推奨属性ですから、CSSを使って回り込みを設定しましょう。現在、ブログの世界ではHTML4.01からXHTMLへと移行しているところです。XHTMLに対応させておかないと、ブラウザによっては上手く表示されない等の不具合を招くことにもなりかねません。ブログの手引きとして、回り込みのしかた、センタリングの仕方としては不適切な記事であったと思います。ここにお詫びして訂正させていただきます。m(_ _)m
2006/12/06 17:30追記
センタリングについて、より詳しく解説した記事をUPしました。この記事よりも参考になるかと思いますので、ここで案内させていただきます。詳しい記事はコチラ→ブロックレベル要素のセンタリング（CSS編集）
- 画像を左に配置して右側に文章を書くときには、
<img src="http://〜省略〜" style="float:left;">･･･････
････画像の右側の文章････<br style="clear:both;" />とします。 - 画像を右に配置して左側に文章を書くときには、
<img src="http://〜省略〜" style="float:right;">･･･････
････画像の右側の文章････<br style="clear:both;" />とします。
<img>の回り込みのfloatは、画像の隣に文章を書くための属性なので、当然画像の中心（center）に文章を書くなんていう設定は不要なのですね。ですから、float:center;としても全くセンタリングされないわけです。
画像のセンタリングは、
<p style="text-align: center;"><img src="http://〜省略〜" ></p>とすればできますよ。また、ブログのCSS編集の画面に、下のようなセレクタを設定すると楽になります。
CSS編集
/*画像の回り込みの設定class="imgleft"*/
.imgleft
{
float:left;
}
.imgright
{
float:right;
}
.imgcenter
{
text-align: center;
}記事投稿
- 画像を左に配置して右側に文章を書くときには、
<img src="http://〜省略〜" class="imgleft">･･･････
････画像の右側の文章････<br style="clear:both;" />とします。- 画像を右に配置して左側に文章を書くときには、
<img src="http://〜省略〜" class="imgright">･･･････
････画像の右側の文章････<br style="clear:both;" />とします。- 画像のセンタリングは、
<p class="imgcenter"><img src="http://〜省略〜" ></p>とします。
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoの気が向いたと記2.0の関連記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New BlogPet「うさも」の背景紹介〜もうすぐGW１〜 | Top | 3000ぺた♪ﾟ・:*「うさも」のキリぺた帳*:・ﾟ Old≫
トラックバックURL
コメント
imgにはalign="center"は無理なのですね!!
やったことないけど、できると思っていました!!
この記事を読んでいなかったら
「なんで出来ないのー!!ヾ(｡｀Д´｡)ﾉ彡☆ﾌﾞｰﾌﾞｰｯ!! 」って
無駄な時間を過ごしたかもしれません。
役立つ記事をありがとうございました。＜(＿ ＿)＞
Posted by まゆび at 2006.04.22 22:22 | edit
コメント
＞imgにはalign="center"は無理なのですね!!
そうなんですよ♪今までに何度か同じことをして失敗している
yozoです♪（苦笑）
＞「なんで出来ないのー!!ヾ(｡｀Д´｡)ﾉ彡☆ﾌﾞｰﾌﾞｰｯ!! 」って
＞無駄な時間を過ごしたかもしれません。
＞役立つ記事をありがとうございました。＜(＿ ＿)＞
とても励みになりますよ。ありがとうございまっす m(_ _)m
センタリングは自分もよく間違えるのですが、
結構よく質問されますよ♪意外な盲点かもしれませんね♪
(*'ー'*)ふふっ♪
Posted by yoblog at 2006.04.22 22:50 | edit
コメント
よく、写真などを、真ん中に持っていきたいと思っていても、やり方がわからずにいました。こういう方法が、あるのですね。勉強になります。
今度、真ん中にもって行きたい時にやってみます。
Posted by ネーちゃん at 2006.04.23 01:11 | edit
コメント
＞よく、写真などを、真ん中に持っていきたいと思っていても、
＞やり方がわからずにいました。
お役に立てたようでうれしいですよー♪ (▼-▼*) ｴﾍ♪
エキブロは全然意識しなくてもいいのですが・・・
他のブログに投稿するときに、
yozoもすぐに忘れて「あれ？」ってなっちゃいます（笑）
またお試しあれ♪ m(_ _)m
Posted by yoblog at 2006.04.23 11:26 | edit
コメント
なるほど、先日画像表示のｈｔｍｌをみていて、右と左は分かったのでアップしてから変更する事を覚えた(遅っ）ととろです。
真ん中も教えてもらえたので、うれしいです。文字にも使えるのがうれしいですね。
場当たり的にそこだけなぶって、帳尻を合わせようとしている私としてはありがたい情報でした＞そう、場当たりなの、だから「まっ、いいや」って事ばかりやってるの（＾＾；
Posted by ととろ at 2006.04.23 20:52 | edit
コメント
そうなんだー。考えもせずに・・・。今までやってきました・・・。やばっ。
この方法は、エキサイト以外のブログでも活用できるのかな。。。
この間教えていただいたブログで、画像が全部左寄りになっちゃって、しかも画像の隣に文章がかけなくて、、、ちょっと困ってるとこだったので・・・。
あ、、、また始まったぞーーー。enuの質問攻撃。
もしよかったら教えてください・・・。いつもごめんねーーー。
Posted by enu50430 at 2006.04.24 11:01 | edit
コメント
＞真ん中も教えてもらえたので、うれしいです。
＞文字にも使えるのがうれしいですね。
お役に立てたようでうれしいですよ♪
よく他所のブログでも、これで文全体を
センタリングしているのを見かけますね♪ (*^-^)
＞そう、場当たりなの、だから「まっ、いいや」って
＞事ばかりやってるの（＾＾；
そうなんですか♪（笑） yozoも「できたらいいやん！」と思って「できる」ことを優先してますよ。それで後になって「あっ、そうなの♪」って納得してます（笑）
Posted by yoblog at 2006.04.24 13:25 | edit
コメント
＞この方法は、エキサイト以外のブログでも活用できるのかな。。。
できますよ♪どこのブログでもいけます。安心して使ってくださいね♪
＞この間教えていただいたブログで、画像が全部左寄りに
＞なっちゃって、しかも画像の隣に文章がかけなくて、、、
ははは・・・yozoもなりましたよ♪(^○^)
この記事は偶然ですが、ぴったりじゃないっすか♪（驚）
FC2やlivedoorブログでのやり方そのものですよ。
４，５人の別の方から質問されたので、記事にしたのですよ♪
＞あ、、、また始まったぞーーー。enuの質問攻撃。
＞もしよかったら教えてください・・・。いつもごめんねーーー。
ははは・・・全然OKですよ♪yozoのスキルUPにもなりますからね。
どんどん遠慮なく質問してくださいね♪
答えられなかったら、ごめんしてくださいねー♪（笑）(o^-^o) ｳﾌｯ
Posted by yoblog at 2006.04.24 14:33 | edit