ワードプレスのテーマ「Twenty Seventeen」にて、固定ページのメインの幅を大きく、サイドの幅を小さくなるように調整しました。

CSS追記にコピペする方法です。

幅の変更方法

下記を「外観→CSS編集」にコピペします。

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

サイドをもっと小さくしたいときは、26%の部分をもっと小さくし、その分68%の部分を大きくします。

修正補足情報:

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

オレンジ枠内のwidth:26%が全幅に対するサイドの幅、ピンク枠内のwidth:68%が、全幅に対するメインの幅です。

サイドはfloat:left;で左側にふわふわ寄り、メインはfloat:right;で右側に寄ります。

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

黄色部分が、固定ページの幅を指定する部分ですので、固定ページだけ変更したい場合は、この部分だけを修正してください。

需要も少なくなってきたので、記述もスッキリさせてみました。

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

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

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

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