wordpressの標準テーマ「Twenty Fifteen」のカスタマイズです
サイドバーの余白を調整します
これはサイドバーにアドセンス広告を掲載するために行います。
したがって最低でも300pxは欲しいですね。
デフォルトの設定ではサイト幅1404pxのときサイドバーの幅は413px
余白が左右20%ですのでウィジェットの幅は248pxとなります
そこで左右の余白を8%にしてみました
するとウィジェットの幅は346pxとなります
Twenty Fifteenはレスポンシブなデザインとなっており
「Desktop Large 1240px」のときサイドバーは364pxとなりウィジェット幅は余白を8%にすると305px
「Desktop Medium 1100px」ではサイドバー323px ウィジェット幅271px
「Desktop Small 955px」ではサイドバー280px ウィジェット幅235px
となります。(計算が合っていれば・・・)
それ以下のタブレット表示やスマホ表示ではサイドバーは右上のボタンに格納されてしまい、
タップするとサイドではなく記事上に表示されます
子テーマへの記述は以下の通りです
Twenty Fifteenはサイドバーのなかにヘッダーがあるので、ヘッダーとウィジェットの余白を同じにしないとバランスが悪くなります。
1 2 3 4 5 6 7 8 |
@media screen and (min-width: 55em) { .site-header { padding: 0 8%; } .widget { padding: 0 8%; } } |
これでアドセンス広告を貼る順部ができました。
サイドバーの幅が可変することを考えると広告サイズもレスポンシブの広告にしたほうがいいですね。
上記の設定では1240PX以上で300×250か300×600の広告が表示されると思います。