いろんなブログの広告位置を見ていて、そろそろ自分も改良してみるかと思い、Adsenseの配置を最適化する事にしました。いままで記事下に縦２つで置いていた336×280広告を横並びで表示させる事にしたのですがめいん、ここで問題が。。。Stingerはメインコンテンツの横幅が狭めに設定されているので、横２つを並べられないのです。そこで、これから紹介する方法を使ってメインコンテンツエリアの幅を変更しました。
非常に簡単にできる方法ですので、ぜひご参考に。
他のブログテーマよりもメインエリアが狭目なStigner
他のWordPressテーマに比べると、Stingerは記事本文を載せるメインコンテンツが狭目に設定されています。
デフォルトだと、記事を載せるエリアの横幅は550pxくらいで、サイドバーを含めても全体の横幅が1000pxもありません。
一般的のブログだと、記事エリアが650~700くらいでサイドバーも含めて1050~1150くらいです。
メインエリアの横幅が狭いことでネックになっていたのが、336×280サイズのAdsense広告を横に並べられなかった事です。Stinger以前はWordPressテーマの横幅も広かったので横に並べる事ができていたのですが、Stignerになってからは縦に並べざるを得ませんでした。
クリック率など数字の面でもそれほど違いはなかったのですが、やはり横に並べた方が若干いい結果が出ていたので横並びに戻す事にしたのです。
スポンサーリンク
ブログの横幅は簡単に変えられる
実はめちゃくちゃ簡単で、style.cssをいじるだけです。
まずは記事エリアの横幅から。
style.cssにて「#main」で検索すると以下のようなコードが見つかります。
#wrap #wrap-in #main {
float: left;
width: 550px;
padding-right: 39px;
padding-left: 39px;
padding-top: 20px;
border: 1px solid #ccc;
background-color: #FFF;
border-radius: 4px 4px 4px 4px;
padding-bottom: 20px;
}
ここの「width: 550px;」の数字を設定したい数字に変更してあげるだけです。
今回は「670px」に設定しました。
次に、サイドバーも含めたコンテンツ全体の横幅。
※記事エリアの横幅を変えたら、必ずコンテンツ全体の幅も変えましょう。
そうしないと、レイアウトが崩れて、記事エリアとサイドバーが重なってしまうなどしますので。
エリア全体の幅を変える時は、style.cssにて「#wrap-in」を検索してください。すると以下の部分がヒットするので
#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
width: 980px;
margin-right: auto;
margin-left: auto;
}
「width: 980px;」の数字を好きなものに変更してください。私は1110pxにしています。
これでOKです。
あとは、Adsenseを横に並べればOK。
スポンサーリンク
Adsense広告を横並びにする方法
こちらも簡単で、Adsenseを表示させたい位置に以下のコードを追加するだけ。
<table> <tr> <td> アドセンスコード </td> <td> アドセンスコード2 </td> </tr> </table>
アドセンスコードには
<script type="text/javascript">
で始まるコードを挿入してください。そうすると
こんな感じで横に２つ並べて表示する事ができます。
まとめ
・Stingerのメインコンテンツエリアは横幅が狭いので注意
・横幅を広げたい場合はCSSをいじりましょう
・幅を広げればAdsenseも簡単に横並び表示できる
以上です。それでは。
