siteWPカスタマイズ備忘録WordPressカスタマイズの個人的備忘録。分かりやすい説明を心がけています。2014/06/26*テンプレートGushでの話です。他のテンプレートでも参考にはなると思います。*縦長でサイトを見た場合の話です。今後iphoneも解像度が上がって横幅も気にならなくなってくるかもしれません。私が今使っているiphoneはサイトを表示するときの横幅が320pxらしく、Gushのデフォルトの設定ではグーグルアドセンスがはみ出してしまいます。見た目も良くないですし、スクロールするときに横にぶれて勝手が悪いです。グーグルアドセンスがはみ出さないようにカスタマイズしてみました。広告サイズは300×250のレクタングル(中)とします。サイドバーの上に表示されるアドセンスPCではコンテンツエリアの右上に表示されるサイドバーのアドセンス。スマートフォンでは左のメインスペースの下になります。320pxのiphoneで見るとこんな感じ右側が切れています。これは規約に引っかからないのかな?どうなんだろう?ここはスクロールする時にぶれないので支障は無いのですが、気持ち悪いので直します。GushのスタイルシートGushはレスポンシブデザインになっており、まずスマートフォン用にデザインされ、その後タブレット端末やPCでの表示で最適化されるように調整してあるようです。#contentsなど同じ項目が複数個あるのはその為です。上のほうで変更した値がPCなどで反映されない場合、同じ項目が下のほうにあり上書きされているという事なので、そちらを変更する必要があります。スタイルシートを調整する色々やった結果、すんなりいった方法をご紹介します。デフォルトではこうなっています。1.6;}widthが横幅です。90%に設定されています。1.6;}96%に変更します。これでiphoneからの見た目は大丈夫ですが、タブレットからだと横に広がりすぎてしますので、そちらの方も設定します。90%;を追加します。1040px;が最初から指定してあるので大丈夫です。center;を付け加えてください。保存してスタイルシートを更新します。これでアドセンスがはみ出さずに収まりました。右端の線もちゃんと見えます。記事下に表示されるアドセンスもうひとつあります。個別記事の下に表示されるアドセンスです。こちらはサイドバーの上よりも一つ多く枠に囲われている状態ですので、更にはみ出しています。上の方法で横幅を広げることによりずいぶん改善されますが、それでも少しはみ出してしまいます。こちらも綺麗にしたいと思います。スタイルシートを調整する記事下アドセンスのタグが用意されているのでこれを編集します。auto;}marginはそのコンテンツの外側の余白を指定するものです。左右の余白;となります。上下には10pxの余白を。