【質問箱への回答】はてなブログでGoogleアドセンスをダブルレクタングルで配置するコードを紹介します。

f:id:yuki_2021:20180429235156j:plain:w300

さて、今日は質問箱への回答日である。今週届いた質問に回答してまいろう。その前に軽く５００文字程度、近況などを述べておこうかな。

GWに入って長期休暇に入った。とはいえ僕の会社では飛び石なので４月２８日～３０日、５月３日～６日の休みなんだけどね。休みの過ごし方としてはNetflixで映画を観たり、CLIP STUDIO PAINTの練習のためにイラストを描いたりしている。

GW期間中にどこかに行く計画としては、後半の方でちょっと沖縄本島北部の離島の方にバスで日帰り弾丸ツアーを計画している。別に泊まりじゃないけど折角の休みにどこにも行かずに家の中にずっといるってのは腐ってしまうからな。ちょっと遠出して、変わったものを見聞きして、美味しいものを食べようという計画だ。孤独のグルメのゴローちゃんみたいな一人旅をしたいと思ったのさ。

大体変わったことと言ったらその日帰り旅行ぐらいのもので他には計画はないな。いや、本当は慶良間諸島とかの民宿あたりに２～３泊してこようかなみたいな計画をしてたんだけど、GW中ってのは普通にどこでもホテルとか民宿には空き室がなくてな、仕方なく沖縄本島内で日帰り旅行になった。

んー、本当はさ東京行ったりとかそういう旅をしたかったのよ。だけどLCCでも早割予約しないと空き席がなくて、今からJALとか取ると飛行機片道で２万５千円とかの世界でさ、こんな旅をすると今月だけで破産してしまう。本当は軽く物見遊山程度のノリで内地に温泉旅行とかしたかったのよ。

来年はGWに旅行を計画するなら正月頃から調べて予約をしないといけないな。できれば夏休みにはコミケとかも行ってみたいし、そんなんじゃなくても温泉旅行とかで由布院とかも行ってみたいのよ。台湾とか韓国でもいいな。沖縄からだと東京よりもそっちが近くて安いのよ。来年は１月ごろからGWに向けて色々と計画しないとな。

さて、質問箱に今週届いたのは一件。知り合いからなんだけど匿名にして欲しいというので個人情報は伏せておこう。

こんにちは、熱心な読者だと思っているのですが最近、なんだか忙しくて記事を読むのが遅くなっています。

質問なのですが、匿名でお願いします(^^;)

私のブログ、(ブログ名）ですが、(URL)

記事下の広告がトップページから入って見ると1つの表示で、記事のタイトルから見ると3つ表示されます。本当は、トップからも記事タイトルからも並べて2つの表示にしたいのです。使っているテーマが悪いのでしょうか。

広告表示の仕方は、検索して調べて右、左、レスポンシブデザイン仕様にしたつもりなのですがスマホを持っていないので、どのような表示なのかわかりません。広告を貼るのも難しくて分からなくなりました。

お時間のある時に、猿でもできる広告を2つ並べる方法をご教授お願いします。(ユーザ名)

確認してみましたけど、多分、記事直下に要素を入れるスクリプトで入れたアドセンスと普通に入れたアドセンスがごっちゃになってる感じですね。スマホで確認してみましたけど縦に２個アドセンスが表示されてました。

一応、僕のブログでは記事下部にダブルレクタングルでアドセンス２個並べて、画面幅によってアドセンス一つだけに変えるようにカスタマイズしているのでそのコードと設置方法を書いておきます。

デザインの「記事」＞「記事下」に下記をそのまんまコピペしてもらえれば大丈夫かと。念のために他のコードはバックアップを取って削除してこのコードだけ入れてください。

<div id="my-footer">
<div style="text-align:center;">SPONSORED LINK</div>
<table class="mobile01">
    <tr>
        <td>
<!-- PC版レクタングル広告１　始まり -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-0000000000000000000"
     data-ad-slot="000000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- PC版レクタングル広告１　終わり -->
        </td>
        <td>
<!-- PC版レクタングル広告２　始まり -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-00000000000000000000"
     data-ad-slot="0000000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- PC版レクタングル広告２　終わり -->
        </td>
    </tr>
</table>
<div class="mobile02">
<!-- SP版レクタングル広告１　始まり -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-0000000000000000000000000"
     data-ad-slot="0000000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- SP版レクタングル広告１　終わり-->
</div>
</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>

デザインCSSに下記を追加。

/* レスポンシブでの広告 */
@media screen and (max-width: 480px) {
    .mobile01{
        display: none !important;
    }
}
@media screen and (min-width: 480px) {
    .mobile02{
        display: none !important;
    }
}