コンテンツ向けのAdSenseユニットは1ページに3つまで配置できます。
また、リンクユニットも1ページに3つまで配置できるので、自分のサイトにあった配置や、サイズ、スタイルを考えます。
効果的な配置やデザインのヒントなどはAdSenseを最大限に活用するで確認できます。
WordPressのバージョンは3.6.1で、テーマはSTINGER3を使用しています。
STINGER5のカスタマイズはこちら
もくじ
ヘッダー(タイトル横)にAdSense広告を貼る方法
以前にも記事にした、タイトルロゴの横にアドセンスなどのバナー広告を貼る方法の別バージョンの記録です。
SEOやPageSpeed Insightsのパフォーマンスなどを考えずに、とにかくヘッダー部分に広告を貼ることだけを考えました。
style.cssへの記述
子テーマのstyle.cssへ以下の記述を追加します。/*-----------------------------
ヘッダー分割
-----------------------------*/
#container #header #header-in #h-l {
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
float: left;
width: 50%;
}
#container #header #header-in #h-2 {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 0px;
padding-left: 0px;
text-align: left;
float: right;
width: 468px;
}
まず、画像の回り込みの指定をしたあと、ヘッダーを分割するためにh-lの横幅を50%にして左半分だけを使うようにしました。(ちなみに、ｴｲﾁｰｲﾁではなく、ｴｲﾁｰｴﾙです。)タイトルに使っている画像やテキストが大きかった場合のどうなるかは試していません。
次に、h-2でヘッダー右側の位置や横幅を指定します。
CSS側の設定はこれで終わりなので、「ファイルを更新」をクリックして今度はheader.phpを開きます。
header.phpへの記述
まずは、子テーマのheader.phpで、<!-- /#header --> <div id="gazou">を探します。
見つけたら、<!-- /#header -->の前（上）に以下の記述を追加します。
<div id="header-in"> <div id="h-2">広告のソースコード <!-- /#h-2 --></div> <!-- /#header-in --></div>次に、貼り付けたいソースコードを用意（コピー）します。大きさはヘッダーの横幅の半分よりも小さいものを選びます。今回は468×60の横長のものにしました。
用意ができたら、広告のソースコードと書かれた場所に貼り付け（ペースト）ます。
「ファイルを更新」をクリックしたら完成です。
この作業を応用してタイトルの横に検索ボックスや、SNSボタンなどを設置することが可能です。
タイトル横に広告が設置できる人気のWordPressテーマ8選
サイドバーにAdSense広告を貼り付ける方法
この方法は、STINGER3でウィジェットの「Googleアドセンス用」を使用せずに、サイドバーの好きな位置に表示する方法の記録です。
サイドバーの一番上にAdSense広告を表示する方法
まずは、子テーマのsidebar.phpの一番上の方から下記の記述を探します。<?php get_template_part('ad');?>
<?php endif; ?>
</div>
<?php get_search_form(); ?>
<div class="kizi02">
<!--最近のエントリ-->
見つけたら、<?php get_search_form(); ?>の前（上）にAdSenseコードを貼り付けます。「ファイルを更新」を押したら完成です。
サイドバーのその他の場所に表示する方法
STINGER3では、デフォルトでサイト内検索と新着記事が表示されるようになっている関係で、「Googleアドセンス用」を使わずに一番上に広告を表示したい場合は、上記のような方法をとりましたが、その他の場所（検索の下を除く）に表示したい場合はウィジェットを使うことにより簡単に表示することができます。ウィジェットの追加
まず、外観からウィジェット選択します。ウィジェットの選択画面になるので、「利用できるウィジェット」から「テキスト」を探して、「サイドバー1」の広告を表示させたい場所へドラッグアンドドロップします。次に、AdSenseコードをテキストウィジェットに貼り付けて「保存」を押したら完成です。
記事の下にAdSense広告を貼り付ける方法
上の画像のように記事の下に左寄せでAdSense広告を表示します。
CSSへの記述は特にないので、子テーマのsingle.phpへAdSenseコードを直接貼り付けます。
まず、single.phpで下記の記述を探します。
</p>
</div>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
</div>
<div style="padding:20px 0px;">
<?php get_template_part('ad');?>
</div>
<?php get_template_part('sns');?>
<?php endwhile; else: ?>
<p>記事がありません</p>見つけたら、<div style="padding:20px 0px;">
<?php get_template_part('ad');?>
</div>
の部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。「ファイルを更新」を押すのを忘れずに。
ここは、STINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。
関連記事の下にAdSense広告を貼る方法
関連記事とコメントの間に表示させる方法です。こちらも同じく、子テーマのsingle.phpへAdSenseコードを直接貼り付けます。
まず、single.phpで下記の記述を探します。
<!--/kizi-->
<!--/関連記事-->
<div style="padding:20px 0px;">
<?php get_template_part('ad');?>
</div>
<?php comments_template(); ?>
<!--ページナビ-->
見つけたら、<div style="padding:20px 0px;">
<?php get_template_part('ad');?>
</div>
の部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。「ファイルを更新」を押すのを忘れずに。
ここも、STINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。
固定ページにAdSense広告を貼り付ける方法
上の画像のように固定ページの記事下にAdSense広告を表示する方法を記録します。
まず、page.phpで下記の記述を探します。
</h1>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
</div>
<div style="padding:20px 0px;">
<?php get_template_part('ad');?>
</div>
見つけたら、<div style="padding:20px 0px;">
<?php get_template_part('ad');?>
</div>
の部分を消してAdSenseコード貼るか、その前（上）に貼り付けたら完成です。「ファイルを更新」を押すのを忘れずに。
STINGER3でウィジェットの「Googleアドセンス用」を使用した場合にデフォルトで広告が表示される場所です。
メニューバーの下にAdSenseを貼る方法
上の画像のようにメニューバーの下にセンターリングをしてAdSense広告を表示します。
まずは、子テーマのstyle.cssに下記を追加します。
.centerad{
text-align: center;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left : auto ;/*-----IE用-----*/
margin-right : auto ;/*-----IE用-----*/
}
追加したら「ファイルを更新」をクリックしてcssの変更は完了です。真ん中に表示したくない場合は、text-alignの行とIE用の2行の、合わせて3行を消してください。
次に子テーマのheader.phpの一番下にある下記の記述を探します。
<!--/pcnavi--> <?php } ?> <div id="wrap"> <div id="wrap-in"> <div id="main">見つけたら、pcnaviの下の行（phpの上の行）に下記の記述を追加します。
<div class="centerad"> ここにアドセンスコードを貼り付ける </div>次に、貼り付けたいソースコードを用意（コピー）します。サイトのレイアウトにもよりますが、ビッグバナーなどの横長の広告がいいでしょう。
スポンサーリンク
