###前提・実現したいこと
ワードプレスで、テンプレートmasonicを使っています。
記事&サイドバーの幅を変更(もう少し狭く)したいです。
※ヘッダー画像の幅はこのままが良いです。
※横スクロールバーは使いたくありません。
解決策を教えてください。
###参考資料
style.cssはこちら
※その他必要なものがありましたら教えてください。
###試したこと
3つあります。
1
これを子テーマのstyle.cssに書いてみました。
#page { margin: 2em auto; max-width: 1000px;
結果
・横スクロールバーが現れました
・ヘッダ画像の横幅も同時に狭くなりました。
(page全体に命令してるからそうですよね。。)
2
こちらのサイトで拾った
これを子テーマに追加してみる。
※お試しなので、数字は変えずにそのまま使いました。
@media screen and (min-width: 48em) { .wrap { max-width: 1100px;/*記事・サイドバー・余白の全幅*/ padding-left: 2em;/*記事の左余白*/ padding-right: 2em;/*サイドバーの右余白*/ } .has-sidebar:not(.error404) #primary { float: left; width: 67%;/*記事幅*/ } .has-sidebar #secondary { float: right; padding-top: 0; width: 29%;/*サイドバー幅*/ } .navigation-top .wrap { max-width: 1100px;/*メニューバー幅*/ padding: 0.75em 3.4166666666667em; } .site-content { padding: 2.5em 0 0;/*メニューバーと記事の間隔*/ } }
結果
ヘッダー画像と、コンテンツ&サイドバーの間の空白が少しだけせまくなった。
3
こちらを参考に、下のコードを子テーマに書きました。
@media screen and (min-width: 640px) { .site {max-width: 1300px;} .widget-area {width: 20.07692308%;} .site-content {width: 76.9230769%;} }
結果
・記事、サイドバーの幅は変わらず
・全体的に左寄りになった。
・数字を変えても、幅は一定。
回答1件
あなたの回答
tips
プレビュー