TwentySeventeenの記事幅、サイドバー幅を変更する

TwentySeventeen のデザインが思ったより良かったので、これを基にカスタマイズしてます。

カスタマイズしたいことの一つが記事の幅。デフォルトでは 740px ですが、個人的には1,000px くらい欲しいところです。

コンテンツ全体の幅

以降、PC ビューでの表示を変更します。というのも、最低 30 文字以上入る幅があるデバイスでの CSS として書かれていたのですが、モバイルビューを変更したくなかったので好都合です。

@media screen and (min-width: 30em) {
}

1 2	@media screen and (min-width: 30em) { }

記事の幅を決定しているのは、この中に書かれている下記のソースコードです。

.page-one-column .panel-content .wrap {
    max-width: 740px;
}

.page-one-column .panel-content .wrap {

max-width: 740px;

}

このような感じで 740px を指定している部分がいくつかあるので、13.0 Layout の項目内にある .wrap を除いて、.wrap の max-width をすべて任意の幅に変更します。

3 箇所全て書き換えると、メニューバーとコンテンツの幅が変化します。

記事とサイドバーの幅はパーセント指定なので固定されておらず、実際のデバイスやウィンドウの幅によって変動します。その代わり、幅が変わっても見た目は変化しません。

デフォルトでは記事が 58%, サイドバーが 36% で、残りは余白です。

こっちも CSS で指定されているので、style.css の中から 58% と 36% を見つけて変更します。

※ site-info クラスと social-navigation クラスの幅は変更しない方がいいです。

ちなみに、足してぴったり 100 にすると余白が一切なくなり、記事とサイドバーが完全にくっつくのでご注意を。