左右サイドバーの幅を入れ替える

スポンサーリンク


2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。

しばらくぶりのスキン改造プロジェクトです。
今回は左右のサイドバーの横幅を入れ替えます。

そのために、ファンブログの3カラムスキンの詳細な構造を説明します。

このスキンの元は左から200ピクセル、500ピクセル、160ピクセルで
左サイドバーの方が横幅があったのですが、
右のサイドバーの上に正方形200ピクセルの広告を貼りたい!

ということで、右のサイドバーを広くしてその分、左のサイドバーを狭めます。
使っているファンブログの3カラムスキンのbodyの中はこういう構造です。

id=”container”

ヘッダ
id=”header”
id=”main”

id=”wrapper”

左サイドバー
id=”sidebarLeft”
200px
記事部分
id=”entries”
500px

右サイドバー
id=”sidebarRight”
160px

フッタ
id=”footer”

ファンブログの3カラムスキンをいじる場合は、この構造を把握しておく必要があります。

右サイドバーを広げるためには、左サイドバーを狭めるだけではダメで、
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 */
}

新しいスタイルシートを適用した結果、下のようになりました。

変更後


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください