ワードプレスアドセンス

 

PCで色々なサイトを見ていると、みなさんGoogle AdSense(以下グーグルアドセンス)を横並びに表示していますよね。
350×200の2つ並びは思わずクリックしてしまうことも多々あります。

 

しかしHTML初心者の私はそのやり方が全然分かりません。
色々なサイトを見ても、詳しく書かれているところは皆無なのでただただ時間の無駄にしました・・・。
なので、システムが得な方に教えてもらうことにしたのです。

 

窓香窓香

師匠!グーグルアドセンスを横並びにする方法教えてください!

宇宙人宇宙人

OK!

 

ということで、私と同じようにお困りで、なおかつHTML初心者の方にも分かるようにご紹介していきたいと思います。

 

※私と同じワードプレス・賢威のテーマの方にしかご説明できませんがそれでも良いという方はお進みください!

スポンサードリンク



 

1.「外観→テーマ編集」

ワードプレスアドセンス

 

まず、「外観→テーマ編集」をタップします。

 

2.「個別投稿 (single.php)」

ワードプレスアドセンス

 

次に左から「個別投稿 (single.php)」を選びます。
少し上に「個別投稿ページ(page.php)」というのがありますので注意してください。
(page.php)ではなくその少し下にある (single.php)なので注意してくださいね。

 

3.場所を選ぶ

ワードプレスアドセンス

 

横並びにしたいアドセンスが、上下のどこに張り付けたいのかを考えます。
記事上の方の場合は35行目ほどにある <div class=”article-body”>コードの上段に、
記事下に表示したい場合は57行目の </div><!–article-body–> のコードの次の段横並びコードを張り付けます。

 

↓横並びコード

 

<div class="adBlock">スポンサードリンク<br>
  <?php if(wp_is_mobile()): ?>
    <!-- ここにスマホのアドセンスコードを貼り付ける -->
  <?php else: ?>
  <div class="adPc">
    <!-- ここにPC左側のアドセンスコードを貼り付ける -->
  </div>
  <div class="adPc">
    <!-- ここにPC右側のアドセンスコードを貼り付ける -->
  </div>
  <?php endif; ?>
</div>

 

4.アドセンスコード3つ貼り付ける

 

PCの場合は大丈夫なのですが、スマホはアドセンスを2個連続表示すると違反になってしまうので、スマホ用とPC用でカスタマイズする必要があるので、そのためのコードになります。

 

基本的には350×250の推薦サイズで問題ないと思うので、350×250のアドセンスコードを ><!– ここにPC左側のアドセンスコードを貼り付ける –> の部分に貼りつけます。
><!– ここにPC左側のアドセンスコードを貼り付ける –> はすべて消してそこに張り付けてください。

 

3個すべて同じコードで問題ありません。※PCとスマホでコードを変えたい場合は次の章でご紹介します。
張り付けたら「ファイルを更新」を押します。

 

5.「追加CSS」

ワードプレスアドセンス

 

ワードプレスアドセンス

スポンサードリンク

 

「外観→カスタマイズ」の「追加CSS」で、下記の横並びデザインを貼り付けて「保存して公開」を押します。

 

↓横並びデザイン

.adBlock {
margin:2em auto;
text-align:center;
overflow:hidden;
}
.adPc {
float:left;
width:50%;
text-align:center;
}

 

アドセンスを横並びにするときの注意点

 

すでに「Wp Insert」などのプラグインで、広告が出るように設定している場合は設定を停止してください。

 

スマホのサイズが合わない場合

 

推奨サイズに設定してもスマホのサイズが合わない場合があります。
そんなときは以下のことを試してみてください。

 

●アドセンスコード内「style=”display:block”」部分に、「width:000px」等の余計な記述がないか確認する。

 

ある場合には、「style=”display:block”」のみに書き換える。
ない場合はアドセンスコード内「data-ad-format=”auto”」部分の、「auto」を「rectangle」に書き換える。
私はこれで直りました!

 

PCとスマホでアドセンスの表示を変えたいとき

 

ここまでやってみて思ったのですが、例えば記事上など、PCとスマホ用のサイズを変えたいですよね。
PC用はどーんと横長にしたいけどスマホだとバランスが悪くなっちゃうからどうしよう・・。
そんなときも今日ご説明したコードで解決できるんです。

 

記事上にPC用は横長の広告、スマホでは小さい横長で表示させられるやり方をご紹介しますね。

 

PCとスマホでアドセンスの表示を変える方法

 

やり方は先ほどと同じです。
・記事上の方の場合は35行目ほどにある <div class=”article-body”>コードの上段に、
・記事下に表示したい場合は57行目の </div><!–article-body–> のコードの次の段横並びコードを張り付けます。

 

↓横並びコード

 

<div class="adBlock">スポンサードリンク<br>
  <?php if(wp_is_mobile()): ?>
    <!-- ここにスマホのアドセンスコードを貼り付ける -->
  <?php else: ?>
  <div class="adPc">
    <!-- ここにPCのアドセンスコードを貼り付ける -->
  </div>
  <div class="adPc">
  </div>
  <?php endif; ?>
</div>

 

PC、スマホ、それぞれに表示させたいアドセンスコードをアドセンスで取得して貼り付けます。
私の場合は<!– ここにスマホのアドセンスコードを貼り付ける –> のところに小さいスマホ用の横長、<!– ここにPC左側のアドセンスコードを貼り付ける –> に大きいPC用の横長のアドセンスコードを張り付けました。
<!– ここにPC左側のアドセンスコードを貼り付ける –> は全て削除してくださいね。

 

そして、「外観→カスタマイズ」の「追加CSS」で、下記の横並びデザインを貼り付けて「保存して公開」を押して完成です。

 

↓横並びデザイン

.adBlock {
margin:2em auto;
text-align:center;
overflow:hidden;
}
.adPc {
float:left;
width:50%;
text-align:center;
}

 

宇宙人宇宙人

やればできただろう?

窓香窓香

やってみたら意外と簡単でした!

宇宙人宇宙人

ミスをしてしまった時用に、最初にバックアップをとってからカスタマイズするのがように!

窓香窓香

わかったわ!ありがとう!