スポンサーリンク
2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。
しばらくぶりのスキン改造プロジェクトです。
今回は左右のサイドバーの横幅を入れ替えます。
そのために、ファンブログの３カラムスキンの詳細な構造を説明します。
このスキンの元は左から２００ピクセル、５００ピクセル、１６０ピクセルで
左サイドバーの方が横幅があったのですが、
右のサイドバーの上に正方形２００ピクセルの広告を貼りたい！
ということで、右のサイドバーを広くしてその分、左のサイドバーを狭めます。
使っているファンブログの３カラムスキンの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 */
}
新しいスタイルシートを適用した結果、下のようになりました。
関連コンテンツ
スポンサーリンク