[WordPress]サイドバーと記事の幅を変更

Posted on

Sponsored Link

記事が横に広がりすぎてて読みにくかったし、人気のブログとかだいたい記事の幅が狭くてサイドバーは広めなんでサイドバーの色を変えたついでに真似してみました。

スタイルシート(style.css)はこういう感じです。

.site-content {
	float: left;
	margin: 0 -36% 0 0;
	width: 100%;
}
#content {
	margin: 0 36% 0 0;
	padding: 1.6em 15px 15px 15px;
}
#secondary { /* Sidebar 1 */
	float: right;
	overflow: hidden;
	padding: 1.6em 5px 0 5px;
	width: 34%;
	background-color:#EEE8AA
}
.site-footer {
	clear: both;
	width: 100%;
}

%とかemとかpxとか混じっててややこしいですが、微調整する時めんどくさかったのでこうしました。
図にするとこんな感じだと思います。

スクリーンショット 2013-01-12 14.12.55

%の比率が丁度良くないとサイドバーが消えたりするので、いろいろ試しながらがんばってください。

こちらの記事を参考がもっと詳しくて参考になると思います。
Twenty Elevenのサイドバーのサイズを調節するために。|むーさんブログ

ちなみにサイドバーにサムネ付きで人気記事貼ったら直帰率めちゃめちゃ下がってびびりました。
オススメです。




SHARE:)
このエントリーをはてなブックマークに追加 LINEで送る
Yahoo!ブックマークに登録

 
rss feed follow us in feedly Subscribe with livedoor Reader


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>