--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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
人気blogランキング


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

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

スポンサーサイト

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

メイン

≪New BlogPet「うさも」の背景紹介?もうすぐGW1? | Top | 3000ぺた♪゚・:*「うさも」のキリぺた帳*:・゚ Old≫

トラックバックURL


コメント

yozoさん、こんばんは♪ヾ(=^▽^=)ノ
imgにはalign="center"は無理なのですね!!
やったことないけど、できると思っていました!!
この記事を読んでいなかったら
「なんで出来ないのー!!ヾ(。`Д´。)ノ彡☆ブーブーッ!! 」って
無駄な時間を過ごしたかもしれません。
役立つ記事をありがとうございました。<(_ _)>

コメント

>まゆびさん、こんばんはー♪
>imgにはalign="center"は無理なのですね!!
そうなんですよ♪今までに何度か同じことをして失敗している
yozoです♪(苦笑)
>「なんで出来ないのー!!ヾ(。`Д´。)ノ彡☆ブーブーッ!! 」って
>無駄な時間を過ごしたかもしれません。
>役立つ記事をありがとうございました。<(_ _)>
とても励みになりますよ。ありがとうございまっす m(_ _)m
センタリングは自分もよく間違えるのですが、
結構よく質問されますよ♪意外な盲点かもしれませんね♪
(*'ー'*)ふふっ♪

コメント

yozoさん、こんばんわ\(^0^)/
よく、写真などを、真ん中に持っていきたいと思っていても、やり方がわからずにいました。こういう方法が、あるのですね。勉強になります。
今度、真ん中にもって行きたい時にやってみます。

コメント

>ネーちゃんさん、おはよーございまっす♪
>よく、写真などを、真ん中に持っていきたいと思っていても、
>やり方がわからずにいました。
お役に立てたようでうれしいですよー♪ (▼-▼*) エヘ♪
エキブロは全然意識しなくてもいいのですが・・・
他のブログに投稿するときに、
yozoもすぐに忘れて「あれ?」ってなっちゃいます(笑)
またお試しあれ♪ m(_ _)m

コメント

こんばんは!
なるほど、先日画像表示のhtmlをみていて、右と左は分かったのでアップしてから変更する事を覚えた(遅っ)ととろです。
真ん中も教えてもらえたので、うれしいです。文字にも使えるのがうれしいですね。
場当たり的にそこだけなぶって、帳尻を合わせようとしている私としてはありがたい情報でした>そう、場当たりなの、だから「まっ、いいや」って事ばかりやってるの(^^;

コメント

こんにちは。yozoさん。
そうなんだー。考えもせずに・・・。今までやってきました・・・。やばっ。
この方法は、エキサイト以外のブログでも活用できるのかな。。。
この間教えていただいたブログで、画像が全部左寄りになっちゃって、しかも画像の隣に文章がかけなくて、、、ちょっと困ってるとこだったので・・・。
あ、、、また始まったぞーーー。enuの質問攻撃。
もしよかったら教えてください・・・。いつもごめんねーーー。

コメント

>ととろさん、こんにちはー♪
>真ん中も教えてもらえたので、うれしいです。
>文字にも使えるのがうれしいですね。
お役に立てたようでうれしいですよ♪
よく他所のブログでも、これで文全体を
センタリングしているのを見かけますね♪ (*^-^)
>そう、場当たりなの、だから「まっ、いいや」って
>事ばかりやってるの(^^;
そうなんですか♪(笑) yozoも「できたらいいやん!」と思って「できる」ことを優先してますよ。それで後になって「あっ、そうなの♪」って納得してます(笑)

コメント

>enuさん、こんにちはー♪
>この方法は、エキサイト以外のブログでも活用できるのかな。。。
できますよ♪どこのブログでもいけます。安心して使ってくださいね♪
>この間教えていただいたブログで、画像が全部左寄りに
>なっちゃって、しかも画像の隣に文章がかけなくて、、、
ははは・・・yozoもなりましたよ♪(^○^)
この記事は偶然ですが、ぴったりじゃないっすか♪(驚)
FC2やlivedoorブログでのやり方そのものですよ。
4,5人の別の方から質問されたので、記事にしたのですよ♪
>あ、、、また始まったぞーーー。enuの質問攻撃。
>もしよかったら教えてください・・・。いつもごめんねーーー。
ははは・・・全然OKですよ♪yozoのスキルUPにもなりますからね。
どんどん遠慮なく質問してくださいね♪
答えられなかったら、ごめんしてくださいねー♪(笑)(o^-^o) ウフッ

コメントする

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

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

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


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