あむちょです。

このブログのサイドバーを左にしてみたのでついでにやり方をメモ。

[amazonjs asin=”4873115574″ locale=”JP” title=”インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針”]

最近買ったインターフェイスの心理学という本曰く、目線は左上から始まってどうのこうのとあったので、より視界の中にサイドバーを収めるために左メニューにしてみました。

このブログはWordPressを使っており、見た目はテーマを変更することで自由に変えれるけど、すべてが左メニューに対応している訳ではないので、CSSをいじって対応させました。テーマはTwenty Tenを使ってます。

まずはFTPクライアントソフトでwp-content/themes/テーマ名/style.cssをダウンロード。

style.cssの70行あたり以下の

<br />
#container {<br />
	float: left;<br />
	margin: 0 -240px 0 0;<br />
	width: 100%;<br />
}<br />
#content {<br />
	margin: 0 280px 0 20px;<br />
}<br />
#primary,<br />
#secondary {<br />
	float: right;<br />
	overflow: hidden;<br />
	width: 220px;<br />
}<br />
#secondary {<br />
	clear: right;<br />
}<br />
#footer {<br />
	clear: both;<br />
	width: 100%;<br />
}<br />

を以下のように変更

<br />
#container {<br />
	background: #f1f1f1;<br />
	float: right;<br />
	margin: 0  0 0 -240px;<br />
	width: 100%;<br />
}<br />
#content{<br />
	background: #fff;<br />
	margin: 0 0 0 200px;<br />
	padding: 1.6em 15px 15px 15px;<br />
}<br />
#primary,<br />
#secondary {<br />
	background: #f1f1f1;<br />
	float: left;<br />
	overflow: hidden;<br />
	width: 200px;<br />
}<br />
#secondary {<br />
	clear: left;<br />
}<br />
#footer {<br />
	clear: both;<br />
	width: 100%;<br />
}<br />

ついでに色も変えて、サイドバーと記事を区切ってます。177行あたりの

<br />
#wrapper {<br />
	background: #f1f1f1;<br />
	margin-top: 20px;<br />
	padding: 0 20px;<br />
}<br />

と211行あたり

<br />
body {<br />
	background: #fff;<br />
}<br />

でこのブログの配色になります。どこがどこに対応してるかわかりにくいです。

wordPressを使っているブログで、左メニューは割りと少数な気がするけど、どうなんでしょうか。読みやすさは、右メニューの方がいい気がしないでもない。

とりあえずページビューに変化があるかしばらく見てみないとわかりません。

[ad]