【Twenty Fourteen】メインコンテンツ部分の幅を広げて、プライマリーサイドバーの幅を狭くするように修正⇒style.css 変更メモ

デフォルトの状態では、メインコンテンツ部分の幅が狭かったので、僕の場合コンテンツ部分の幅を広げ、左側のサイドバーの幅を狭めるようにカスタマイズしています。

実際に僕が変更した部分を備忘録として残しておきます。

【TwentyFourteen テーマファイルカスタマイズシリーズ】

style.css【6.0 Content】の部分⇒メインコンテンツ部分の幅を広げる

ここでは変更後のコードのみ載せます。

幅の変更なので、実際変えるのはピクセル値のみです。変更前の数値はコメントで横に残しておきます。コメントを書いていない行はデフォルトのままです。

ここを変更するとメインコンテンツ部分の幅が広がります。

（メインコンテンツ部分を474pxから650pxに変更しています。）

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.content-area {
	padding-top: 48px;
}

.hentry {
	margin: 0 auto 48px;
	max-width: 790px;/*【コンテンツ幅調整】変更前⇒672px*/
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
	max-width: 650px; /*【コンテンツ幅調整】変更前⇒474px*/
}

.page-content {
	margin-bottom: 48px;
}

併せてメインコンテンツの下の部分にある【6.7 Post/Image/Paging Navigation】の部分も幅を広げます。

/**
 * 6.7 Post/Image/Paging Navigation
 * -----------------------------------------------------------------------------
 */

.nav-links {
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	hyphens:         auto;
	word-wrap: break-word;
}

.post-navigation,
.image-navigation {
	margin: 24px auto 48px;
	max-width: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
	padding: 0 10px;

同じく【6.9 Archives】、【6.10 Contributor Page】、【6.14 Comments】も幅を合わせておきます。

/**
 * 6.9 Archives
 * -----------------------------------------------------------------------------
 */

.archive-header,
.page-header {
	margin: 24px auto;
	max-width: 650px;/*【コンテンツ幅調整】変更前⇒474px*/

/**
 * 6.10 Contributor Page
 * -----------------------------------------------------------------------------
 */

.contributor {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:      border-box;
	padding: 48px 10px;
}

.contributor:first-of-type {
	padding-top: 24px;
}

.contributor-info {
	margin: 0 auto;
	max-width: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
}

/**
 * 6.14 Comments
 * -----------------------------------------------------------------------------
 */

.comments-area {
	margin: 48px auto;
	max-width: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
	padding: 0 10px;
}

【10.0 Multisite】の部分もデフォルトで474pxとなっていますので、変更しておきます。

/**
 * 10.0 Multisite
 * -----------------------------------------------------------------------------
 */

.site-main .widecolumn {
	padding-top: 72px;
	width: auto;
}
.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
	margin: 0 auto 48px;
	max-width: 650px;/*【コンテンツ幅調整】変更前⇒474px*/
	padding: 0 30px;
}

プライマリーサイドバーの幅を狭くします（僕の場合、プライマリーサイドバーはあまり使わないので）

完全に削除も考えたのですが、デザイン的に残した方がしっくりきましたので、幅を狭めて残すことにしました。

下記の部分を変更します。（ここも上記と同じくコメントがある行のみ変更しています。）

@media screen and (min-width: 1080px) {
	.search-box .search-field {
		width: 324px;
	}

	.site-content,
	.site-main .widecolumn {
		margin-left: 90px;/*【コンテンツ幅調整】変更前⇒222px*/
	}

	.site:before {
		width: 90px;/*【コンテンツ幅調整】変更前⇒222px*/
	}

	.search-box-wrapper,
	.featured-content {
		padding-left: 90px;/*【コンテンツ幅調整】変更前⇒222px*/
	}

	#secondary {
		width: 60px;/*【コンテンツ幅調整】変更前⇒162px*/
	}

	.secondary-navigation,
	.secondary-navigation ul ul {
		width: 90px;/*【コンテンツ幅調整】変更前⇒222px*/
	}

	.secondary-navigation ul li:hover > ul,
	.secondary-navigation ul li.focus > ul {
		left: 202px;
	}

プライマリーサイドバーの幅を狭くすると、メインコンテンツとバーの間に隙間ができるので、下記の部分でs調整します。（デフォルトよりも左に寄せるようにします。）

@media screen and (min-width: 1008px) {
	.search-box-wrapper {
		padding-left: 182px;
	}

	.main-content {
		float: left;
	}

	.site-content {
		margin-right: 30%;/*【コンテンツ幅調整】変更前⇒29.04761904*/
		margin-left: 100px;/*【コンテンツ幅調整】変更前⇒184*/
	}