Twenty Seventeenのサイドバーが妙に幅を利かせて、メインが窮屈ですので、CSSを修正しました。

投稿ページの幅調整

Twenty Seventeen 投稿ページの幅調整

↑ピンク枠内が修正前、オレンジ枠内が修正後。

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

.wrap {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
padding-left: 2em;
padding-right: 2em;
}
.has-sidebar:not(.error404) #primary {
float: left;
width: 68%;
}
.has-sidebar #secondary {
float: right;
padding-top: 0;
width: 26%;
}

68%の部分が記述エリアのメインの幅。26%がサイドの幅。「100% – メインの幅 – サイドの幅」がメインとサイドの余白の幅。

因みに「プレーンテキストで貼り付ける」のが無難。

固定ページの幅調整

Twenty Seventeen 固定ページの幅調整

↑趣向を変えて、調整風景。オレンジ枠がサイドで、ピンクの枠がメインに対応しています。

↓のコードを「外観→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%の部分を大きくします。

外観→CSSにコピペで済むように少々冗長なコードですが、無難が一番。

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

投稿者: のろのろ

海外赴任中で、社畜で、早期リタイア志望者で、ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

ディスカッションに参加

2件のコメント

  1. はじめまして!
    最近WordPressをはじめた超初心者です。
    Twenty Seventeenの幅を変更したくて、コチラにたどり着きました。
    とても分かりやすくて、簡単に変更できました。
    どうもありがとうございました。

    1. Shibazoさん、コメントありがとうございます。
      モンハンにハマって返信が遅くもうしわけありません。

      Twenty Seventeenの幅、気になりますよね。
      お役に立ててうれしくおもいます!

コメントを残す

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

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