「GoogleAdSense」コードの記載、広告ユニットのサイズも多く、Google推奨の「728×90」ビッグバナーを貼りたいと思っても、レイアウト変更が必要になったりすることが多いと思います。今回は、TwentyTwelveのテーマを使い、記事上、記事下、サイドヘッダーのコードの記載方法と、CSSレイアウトの変更方法を記載します。

1. サイドバー上部に「GoogleAdSense」を貼る

スクリーンショット_2013_06_27_14_24

日本国内問わず、個人のブログサイトでもサイドバー上部の「GoogleAdSense」はよく見かけますよね。当ブログでも、「336×280」（レクタングル大）を貼っています。サイドバーのクリック率は、当ブログではそれほど高くはないですが、貼っておいても損はないと思います。

「GoogleAdSense」コードの張り方は、「AdSenseManager」などで貼る方法もありますが、サイドバーにアンしては、「PHP Text Widget」というテキストウィジェットでPHPを実行させることのできるWordPressプラグインを使います。インストールしてない方は、プラグインをインストールしましょう。

1.1.「300×250」（レクタングル中）を貼る

「PHP Text Widget」に、GoogleAdSenseのコードをそのまま貼り付けましょう。

1.1.1. TwentyTwelveのレイアウト

スクリーンショット_2013_06_27_14_23

Twenty Twelveのデフォルトのサイドバーの幅は「250px」なので、「300×250(レクタングル中)」を貼るとはみ出してしまうので、サイドバーを広くする必要があります。デフォルトのレイアウトは以下になります。

スクリーンショット_2013_06_30_7_32-2

レイアウト CSSクラス名 値
全体の幅 site 960px
メインコンテンツ site-content 625px
サイドバー widget-area 250px

デフォルトの状態では、メインコンテンツとサイドバーを足しても「875px」なので、全体幅を広げなくてもサイドバーを「300px」にすることができます。メインコンテンツとサイドバーの間隔が狭まるので、気になる方は全体幅を広げるなど調整していただければと思います。

1.1.2. スタイルシート「style.css」の変更

レイアウトを以下に変更します。

レイアウト CSSクラス名 値
全体の幅 site 960px
メインコンテンツ site-content 625px/65.104166667%
サイドバー widget-area 300px31.25%

「style.css」の「 Media queris 」行の「 Minimum width of 600 pixels.　」付近の以下の「.widget-area」行のwidthを以下のコードに変更します。

クラス名 プロパティ 値
.widget-area width 31.25% 
        .site {
                margin: 0 auto;
                max-width: 960px;
                max-width: 68.571428571rem;
                overflow: hidden;
        }
        .site-content {
                float: left;
                width: 65.104166667%;
        }
        body.template-front-page .site-content,
        body.single-attachment .site-content,
        body.full-width .site-content {
                width: 100%;
        }
        .widget-area {
                float: right;
                width: 31.25%;
.widget-areaの計算式は以下になります。
(wiget-areaの幅/siteの幅(全体幅))*100になります。

1.2.「336×280」（レクタングル大）を貼る

「PHP Text Widget」に、レクタングル大のGoogleAdSenseのコードをそのまま貼り付けましょう。

1.2.1. TwentyTwelveのレイアウト

デフォルトのサイドバーの幅は、「250px」なのでレクタングル大の広告ユニットははみ出してしまいます。
スクリーンショット_2013_07_01_7_41

1.2.2. スタイルシート「style.css」の変更

レイアウトを以下に変更します。全体幅を広げて、メインコンテンツの幅は変更せずサイドバーの幅を広げています。

レイアウト CSSクラス名 値
全体の幅 site 1000px
メインコンテンツ site-content 625px/62.5%
サイドバー widget-area 336px/33.6%

「style.css」の「 Media queris 」行の「 Minimum width of 600 pixels.　」付近の以下の「.widget-area」「.site-content」「.site」の値を以下に変更します。

rem値
計算式は、「コンテンツ幅/$rembase」になります。TwentyTwelveの「$rembase」は14です。今回、1000pxにするので「1000/14=71.428571428rem」となります。
クラス名 プロパティ 値
.site max-width 1000px
max-width 71.428571428rem
.widget-area width 31.25%
.site-content width 62.5% 
        .site {
                margin: 0 auto;
                /*max-width: 960px; default * /
                /*max-width: 68.571428571rem; default */
                max-width: 1000px;
                max-width: 71.428571428rem;
                overflow: hidden;
        }
        .site-content {
                float: left;
                /*width: 65.104166667%; 625px */
                width: 62.5%;
        }
        body.template-front-page .site-content,
        body.single-attachment .site-content,
        body.full-width .site-content {
                width: 100%;
        }
        .widget-area {
                float: right;
                /*width: 26.041666667%;*/
                /*width: 31.25%; /* width 300px */
                width: 33.6%; /* width 336px */
        }

2. 個別記事に「GoogleAdSense」を貼る

スクリーンショット_2013_07_02_15_28

記事上の「GoogleAdSense」はWebサイト、ブログなどで最もよく見かけると思います。当ブログも記事上にビッグバナーを貼り付けています。クリック率も、サイドバーよりも高く当ブログでは3番目にクリック率が高いです。ビッグバナーもありますが、ブログのレイアウトを変更しなければならなかったりと面倒な部分が難点ですよね。TwentyTwelveのテーマを用いてテーマのレイアウト変更、「GoogleAdSense」の配置も含めて解説していきます。

2.1. 個別記事の「Google AdSense」配置位置

スクリーンショット_2013_07_02_15_28-3
先ず、記事のどこに「GoogleAdSense」を貼るか一番悩むところです。セオリー的に効果的な広告掲載位置は、ページを開いて直ぐ目に入る位置です。今回は記事のタイトル下に配置します。

2.2. 記事上に「728×90」以下の広告ユニットを貼る

TwentyTwelveの場合記事幅が「625px」あるので、横幅「625px」以下の広告についてはレイアウト変更をすることなく、「GoogleAdSense」を貼ることが可能です。Twenty Twelveの場合、個別記事のカスタマイズは「content.php」ファイルで行います。

2.2.1. 個別記事のカスタマイズ「content.php」の変更

TwentyTwelveでの、個別記事は写真が表示された後に記事タイトルが表示されるので、レイアウト変更を合わせて行います。編集する前に「content.php」ファイルのコピーを取ります。

「content.php」ファイルの中の「header class=”entry-header”」行から「h1 class=”entry-title”」の間の行を削除し以下のコードを挿入します。「GoogleAdSense」コードはご自身のコードを入れて下さい。

<?php /*the_post_thumbnail(); */ ?>
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class=ad>
<script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxx"; 
/* single_mobile_gad_footer */
google_ad_slot = "xxxxxxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<?php the_post_thumbnail(); ?>
<?php else : ?>
<?php the_post_thumbnail(); ?>
2.2.2. スタイルシート「style.css」の追加

必要に応じて、margin,paddingなどで広告位置を調整してください。以下、広告上と下にmargin 10pxを取る場合の例を記載します。編集するまえに「style.css」ファイルのコピーを取ります。「style.css」の1419行目の「/* =Media queries」行の前に記述します。

 .ad {
  margin: 10px 0 10px;
  }

2.3. 記事下に「728×90」以下の広告を貼る

スクリーンショット_2013_07_03_9_22
記事下の広告は、当ブログでも一番クリック率が高いです。TwentyTwelveの場合少し個別記事「content.php」のカスタマイズが必要です。

2.3.1. 個別記事のカスタマイズ

「content.php」を見ると、個別記事を表示している箇所は、<div class=”entry-content”></div>です。この次の行に「Google AdSense」コードを記載すれば良さそうですが、個別記事とトップページの記事下にも広告が表示されてしまい、「Google AdSense」の広告数の制限値を超えてしまうので、ここでは、トップページには記事内容を載せず、個別記事に記事内容を載せ「Google AdSense」を表示する方法を記載します。

2.3.2. 「content.php」の修正①

「content.php」ファイルのコピーを取ります。ファイルの中の<header class=”entry-header”>から<h1 class=”entry-title”>の間の行を全て削除し、「Google AdSense」コードはご自身のコードに入れ替え、以下のコードを挿入します。

<?php /*the_post_thumbnail(); */ ?>
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<!-- Start Header Google AdSense -->
<div class=ad>
<script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxx";
/* single_mobile_gad_footer */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- End Header Google AdSense -->
<!-- content thumbnail -->
<?php the_post_thumbnail(); ?>
<!-- start entry content-->
<div class="entry-content">
    <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- end entry-content -->
<!-- Start Footer Google AdSense -->
<div class=ad>
<script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxx";
/* single_mobile_gad_footer */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- End footer Google AdSense -->
<?php else : ?>
<?php the_post_thumbnail(); ?>

上記コードを挿入すると、個別記事の上、下に「Google AdSense」の広告が表示されるようになります。個別記事上の広告が不要であれば、上記コードの5行目〜19行目を削除してお使いください。

2.3.3. 「content.php」の修正②

トップページの一覧表示に、メインコンテンツが表示されないようにします。「content.php」ファイルのコピーを取り、<!– entry-summary –>の行を探し下の行にある</div class=”entry-content”>から<!– entry-content –>の行を無効にするため、行のはじめ「<? /*」終わりに「 */?>」を追記します。

</div><!-- .entry-summary -->
<?php else : ?>
<? /*<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->*/?>

2.4.「728×90」ビッグバナーを貼る

スクリーンショット_2013_07_05_17_23
Googleも推奨しているビッグバナー、当サイトでもGoogle推奨なので先日貼りましたが、思ったよりもクリック率が高いです！ビッグバナーは幅728pxなので、メインコンテンツの幅を広くし、全体の幅も広くさせる必要があるので面倒ですが、是非一度試してみてください！

2.4.1. レイアウト変更

「728×90」ビッグバナーを貼るには、レイアウト幅を変更する必要があります。TwentyTwelveのデフォルトのレイアウトは以下になります。

レイアウト CSSクラス名 値
全体の幅 site 960px
メインコンテンツ site-content 625px
サイドバー widget-area 250px

ビッグバナーを設置するに伴い、以下のレイアウトに変更します。

レイアウト CSSクラス名 値
全体の幅 site 1100px
メインコンテンツ site-content 730px
66.363636363%
サイドバー widget-area 300px
27.272727272%
2.4.2. スタイルシート「style.css」の変更

スタイルシートを変更する前に、「style.css」のコピーをとりましょう。変更する値は以下のとおりです。

クラス名 プロパティ 値
.site max-width 1000px
max-width 71.428571428rem
.widget-area width 27.272727272%
.site-content width 66.363636363%

「style.css」の「 Media queris 」行の「 Minimum width of 600 pixels.　」付近の以下の「.site」「.site-content」「.widget-area」行のwidthを以下のコードに変更します。

        .site {
                margin: 0 auto;
                /*max-width: 960px; default * /
                /*max-width: 68.571428571rem; default */
                max-width: 1100px;
                max-width: 78.571428571rem;
                overflow: hidden;
        }
        .site-content {
                float: left;
                /*width: 65.104166667%; 625px */
                width: 66.363636363%;
        }
        body.template-front-page .site-content,
        body.single-attachment .site-content,
        body.full-width .site-content {
                width: 100%;
        }
        .widget-area {
                float: right;
                /*width: 26.041666667%;*/
                width: 27.272727272%;
        }
2.4.3. 個別記事ページのカスタマイズ

「content.php」ファイルのコピーを取ります。ファイルの中の<header class=”entry-header”>から<h1 class=””entry-title””>の間の行を全て削除し、「Google AdSense」コードをご自身のコードに入れ替え、以下のコードを挿入します。

<?php /*the_post_thumbnail(); */ ?>
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<!-- Start Header Google AdSense -->
<div class=ad>
<script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxx";
/* single_mobile_gad_footer */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- End Header Google AdSense -->
<!-- content thumbnail -->
<?php the_post_thumbnail(); ?>
<!-- start entry content-->
<div class="entry-content">
    <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- end entry-content -->
<!-- Start Footer Google AdSense -->
<div class=ad>
<script type="text/javascript"><!--
google_ad_client = "xxxxxxxxxxxxx";
/* single_mobile_gad_footer */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!-- End footer Google AdSense -->
<?php else : ?>
<?php the_post_thumbnail(); ?>

上記コードを挿入すると、個別記事の上、下に「Google AdSense」の広告が表示されるようになります。個別記事上の広告が不要であれば、上記コードの5行目〜19行目を削除してお使いください。

2.4.4. 端末によって表示する広告ユニットを変更する

ビッグバナーやレクタングル（大）の広告は、表示する携帯端末、PCの画面幅の関係で表示しきれない場合があるので、画面幅によって表示する「Google AdSense」を変更することをお勧めします。詳しくは、「Google AdSenseレスポンシブウェブデザインに対応！WordPress Twenty Twelveでモバイルバナーを設置する方法」をご覧ください。

3. Google AdSense参考書籍

ブログやWebサイトで「Google AdSense」をこれから始めようと思う人に最適な書籍です。

増補改訂版　グーグル・アドセンスの歩き方

posted with ヨメレバ
グーグル・アドセンス研究会 編 ダイヤモンド社 2011-09-30
Amazon
Kindle
楽天ブックス
honto
ブックオフ
e-hon