今回はStingerテンプレートのAdsense広告の最適化のために横幅を変更したいと思います。
特にStingerは横幅が狭く設定されているため、Stingerブロガーは最適化は必須だと考えます。
Stingerの記事エリア幅はおよそ560pxに設定されています。そのため、アドセンス広告サイズ「336 × 280」を横並びに表示することができません。
やはりぱっと見でも他のブログと比べてもどこか横幅が狭い気もします。
記事エリアの幅を広げ、それを解消しましょう。
記事エリアの幅を変更
ダッシュボードから外観→テーマ編集をクリック。
style.cssを開きます。
ftpソフトからは「#main」と検索することで編集位置を探すことができます。
下記のコードのwidthの数値を変更しましょう。
1 2 3 4 5 6 7 8 9 10 | #wrap #wrap-in #main { float: left; width: 670px;（設定したい幅に変える） 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; |
通常なら、６００〜７００と設定しておきたいところです。
当ブログは６７０pxに設定しています。
さて、記事エリア幅を変更すると、サイト全体のレイアウトが崩れてしまいます。
なのでサイト全体の幅も変更します。
style.cssを開き、下記のコードの数値を変更します。
ftpソフトからは、「#wrap-in」と検索することで編集位置を探すことができます。
1 2 3 4 5 | #header-in, #wrap-in, #navi-in, #footer-in, #gazou-in { width: 1110px;（設定したい幅に変える） margin-right: auto; margin-left: auto; } |
（stinger3の場合、基本構造のすぐ下にあります）
最後にサイドバーの幅も変更します。
style.cssを開き、下記のコードの数値を変更します。
ftpソフトからは、「#side」と検索することで編集位置を探すことができます。
1 2 3 4 5 6 7 8 9 | #wrap #wrap-in #side { float: right; width: 320px;（設定したい幅に変える） border: 1px solid #ccc; background-color: #FFF; border-radius: 4px 4px 4px 4px; padding-bottom: 20px; } |
これでオッケーです。
好みの数値は自身のブログを見ながら決めてくださいね。
Google Adsense広告を横並びに表示
ちなみにGoogle Adsense広告を横並びにするためには、tableタグを利用します。
1 2 3 4 5 6 | <table> <tr> <td>１個目のアドセンスタグ（左側）</td> <td>２個目のアドセンスタグ（右側）</td> </tr> </table> |
これで表示はオッケーです。
関連記事＞＞＞ワードプレスのセキュリティ対策プラグインは設定しておいたほうがいいですよ
まとめ
これでAdsense広告ダブルレクタングルの挿入が可能となります。
Sponsored Link
- Stingerでのダブルレクタングル挿入の場合はコンテンツ幅に注意
- 幅を変更させるためにはcssの数値を変えよう
- 幅によって適切なサイズの広告（336 × 280）を表示させよう
以上ですね。
