しばらくぶりのスキン改造プロジェクトです。
今回は左右のサイドバーの横幅を入れ替えます。
そのために、ファンブログの３カラムスキンの詳細な構造を説明します。このスキンの元は左から２００ピクセル、５００ピクセル、１６０ピクセルで
左サイドバーの方が横幅があったのですが、
右のサイドバーの上に正方形２００ピクセルの広告を貼りたい！
ということで、右のサイドバーを広くしてその分、左のサイドバーを狭めます。
使っているファンブログの３カラムスキンのbodyの中はこういう構造です。
ファンブログの３カラムスキンをいじる場合は、この構造を把握しておく必要があります。
右サイドバーを広げるためには、左サイドバーを狭めるだけではダメで、
idがwrapperの部分も狭めなければうまくいきません。
具体的なスタイルシートの変更は次の通りです。
新しいスタイルシートを適用した結果、下のようになりました。
今回は左右のサイドバーの横幅を入れ替えます。
そのために、ファンブログの３カラムスキンの詳細な構造を説明します。このスキンの元は左から２００ピクセル、５００ピクセル、１６０ピクセルで
左サイドバーの方が横幅があったのですが、
右のサイドバーの上に正方形２００ピクセルの広告を貼りたい！
ということで、右のサイドバーを広くしてその分、左のサイドバーを狭めます。
使っているファンブログの３カラムスキンのbodyの中はこういう構造です。
id="container"
| ヘッダ id="header" | ||||
id="main"
| ||||
| フッタ id="footer" |
ファンブログの３カラムスキンをいじる場合は、この構造を把握しておく必要があります。
右サイドバーを広げるためには、左サイドバーを狭めるだけではダメで、
idがwrapperの部分も狭めなければうまくいきません。
具体的なスタイルシートの変更は次の通りです。
変更前
/* 3 column multi */
body#multi #wrapper {
float: left;
width: 688px;
margin: 0;
padding: 0;
}
body#multi #sidebarLeft {
float: left;
width: 200px;
margin: 0 5px;
line-height: 1.6;
display: inline; /* for IE6 */
}
body#multi #sidebarRight {
float: right;
width: 160px;
margin:0 5px;
line-height: 1.6;
display: inline; /* for IE6 */
}
変更後
/* 3 column multi */
body#multi #wrapper {
float: left;
width: 483px;
margin: 0 0 0 5px;
padding: 0;
}
body#multi #sidebarLeft {
float: left;
width: 160px;
margin: 0 0 0 5px;
line-height: 1.6;
display: inline; /* for IE6 */
}
body#multi #sidebarRight {
float: right;
width: 200px;
margin:0 5px 0 0;
line-height: 1.6;
display: inline; /* for IE6 */
}
新しいスタイルシートを適用した結果、下のようになりました。
