今まで変更したいと思ったことが無いコンテンツ部分だが、今回自作のSNSを追加した際に、少し両幅を調整した方が良いと感じたので、Chromeのデベロッパーツールで余白部分のサイズを変へて確認したところ、若干余白幅を狭くすると投稿記事幅が広く感じるのと、サイドバーを少し狭くすると自作のSNSの見栄えが良いかな?と感じたので早速style.cssに変更箇所を記述した。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@media screen and (min-width: 48em) { .wrap { max-width: 1000px; ← 全体の横幅 padding-left: 2em; ← 余白(左) padding-right: 2em; ← 余白(右) } .has-sidebar:not(.error404) #primary { float: left; width: 67%; ← 記事の横幅 } .has-sidebar #secondary { float: right; padding-top: 0; width: 28%; ← サイドバーの横幅 } .navigation-top .wrap { max-width: 1000px; ← グローバルナビゲーションメニューの横幅 /* The font size is 14px here and we need 50px padding in ems */ padding: 0.75em 3.4166666666667em; } } |
変更方法が分からないので、余白(左右)の3emを2em、widthを7対3の比率から少しずつ変えただけ、ワイドスクリーンで見るのであれば、max-widthを1100px程度まで広げたら感じが良くなりそう。