Twenty Seventeen、メインとサイドの幅を変更( 固定ページ )

★Modified on: 2017-08-28

Twenty Seventeenは、”固定ページ”も妙にサイド(左側)が大きいです。メインは大きく、サイドは小さくなるようにCSSにて幅を調整しました。

「投稿ページ」の幅の調整については、関連記事「Twenty Seventeen、メインとサイドの幅を変更( 投稿ページ )」をご覧くださいませ。

“固定ページ”の幅、修正前後比較

修正前

"固定ページ"の幅、修正前
“固定ページ”の幅、修正前

修正後

"固定ページ"の幅、修正後
“固定ページ”の幅、修正後

黄色部分が、固定ページの幅を指定する部分です。この修正を行うと、黄色以外の部分のページの幅も変わってしまいますので、固定ページだけ変更したい場合は、この部分だけを抜き取り、別に記述する必要があります。

オレンジ枠で囲まれたサイドは、正確にはクラス名「entry-header」です。
最大値は、1,000pxの26%の幅で左側にふわふわ寄ります。スクリーンの幅によって小さくはなりますが、wrapの26%を保持します。スクリーン幅がとても狭く、スクリーン幅の最小値に収まらないときは上段に表示されます。

ピンク枠で囲まれたメインは、正確にはクラス名「entry-content」です。
最大値は、1,000pxの58%の幅で右側にふわふわ寄ります。スクリーン幅によっては小さくなりますが、wrapの58%を保持します。スクリーン幅がとてもが狭く、スクリーン幅の最小値に収まらない場合は、下段に表示されます。

メインとサイドの間隔は、100% – (68% + 26%) = 6% (wrapの最大値1,000pxの時、60 px)がメインとサイドの間の余白になります。

幅の変更方法

幅の修正は、4ステップです。

ステップ1、修正箇所を探す

幅を修正したい箇所を反転させて、右クリック→検証を開きます。

Twenty Seventeen 固定ページの修正箇所を探す
Twenty Seventeen 固定ページの修正箇所を探す

ステップ2、現在の指定値を探す

ここで現在の指定値が分かったら、右側のstyle.css?ver=4.8.1をクリックして、ソースモードに遷移します。

Twenty Seventeenの"固定ページ"の初期値を探す
Twenty Seventeenの固定ページの初期値を探す

ステップ3、ソースモードでシミュレーション

オレンジで囲まれた部分をいろいろ変えて好みの幅が決まったら、関連個所をコピーします。

固定ページの幅をシミュレーション
固定ページの幅をシミュレーション
	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%;
	}

	.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%;
	}

ステップ4、テーマに反映させる

外観→CSS編集にペーストします。

Twenty Seventeen、固定ページのCSSを追記
Twenty Seventeen、固定ページのCSSを追記

沢山のclassが同時に指定されていますが、固定ページは”body.page-two-column:not(.archive) #primary .entry-header”なので、他の部分を変更したくない場合は、他のclassを削除することもできまます。

その辺は、お好みで。

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください