FC2ブログ

スポンサーサイト

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

  • コメント : -
  • | このエントリーを含むはてなブックマーク
  • トラックバック : -
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/54-8551708b

-件のトラックバック

-件のコメント

[C36] koujiさんへ

お返事遅くなってしまいすいません。

ものすごいうれしいコメントです。
どうやったら色々と記事を見やすくできるのか試行錯誤しましたから。
  • 2005-10-11
  • kazu&megu
  • URL
  • 編集

[C35] 初めまして。

とても為になりました。
自分は初心者なんですが、そろそろプログラムを勉強したいなぁと思っていたら、こちらのサイトに出会いました。
とても分かり易くて本当に勉強になります。
これから活用させてもらいます!

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

ブログの表示を中央にしたい。

ブログをセンタリングするには一般的な方法として、全体をDIV要素で囲んで、左右のマージンを自動設定することでブログをセンタリングするというものになります。

サンプルとしては、こんな感じが一般的でしょうか?

■ HTML編集画面 ■

<body> <div id="container"> 記事本体部分やメニューなどのコンテンツ部分あれこれ </div> <script type="text/javascript" charset="utf-8" src="//static.fc2.com/comment.js" defer></script> <script type="text/javascript" src="//static.fc2.com/js/blog/blog_res.js" defer></script> <div id="fc2_bottom_bnr" style="position:fixed;z-index:10000;left:0;bottom:0;width:100%;display:block;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#70000000,EndColorStr=#70000000);background:rgba(0,0,0,0.7);"> <div id="fc2_bottom_bnr_img" style="display:block;width:728px;height:94px;margin:0px auto;padding:10px 0px 14px;"> <iframe src='//assys01.fc2.com/1341' style='width:728px;height:90px;border:none;' scrolling='no'></iframe><!-- FC2管理用 --><img src="//media.fc2.com/counter_img.php?id=1505" width="1" height="1"><!-- FC2管理用 --> <div style="color:#C0C0C0;text-align:center;font-size:9px;margin:0px;padding:2px 0px 0px;">上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。</div> </div> <span id="fc2_bottom_bnr_close" style="cursor:pointer;display:block;position:absolute;padding:5px;top:0;right:0;width:20px;height:20px;opacity:0.8;max-width:100%;max-height:100%;"> <img src="//blog-imgs-61.fc2.com/t/e/s/test0006/fc2_bottom_bnr_close.png" width="20" height="20" style="border:none;width:20px;height:20px;max-width: 100%;" /> </span> </div> <script type="text/javascript"> (function(w, d) { var area = d.getElementById('fc2_bottom_bnr'),areaStyle = area.style; var getScrollMax = function() { return d.documentElement.getBoundingClientRect().height - w.innerHeight; }; var getScrollCurrent = function() { return d.documentElement.scrollTop || d.body.scrollTop; }; var overlayPosition = function() { if (getScrollMax() > getScrollCurrent()) { areaStyle.bottom = 0; areaStyle.top = 'auto'; } else { areaStyle.bottom = 'auto'; areaStyle.top = 0; } }; var closeBtn = d.getElementById('fc2_bottom_bnr_close'),close = function() { area.style.display = 'none'; }; if (w.addEventListener) { w.addEventListener('resize', overlayPosition, false); w.addEventListener('scroll', overlayPosition, false); closeBtn.addEventListener('click', close, false); } else { w.attachEvent('onresize', overlayPosition); w.attachEvent('onscroll', overlayPosition); closeBtn.attachEvent('onclick', close); } })(window, document); </script> </body>


■ CSS(スタイルシート) ■

div#container {
width : 780px; /* コンテンツ幅を780pxに設定 */
margin-left : auto; /* 左側のマージンを自動計算 */
margin-right : auto; /* 右側のマージンを自動計算 */
}



でも実は、これだけでは不十分だったりします。

古いバージョンのブラウザなどでは、左右のマージンを【AUTO】に設定してもセンタリングしてくれないんですね。

そこで、インターネットエクスプローラーのバグを利用することになるのですが、次のように記述します。


body {
text-align : center; /* バグを利用してブロックレベル要素をセンタリング */
}

div#container {
width : 780px; /* コンテンツ幅を780pxに設定 */
margin-left : auto; /* 左側のマージンを自動計算 */
margin-right : auto; /* 右側のマージンを自動計算 */
text-align : left; /* body要素で指定したセンタリングを戻す */
}



通常はテーブルやDIV要素をセンタリングさせるには、【text-align】は使われません。

。。。というのも、本来【text-align】プロパティは、インライン要素の位置揃えをする為のものだからなんですね。

でもそれをバグにより【text-align】でDIV要素もセンタリングされてしまうということなんです。

もしかしたら、今後インターネットエクスプローラーのバージョンがあがることで、違った記述方法がでてくるかもしれませんけどね。

蛇足として、私のブログの場合ですと、センタリングとは少し違いますが、opera用の文字サイズやおまじないをいろんなところに施しておりますんで、恐らく(全て確認してませんが)ほとんどのもに対応できていると思います。


<<< BACKさあ!ブログ(blog)をカスタマイズしよう!のTOPページへ>>>


スポンサーサイト

この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://morepc.blog21.fc2.com/tb.php/54-8551708b

0件のトラックバック

2件のコメント

[C36] koujiさんへ

お返事遅くなってしまいすいません。

ものすごいうれしいコメントです。
どうやったら色々と記事を見やすくできるのか試行錯誤しましたから。
  • 2005-10-11
  • kazu&megu
  • URL
  • 編集

[C35] 初めまして。

とても為になりました。
自分は初心者なんですが、そろそろプログラムを勉強したいなぁと思っていたら、こちらのサイトに出会いました。
とても分かり易くて本当に勉強になります。
これから活用させてもらいます!

コメントの投稿

投稿フォーム

投稿した内容は管理者にだけ閲覧出来ます

スポンサードリンク


Recent-enries

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