Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895

Warning: Invalid argument supplied for foreach() in /home/takemitasaki/route58.org/wp-content/plugins/head-cleaner/head-cleaner.php on line 2895
三段組 | 国道58号線をのんびりと行く

アーカイブ

‘三段組’ タグのついている投稿

WordPressのサイドバー 三段組のメインを先に持ってくるCSS

2010 年 5 月 11 日 コメントはありません

WordPressのサイドバー 三段組のメインを先に持ってくるCSS
というのをいい加減やってみた。
前々からやらなきゃと思っていたのですがCMSのワードプレスはほとんどのテーマがindex.php(single.php,archive.phpなども)とsidebar.phpが分かれているので所謂メインコンテンツと右メニューを一括りにして、その後に左メニューを配置するという、定番ワザが使えない。
SEOは後回しでとにかくコンテンツ作りってやってたら、もうDIVとか訳分からなくなってしまい。。。
ということで次のWordpress用にメモ。
サイトの全体幅を1000px、メインコンテンツを600px(左右のMarginを10px取るので正味580px)、左右のサイドバーを200pxとしてみる。

HTMLソースは以下のような感じで作成。

<div id="wrap">
	<div id="header">
		ヘッダー。ロゴとかH1とか。
	</div>
		<div id="content">
			<div id="center">
				メイン記事
			</div>
			<div id="leftbar">
				左サイドバー
			</div>
			<div id="rightbar">
				右サイドバー
			</div>
		</div>
	<div id="header">
		フッター。コピーライトとか。
	</div>
</div>

このソースに合うようにCSSを作成していく。

#content {
width: 1000px;
text-align: left;
margin:0px;
padding:0px;
background-color: #CCCCCC;
}

#center {
position:relative;
float: left;
left:200px;
width: 600px;
height:100%;
margin:0px;padding:0px 10px;
background-color: #FFFFFF;
overflow: hidden;
}

#leftbar {
position:relative;
float: left;
left:-800px;
width: 200px;
height:100%;
margin:0px;padding:0px;
background-color: #CCCCCC;
overflow: hidden;
}
#rightbar {
position:relative;
float: left;
left:200px;
width: 600px;
height:100%;
margin:0px;padding:0px 10px;
background-color: #CCCCCC;
overflow: hidden;
}

ギター弾きに貸す部屋はねぇ~ ♪

Positions by Seo-Watcher