スポンサーサイト

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

[ --/-- ] スポンサー広告 | トラックバック(-) | コメント(-)

Q.全体を右(左)に寄せたい[2右]

A.
メインテンプレート、アーカイブテンプレート、1記事テンプレートを変更するとできます。
表示の位置によってはスタイルシートも変更します。

尚、変更方法はAmenti様を参考にさせていただきました。
大変勉強になって便利な記事がたくさんあります。

以下、変更方法


1.
メインテンプレートの23行目付近に
<div align="center">
というのがあります。
アーカイブテンプレートは23行目付近、1記事テンプレートは26行目付近にあります。

2.
ピッタリ左寄りにするには、1.
<div class="left">
と書き換えます。

3.
ピッタリ右寄りにするには、1.
<div class="right">
と書き換えます。

4.
ピッタリ左ではなく、左側にほんの少しだけ余白(スペース)を入れたい場合は、

スタイルシートの108~117行目付近に
#container_top {
width:800px;
padding:0px;
margin:0px;
border-top:#336699 1px solid;
border-right:#336699 1px solid;
border-bottom:#336699 1px solid;
border-left:#336699 1px solid;
}

というのがあります。

5.
4.の赤文字のところを
margin:0px auto 0px 10px;
と書き換えます。

実際に変更すると
#container_top {
width:800px;
padding:0px;
margin:0px auto 0px 10px;
border-top:#336699 1px solid;
border-right:#336699 1px solid;
border-bottom:#336699 1px solid;
border-left:#336699 1px solid;
}

このようになります。

6.
ピッタリ右ではなく、右側にほんの少しだけ余白(スペース)を入れたい場合は、
4.の赤文字のところを
margin:0px 10px 0px auto;
と書き換えます。

実際に変更すると
#container_top {
width:800px;
padding:0px;
margin:0px 10px 0px auto;
border-top:#336699 1px solid;
border-right:#336699 1px solid;
border-bottom:#336699 1px solid;
border-left:#336699 1px solid;
}

このようになります。
スポンサーサイト
[ 05/31 ] [レイアウト(全体)]2カラムblue 右サイドバー | トラックバック(-) | コメント(-)

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