ワードプレステーマである【giraffe】で固定ページ作成時におけるヘッダーとコンテンツ間の隙間を変更する方法についてお伝えします。
デフォルトの状態だと、隙間がなくくっついているようになっています。これを変更するにはCSS修正する必要が出てきます。
また、PC版のCSSの修正だけだとモバイル時には適用されませんので両方修正する必要があります。
■最初にPC版の修正方法
以下の赤文字（1313）を修正することで修正することができます。またデフォルトでは10pxとなっています。
| #speheader-inner-left{text-align:left;max-width:1000px;margin:50px auto;} #speheader-inner-right{text-align:right;max-width:1000px;margin:50px auto;} #speheader-inner-double{max-width:1200px;margin:50px auto;} body.page main{border-radius:4px;padding:10px 370px 0 50px;margin:0 -350px 0 0px;width:100%;} .page main{max-width:1200px;} .page-template-page-one-column-sns #wrapper{max-width:1200px;padding:0;margin:30px auto 0;} .page-template-page-one-column-sns #content{margin:0 auto;width:100%;} |
まず、これでPC版のCSSの修正は完了となりますが、上記でお伝えしましたがこのままだとスマホ版は適用されませんので続いてスマホ版のCSSの修正方法になります。
■スマホ版の修正方法
| #wrapper{max-width:600px;padding:0;margin:0 auto;} #content{float:left;margin:0 auto;width:100%;} #contentInner{background:#fff;border-radius:2px;} main{margin:0 0 10px;padding:0px 10px 40px;} main.front-page{padding:0;} main.archive{max-width:1200px;} |
以下の赤文字（681）のpxを修正することでスマホで見たときのレイアウトが変更されます。
コメント