ボム君.com

プログラミングで世界を変えよう

【Adsense】記事下広告をPCはダブルレクタングル、スマホはレスポンシブにする方法

f:id:powerbombkun:20170520161232p:plain

こんにちは、ボム君です。


はてなブログでアドセンス広告を貼っている方の場合、こんなことで悩んだことありませんか?

  • 記事下の広告の種類をPCとスマホで表示を切り替えたい
  • PCで表示するが、スマホでは表示したくない
  • スマホでは表示するが、PCでは表示したくない

こんな方のために、今回ははてなブログの方を対象にPCとスマホで記事下アドセンス広告の種類を切り替える方法を教えますね。


じゃあいってみよっ!

完成時イメージ

最初に完成時のイメージを見せておきますね。

私のブログでは今Adsense広告の貼り方は以下のような設定にしています。

記事下にPC版ではダブルレクタングル、スマホ版ではレスポンシブって感じですね。

なかなかいいでしょ?

PC版

f:id:powerbombkun:20170518000926p:plain

PC版はこのように記事下に300×250のサイズの広告を横並びで2つ貼っています。

スマホ版

f:id:powerbombkun:20170518001604p:plain
スマホ版は記事下にレスポンシブ広告を貼っています。
※レクタングルと同じ位のサイズが表示されていますが、レスポンシブ広告を設定しています。

設定の仕方

はてなブログの設定は以下の箇所を変える必要があります。

  1. 広告ユニットの準備
  2. デザイン変更:記事下
  3. デザイン変更:デザインCSS

それじゃすごくていねいに解説していきますね。

いくぜ!

手順①:広告準備

まずは設定するための広告を準備しましょう。

今回使用するのは以下の3つのタイプの広告です。

  • レクタングル(300×250)1つ目
  • レクタングル(300×250)2つ目
  • レスポンシブ

レクタングルの2つの広告がPC用、レスポンシブの広告がスマホ用になります。


広告作成はアドセンスの画面から作成してください。この画面ね↓


f:id:powerbombkun:20170429091052p:plain


次の画面からレクタングルの広告を2つ、レスポンシブの広告を1つ作成してくださいね。

レクタングルの広告を作る時はこちらを選択し、保存してコードを取得ボタンから広告を作成。↓

f:id:powerbombkun:20170518003606p:plain

レスポンシブの広告を作る時はこちらを選択、保存してコードを取得ボタンから広告を作成。↓

f:id:powerbombkun:20170518003617p:plain


これで以下の3つの広告が作成できていれば広告準備はOKです。

  • レクタングル(300×250)1つ目
  • レクタングル(300×250)2つ目
  • レスポンシブ

手順②:挿入用コードをコピー

以下の挿入用のコードを一旦エディタ(メモ帳等)にコピーしてください。

<div id="my-footer">
<p style="text-align: center; font-size: 75%;">SPONSORED LINK</p>
<table class="table-css">
<tr>
<td class="td-css">ここに1つ目レクタングルのアドセンスコードを入れる</td>
<td class="td-css">ここに2つ目レクタングルのアドセンスコードを入れる</td>
</tr>
</table>
ここにレスポンシブのアドセンスコードを入れる
</div>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

手順③:挿入用コードを編集

次は手順②でエディタ(メモ帳等)にコピーした挿入用コードを編集していきます。


まず、手順②のコード内の以下の文字列の箇所をアドセンスコードで置換してください。

  • ここに1つ目レクタングルのアドセンスコードを入れる
  • ここに2つ目レクタングルのアドセンスコードを入れる
  • ここにレスポンシブのアドセンスコードを入れる


広告ユニットの準備の際にレクタングル広告×2、レスポンシブ広告×1を作成したはずなので、各々のアドセンスコードこ対してコピペしてくださいね。

コードの場所はここをクリックし
f:id:powerbombkun:20170429090530p:plain

このコードをコピーして使ってください。
f:id:powerbombkun:20170429085745p:plain



次に、スマホとPCで表示を切り替えるようにおまじないコードを追記します。

↑でコピペした3つのアドセンスコードを以下のように修正します。

スマホ版で非表示にしたい広告へおまじない追記

今回の場合、PC版はダブルレクタングルでスマホ版はレスポンシブという表示のため、PC版ではレスポンシブ広告を非表示にするようにおまじないを追記します。

レスポンシブ広告のアドセンスコードを以下のように修正します。

ins class="adsbygoogle"

この部分のコードを以下のように変更する。↓

ins class="adsbygoogle widedisplay"
PC版で非表示にしたい広告へおまじない追記

スマホ版ではPC版と逆で、ダブルレクタングル広告を非表示にするようにおまじないを追記します。

レクタングル広告各2つのアドセンスコードを以下のように修正します。

ins class="adsbygoogle "

この部分のコードを以下のように変更する。↓

ins class="adsbygoogle mobile"

手順④:編集済みコードを記事下設定にコピペ

編集が終わったら、はてなブログの設定画面の以下の箇所にコピペしてください。

  • 貼る場所:デザイン設定 - 記事下

ここ↓
f:id:powerbombkun:20170429083401p:plain

手順⑤:デザインCSS設定に以下をコピペ

デザインCSS設定で以下のコードをコピペしください。

コード

/* アドセンススマホ対応 */
@media screen and (max-width: 680px) {
  .mobile{
    display: none !important;
  }
}

@media screen and (min-width: 680px) {
  .widedisplay{
    display: none !important;
  }
}

/* テーブルの線非表示,中央寄せ */
.table-css, .td-css { 
    border-style:none !important;
    margin:0 auto;
}

※内容としては画面サイズに応じて表示・非表示を切り替えるためのコードです。
 ディスプレイサイズが680Pixelより上か下かで切り替えてます。

  • 貼る場所:デザイン設定 - デザインCSS

ここ↓
f:id:powerbombkun:20170520160117p:plain


この手順が終わったら、変更を保存しPCとスマホそれぞれで表示を確認してください。

最初の画面イメージのような表示になっていればOKです。

できたでしょうか?


それでは、よりよいアドセンスライフを!