ブログを左寄せ/右寄せ 2007年02月28日(水) 23:18:07

ブログを左または右に寄せます。
次のボタンを押すと当ブログをデモとして左または右に寄せた状態を表示します。(ブラウザの幅は780ピクセル以上でご覧ください)

3カラムの場合
まず各テンプレートの次の行(最初の方にあるクラス名 range となっているテーブル)
<table align="center" cellpadding="0" cellspacing="0" border="0" class="range" width="750">
の属性 align="center" を削除します。(この作業は左右とも共通ですが、この状態で左一杯に寄ります)
そして、スタイルシートの .range { }内に
text-align: left;
margin: 0 auto 0 10px;
というCSS宣言を書き足すと左寄りで左余白が10pxとなります。
右寄せとする場合は
text-align: left;
margin:0 10px 0 auto;
として(IE以外はこれで右寄りになります)
更にIE用にスタイルシートの最初に
body { text-align:right; } /* IE右寄せ */
というルールセットを書いてください。
※ CSS宣言を書き足すとき、手前のCSS宣言の末尾に ; が無い場合は必ず ; を付けてください。(重要)

2カラムの場合
各テンプレートの次の行(最初の方にある<div id="container_top">の手前)
<div align="center">
を左寄せの場合は
<div class="left">
右寄せの場合は
<div class="right">
に書き換えます。(align属性をclass属性へと変更します)
そして、スタイルシートの #container_top { }内にある
margin:0px;

margin: 0 auto 0 10px;
と変更すると左寄せで左余白が10pxとなります。
右寄せとする場合は、これを
margin:0 10px 0 auto;
としてください。
コメント
小文字 太字 斜体 下線 取り消し線 左寄せ 中央揃え 右寄せ テキストカラー 絵文字 プレビューON/OFF
 クッキーに保存

(注)この記事と直接関係のないコメントの投稿はご遠慮頂けますようお願いします

2007年04月05日(木) 21:48:58
ご了解いただきありがとうございます。
トラックバックは始めて挑戦したのですが、どうもうまくできなかったようです。通常のリンクになってしまいました。
できるようになったら修正させていただきます。
2007年04月05日(木) 21:08:26
ame
ご覧頂きありがとうございます。
当ブログ記事で参考となるものがあれば、どうぞご活用ください。

ところで、これはトラックバックではなくコメントですよね?^^;
記事との関連性は十分ありますので、実際に該当記事からトラックバックを送信して頂いても全然OKです。
2007年04月05日(木) 20:15:42
ameさん。
はじめまして、こんばんわ。
2カラムでの表示位置変更方法をまとめようと思いやってみたのですが、何故か全体枠線が画表示されず、こちらで紹介しているのを思い出してトラックバックして参考にさせていただきました。(問題あるようでしたらトラックバック削除してください)
scriptは独自では組む事ができないのでこれからも参考にさせていただきます。ありがとうございました。