個別ページの記事下にアドセンスPC2つ&スマホ・タブレット1つ

スポンサーリンク
Pocket

 

個別ページ、固定ページは別のテンプレートになるので、まずは個別ページの記事下にアドセンスを入れる方法を紹介します。記事下に2つのアドセンスを入れて、その内1つはスマートフォンでは表示しないようにします。

ここで紹介するのは記事下に縦に2つ並ぶタイプです。もし、記事下に「横並びで2つ設置したい」場合は下部記事で紹介してます。

記述するのは「single.php」もしくは「content.php」ですが、基本的には「single.php」の方が一般的かと思います。

「single.php」への記述は、横に2つ並ぶタイプで紹介します。(縦2つ⇒横2つに変更)

「content.php」に記述したほうが位置調整が楽でしたので・・・・

まずは「content.php」から次の記述を探します。

1
</div><!-- .entry-content -->

※Twenty Twelveの場合は上記のコードが記事の終わりの部分(entry-contentの終わり部分)になりますので、この「直前」にアドセンスの設置コードを追加していきます。

※もしこのコードがない場合には適当な位置に「テスト」とテキストを入れて保存し、表示される場所を確認してみると確実です。

探したコードの「直前」に以下のコードをコピペします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php if ( is_single() ) : ?>
<p class="ad-label">スポンサーリンク</p>
 
<?php if (wp_is_mobile()) :?>
<div class="ad-bottom-sm">
ここにスマートフォン用サイズ(300x250)の広告
</div>
 
<?php else: ?>
 
<div class="ad-bottom">
ここにPC用の広告1つ目
</div>
 
<div class="ad-bottom">
ここにPC用の広告2つ目
</div>
 
<?php endif; ?>
<?php endif; ?>

2つの条件分岐を使っているので、最後の「php endif;」が2つになります。

※これでスマートフォンでは記事下に広告が1つ。PCページでは記事下に広告が2つという設置ができます。

それぞれサイズを分けた広告コードを張ります。(PCの広告1つ目&PCの広告2つ目)

※スマートフォン用には「300×250」で、PC用には「336×280」を使う場合が多いです。

広告部分に「ad-bottom」という名前を付けてありますので後でスタイルシートで位置調整ができます。位置調整は最後にまとめて書きます。

※個別記事だけ表示するように条件分岐している記述のため、固定ページやトップページは表示されないので固定ページやトップページでも同じように設置してします。

固定ページやトップページ記事下に広告を入れる

まずは「content.php」から次の記述を探します。

1
</div><!-- .entry-content -->

この部分が記事の終わりの部分になるので、上記コードの「直前」に以下のコードを入れてます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p class="ad-label">スポンサーリンク</p>
<?php if (wp_is_mobile()) :?>
<div class="ad-bottom-sm">
ここにスマートフォン用の広告のコード
</div>
<?php else: ?>
<div class="ad-bottom">
ここにPC用の広告コード1つ目
</div>
<div class="ad-bottom">
ここにPC用の広告コード2つ目
</div>
<?php endif; ?>

次にトップページの方ですが、トップページ「メインインデックスのテンプレート(index.php)」では次の記述があります。

1
2
</div><!-- #content -->
</div><!-- #primary -->

この記述の「前」に先ほどと同じコードを入れます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p class="ad-label">スポンサーリンク</p>
<?php if (wp_is_mobile()) :?>
<div class="ad-bottom-sm">
ここにスマートフォン用の広告のコード
</div>
<?php else: ?>
<div class="ad-bottom">
ここにPC用の広告コード1つ目
</div>
<div class="ad-bottom">
ここにPC用の広告コード2つ目
</div>
<?php endif; ?>

ここまで設置できたら個別ページ、それと固定ページの記事下広告は完了です。CSSでの位置調整に関しては最後にまとめて書きます。

広告とラベルの位置調整

最後に広告とラベル(スポンサードリンク)の位置調整をスタイルシート(CSS)でやっていきます。紹介した広告とラベルにそれぞれ名前を付けてあります。

  • ラベル(スポンサーリンクの部分):「ad-label」
  • 記事下の広告PC:「ad-bottom」
  • 記事下の広告スマートフォン:「ad-bottom-sm」
  • 記事中の広告:「mid-ad」
  • スマートフォンのヘッダー部分:「ad-top」
  • サイドバーの広告:「side-ad」

※基本的にはこのように分けておくと位置調整はしやすいです

子テーマのCSS(スタイルシート)の一番下に位置調整のコードを追加していきます。

例えばラベル(スポンサーリンクの部分)と広告を中央に寄せたい場合には次のコード(スタイルシートの一番下に追加)。

1
2
3
4
p.ad-label { text-align:center;}
.ad-bottom { text-align:center;}
.mid-ad { text-align:center;}
.side-ad { text-align:center;}

※他にも「margin-top:10px;」とか「margin-bottom:10px;」とかそれぞれに記述を加えれば「上の余白」や「下の余白」も調整できますし、中央寄せが嫌なら「text-align:center」を消して「margin-left:15px」とかでも左に余白を作る事もできます。

余白だけを調整してこんな感じにしています(スタイルシートの一番下に追加)

1
2
3
4
5
6
7
8
9
10
11
12
p.ad-label {
  margin-left:20px;
  margin-top:15px;
}
.ad-bottom {
  margin-top:15px;
}
.ad-bottom-sm {
  margin-top:15px;
}

スマートフォンで広告がはみ出す場合

スマートフォン用の広告は普通横幅300pxの広告を利用する場合が多いですが、スマートフォンで確認すると右に寄って画面から少しだけはみ出している場合があります。

その場合にはCSSに次のコードを追加します。はみ出している広告だけ選んで記述してください。

1
2
3
4
5
@media screen and (max-width:599px){
.side-ad{magin-left: -10px;}
.ad-bottom-sm{margin-left:-10px}
.mid-ad{margin-left:-10px}
}

この「@media screen and (max-width:599px)」というのがブラウザの画面が599px以下ならという条件分岐、つまりスマートフォンページならという書き方です。

ここにマイナス値の「magin-left」を入れてあげると数値の分だけ左に寄るのでこれで対策できます。

以上WordPressにアドセンス広告の設置は完了です。

PC、スマートフォン両方で確認して規約に違反する部分がないか確かめてこださい。

広告横並び2つにする方法

広告横並びにする時の注意点

先に注意点を書いておくと、広告を横に並べるので当然コンテンツの横幅が狭いと無理です。例えばコンテンツの横幅が600pxなのに、横幅336pxの広告を2つ並べる事はできませんよね。

先に設置する広告の横幅とコンテンツの横幅を調べておく必要があります。また、横に並べる2つ広告には隙間というか広告と広告の間の余白を作るので、20px程度余裕をもって設定しておく必要があります。

それからPCページではアドセンス2つ横並びえはOKですが、スマートフォンではスクロールせずに見える1画面に2つのアドセンスが表示されるのはNGなので、「PC」では2つ横並び、「スマートフォン」では1つだけ表示されるように条件分岐が必要です。

アドセンス広告設置の準備

コンテンツの横幅のチェックし、それに合う横幅の広告コードを用意しておきます(PC用に2つとスマートフォン用に1つ)

記事下など広告を設置する場所を確認しておきます。WordPressなら「single.php(個別ページ)」に設置するのが一般的です。

記事下に広告を設置するには「single.php」の次のコードを探します。

1
<?php get_template_part( 'content', get_post_format() ); ?>

※「get_template_part」で「content.php」を呼び出すというコードなので、似たような部分を探してみて下さい。

※もしこのコードがない場合には適当な位置に「テスト」とテキストを入れて保存し、表示される場所を確認してみると確実です。

「content.php」を呼び出すコードの直後に次のコードを入れます(single.php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 本文記事下の横並びアドセンス(スマホ/PC切り替え) -->
<p class="ad-bottom-label">スポンサーリンク</p>
<?php if (wp_is_mobile()) :?>
<div class="sm-ad-bottom">
ここにスマートフォン用の広告コード
</div>
<?php else: ?>
<div class="ad-bottom-main">
<div class="ad-bottom-left">
 
ここに左に設置する広告コード
 
</div>
<div class="ad-bottom-right">
 
ここに右に設置する広告コード
 
</div></div><?php endif; ?>

追加できたら一度「保存」。これでPCでは2つの広告、スマートフォンでは1つの広告という設置自体はこれで完了ですが、このままだと縦並びになっているので、スタイルシート(CSS)で横並びになるように調整していきます。

広告の位置調整で横並びに

スタイルシート(CSS)の一番下に次のコードを追加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* スポンサードリンクというラベルの部分 */
.ad-bottom-label {
  text-align:center/* ラベルを中央寄せ */
  margin-top:15px/* 上に余白 */
}
/* 横並び広告全体部分 */
.ad-bottom-main {
  margin-top:20px/* 上に余白(ラベルとの距離) */
  margin-bottom:20px/* 下に余白(下のコンテンツとの距離) */
}
/* 広告左 */
.ad-bottom-left{
     float:left/* 広告を左寄せ */
     margin-right:10px/* 右に余白(2つの広告の間の余白) */
}
 
/* 広告右 */
.ad-bottom-right{
     float:left/* これも広告の左寄せ */
}
/* 最後に左寄せを解除するための記述 */
.ad-bottom-main:after {
  content:"";
  display:block;
  clear:both;
}

これで一度保存して、サイトを表示させ、「F5」を押してリロードさせて確認(個別記事ね)します。コンテンツの横幅が十分ならこれで広告は横並びになっているはずです。

※一応PCで2つの広告が横並びになっていて、スマートフォンでは記事下に1つだけ広告が表示されているのを確認してください。

もしスマートフォンで広告が右横にはみ出しているような場合には

スタイルシートの最後に次の記述を追加。

1
2
3
@media screen and (max-width:599px){
.ad-bottom-sm{margin-left:-10px}
}

マイナスのmarginにしているので、数値を大きくする程左に移動させる事ができます。「-10px」か「-15px」くらいにしておけばスマートフォンページの広告ははみ出さずに設置できます。

ここで「wp_is_mobile」という関数を使って条件分岐してますが、「PCページ」と「スマートフォン&タブレット」という分け方になっています。

タブレットって横幅があるのでタブレットでの表示はPCと同じにしたいときは下記記事を参考にして下さい。

タブレットでの表示はPCと同じにしたい

 

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください