【ワードプレス】WordPress Theme Twenty Fourteenのメインカラム(中央部分)の幅を変更する方法

webサーバでwordpressを使用していて、テーマにtwenty fourteenを使用している方向けです。
twenty fourteenではデフォルトのメインコンテンツの幅が474pxとかなり狭く、両サイドの空白も広めなため目立ちます。
そこでこの幅とマージンを調整してみました。手順は以下のとおりです。

Wordpressの管理画面を開き、ダッシュボード>外観>テーマの編集 の順に開き、style.cssを選択します。
※テーマは事前に小テーマを作成(バックアップ)、またはsytle.cssノコピーを取っておく等して、問題がある場合に復元できる状態にしておいてください。
style.css編集画面になったら、以下部分を探して修正します。

1058行目辺りを編集

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

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

.hentry {
	margin: 0 auto 48px;
	max-width: 672px;  <--ここを変更
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
	max-width: 474px;  <--ここを変更
}

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

1713行目辺りを編集

/**
 * 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: 474px;  <--ここを変更
	padding: 0 10px;
}

.post-navigation a,
.image-navigation .previous-image,
.image-navigation .next-image {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 11px 0 12px;
	width: 100%;
}
1816行目辺りを編集

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

.archive-header,
.page-header {
	margin: 24px auto;
	max-width: 474px; <--ここを変更
}

.archive-title,
.page-title {
	font-size: 16px;
	font-weight: 900;
	line-height: 1.5;
	margin: 0;
}
1875行目あたりを編集

/**
 * 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: 474px;  <--ここを変更
}

.contributor-avatar {
	border: 1px solid rgba(0, 0, 0, 0.1);
	float: left;
	margin: 0 30px 20px 0;
	padding: 2px;
}
1952行目あたりを編集

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

.comments-area {
	margin: 48px auto;
	max-width: 474px;  <--ここを変更
	padding: 0 10px;
}
3143行目あたりを編集

/**
 * 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: 474px;  <--ここを変更
	padding: 0 30px;
}

また、以下をstyle.cssに追記することで中央表示とコンテンツ幅の拡張が可能です。


/* コンテンツ部横幅拡張&中央表示ここまで */
.site {
margin: 0em auto; /* ページを中央表示 */
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0; /* コンテンツ部分横幅拡張 */
max-width: none; /* コンテンツ部分横幅拡張 */
}

.site-content .entry-header {
padding-right: 0; /* コンテンツ部分横幅拡張 */
}

.site-content footer.entry-meta {
padding-right: 0; /* コンテンツ部分横幅拡張 */
}

.site-content .entry-content,
.site-content .entry-summary,
.page-content {
padding-right: 0; /* コンテンツ部分横幅拡張 */
}
/* コンテンツ部横幅拡張&中央表示ここまで */







[amazon_link asins='4797395168,4883379248,4295000795,4774173800,4774187062,4774182184,B074C3KMMY,4798052817' template='ProductCarousel' store='kuma055-22' marketplace='JP' link_id='dc5cfd4d-d72a-11e8-bb59-df8701e3c6ac']

コメント

タイトルとURLをコピーしました