WordPressテーマTwenty Elevenでコンテンツ部の投稿記事表示エリアとサイドバー部の表示エリアを広げる方法

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.3.1」のテーマ「Twenty Eleven1.3」での話であり、バージョンが大きく異なると動作しない場合があります。
※2012/06/03追記 「WordPress3.3.2」での動作を確認しました。
※2012/06/20追記 「WordPress3.4」テーマ「Twenty Eleven1.4」での動作を確認しました。
※2013/01/07追記 テーマ「Twenty Twelve」の場合については「WordPressテーマTwenty Twelveでコンテンツとサイドバーの表示エリアを変更する方法」を参考にして下さい。

投稿記事表示エリアの左右とサイドバー部の右に余白があり、投稿記事などが表示されるエリアが狭くなっています。WordPressテーマTwenty Elevenのデフォルトの設定だと、思った以上にこの余白があって、余白を減らし表示エリアを広げたいと思っていました。

一応出来たので、コンテンツ部の投稿記事表示エリアとサイドバー部の表示エリアを広げる方法を説明します。

コンテンツ部の投稿記事表示エリアとサイドバー部の表示エリアを広げる方法

/wp-content/themes/twentyeleven内にある
「style.css」の「Structure」の箇所
を変更するだけです。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

例)「style.css」


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

|・「#content」の「margin:」の数値が、投稿記事表示
|エリアの順番に上、右、下、左のマージン量なので、
|数値を変更する。
|・「width:」が表示エリアの幅なので数値を変更する。

|・「#secondary」の「margin-right:」の数値が、
|サイドバー部の表示エリアのマージン量なので、
|数値を変更する。
∨・「width:」が表示エリアの幅なので数値を変更する。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
#content {
	margin: 0 34% 0 1%;
	width: 70%;
#secondary {
	float: right;
	margin-right: 1%;
	width: 25%;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これでコンテンツ部の投稿記事表示エリアとサイドバー部の表示エリアを広げることが出来ます。好みにより数値は変更して下さい。

サイドバー部の表示エリアを広げるため、「#secondary」の「width:」の数値を約26%以上にするとレイアウトが崩れるみたいです。この場合、「#primary」の「margin:」の2番目の-26.4%(右のマージン量)の数値も合わせて調整する必要があります。

※2012/07/04追記 下記設定に変更


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -34.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 1%;
	width: 63%;
}
#secondary {
	float: right;
	margin-right: 1%;
	width: 33%;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Pocket
LINEで送る

スポンサーリンク


スポンサーリンク