Twenty Seventeen 1, メインとサイドの幅調整

Twenty Seventeenを2カラム運用する際のメイン幅を大きく、サイドの幅を小さくしました。サイドバーがある「投稿」「アーカイブ」と、2カラム運用でもサイドバーがない「固定ページ」で分けて書きました。

投稿ページの幅調整

スクリーンサイズが48em (=768px)以上の時、表示エリア(最大1,000px)の内、本文エリアが58％、サイドバーが36%となる指定だったので、本文エリアを広げて、サイドバーを減らしました。

下のコードを「外観→CSS編集」にコピペ。

@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1000px;
		padding-left: 3em;
		padding-right: 3em;
	}

	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 68%;
	}

	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 26%;
	}
}

「100% – メインの幅 – サイドの幅」がメインとサイドの余白の幅です。

「.wrap」の部分は要らないけれど、表示エリアを広げたい場合もあるかと思って、念のため書き出しておきました。

それぞれの「width = ○○%」はお好みで。

固定ページの幅調整

固定ページでは、メインとサイドの配置が逆になっていましたが、基本的にやる事は同じで、スクリーンサイズが48em (=768px)以上の場合のメインとサイドの幅を調整しました。

下記のコードを「外観→CSS編集」にコピペ。

@media screen and (min-width: 48em) {
	.blog:not(.has-sidebar) #primary article,
	.archive:not(.page-one-column):not(.has-sidebar) #primary article,
	.search:not(.has-sidebar) #primary article,
	.error404:not(.has-sidebar) #primary .page-content,
	.error404.has-sidebar #primary .page-content,
	body.page-two-column:not(.archive) #primary .entry-content,
	body.page-two-column #comments {
		float: right;
		width: 68%;
	}

	body:not(.has-sidebar):not(.page-one-column) .page-header,
	body.has-sidebar.error404 #primary .page-header,
	body.page-two-column:not(.archive) #primary .entry-header,
	body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
		float: left;
		width: 26%;
	}
}

コード的な区切りはサイドバーがあるかないかです。2つをまとめて書いてもOKですが、親テーマをできるだけ網羅的に上書きするために長いコードになったので、なんとなく分けました。

追記

オリジナル投稿日：2017年6月1日

リライト再掲日：2021年2月6日

最後までお読みいただきありがとうございました。