TwentySeventeen のデザインが思ったより良かったので、これを基にカスタマイズしてます。
カスタマイズしたいことの一つが記事の幅。デフォルトでは 740px ですが、個人的には1,000px くらい欲しいところです。
コンテンツ全体の幅
以降、PC ビューでの表示を変更します。というのも、最低 30 文字以上入る幅があるデバイスでの CSS として書かれていたのですが、モバイルビューを変更したくなかったので好都合です。
|
1 2 |
@media screen and (min-width: 30em) { } |
記事の幅を決定しているのは、この中に書かれている下記のソースコードです。
|
1 2 3 |
.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 にすると余白が一切なくなり、記事とサイドバーが完全にくっつくのでご注意を。