自由に生きる
Just Do It
wordpress

はてなブログでアドセンスの広告を2列表示する方法!

こんにちは。

ブログを始めて4ヶ月ほどが経ち、もうちょっとで90記事に到達する記念に、最近はブログのカスタマイズをやっている今日この頃です。

以前から、グーグルアドセンス の広告を2列表示にしたかったのですが、私が使っているInnocentでは、何故だかできなかったんです。(やり方が分からなかったんです)

ここ最近も、いろいろなブログを見て、2列表示のCSSをコピペで試したんですが、全滅で、ちょっと投げやりになったところ、あることを試して見たら、簡単にできたのでご紹介します。

 

広告2列表示とは?

はてなブログでアドセンスの広告を2列表示する

こんな感じのやつです。<上記画像では、会社名を消して、「これは写真です」と加工していますが、パソコンからは、このページの下に行けば実物が見れます>

色々なサイトをチェックすると、大体table tabを使っているのですが、何故だか私のブログ(Innocent)では、反映されないんです。

ということで、私が試したのは、単純に2つの広告を並べただけです。

はてなブログでアドセンスの広告を2列表示する方法

<私はデザイン設定の記事下にこれを入れています>

はてなブログでアドセンスの広告を2列表示するスクリプト

2つ目の広告のadsbygooleの後に none-mobileを付け加えたので、モバイルで見るときは広告は1つしか表示されません。

また、レスポンシブ広告を使うと、広告が上下に2つ表示され見にくかったので、250×250 300×250の広告を2つアドセンスで作りました。

追記2019年3月19日)

サイズを300×250のレクタングル中に変更しました。こちらの方がクリック単価が大きいためです。

本当はレクタングル大の336×280にしたかったのですが、読者の画面サイズをチェックすると、このサイズは大きすぎたので、レクタングル中で今はやっています。カスタマイズでレクタン大を使うことが出来るようですが、アドセンスのコード改変は規約違反になりそうなため私はやってないです。>

使い始めて1ヶ月弱 1年ほどたちますが、特に問題は全然ありません。

 スクリプト

 <p style=”text-align: center;”><span style=”font-size: 85%;”>Sponsored Link</span><br />
1つ目のアドセンスの広告スクリプトをここにコピペ
2つ目のアドセンスの広告スクリプトをここにコピペ
</p>

 最後に

スクリプトはこれだけです。

忘れずに2つめの広告の<ins class=”adsbygoogle”を、<ins class=”adsbygoogle none-mobile”に変更してくださいね。

なんでこれを思いつかなかったのか、不思議なんですが、単純に2つの広告コードを並べたら、全てが上手くいきました。

みなさんも他の方法でうまくいかない場合は、こちらを試してみてください。