ビジログ

マーケティングを中心としたビジネス関連とブログ術の二本柱

はてなブログでアドセンスを2つ横に並べて表示させるダブルレクタングルをコピペで簡単に設置する方法

f:id:netlifehack:20170723001027p:plain

どうも、むむむです。

アドセンスの効果的な配置は人それぞれ考え方は違うし、ブログの内容や読者さんの属性によっても変わってくると思いますが、個人的にとてもオススメなのがアドセンスを横に2つ並べたダブルレクタングルという手法です。

私も複数のブログを運営していますが、PCの記事下はダブルレクタングルと決めています。なんとなくで言ってるのではなく、実際にデータで何度も検証した結果のこたえです。

今回このはてなブログでもダブルレクタングルを採用したので、せっかくなのではてなブログでアドセンスを横に2つ並べるダブルレクタングルの方法をご紹介したいと思います。

ちなみに私はCSSとかは最低限しかわからない素人ですので、以下の記事を参考にさせていただきました。感謝!

はてなブログでアドセンスを横に2つ並べてはる方法

はてなブログにアドセンスのダブルレクタングルを設置するには、以下の手順で簡単に設置することが可能です。

アドセンスコードを2つ取得しよう

まずGoogle AdSenseで336×250300×250のアドセンスコードを2つ取得してください。

f:id:netlifehack:20170723001247p:plain

ダブルレクタングルのコードを作成しよう

続いて以下の「ここにアドセンスコードを入れる」という部分に、取得したアドセンスコードをそれぞれコピペで入力します。

<div id="my-footer">

<p style="text-align: center; font-size: 75%;">スポンサーリンク</p>

<table class="table-css">

<tr>

<td class="td-css">ここにアドセンスコードを入れる</td>

<td class="td-css">ここにアドセンスコードを入れる</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>

注意!スマホにダブルレクタングルを表示させない設定

もしあなたがレスポンシブルデザイン対応のテーマを利用しているのであれば、上記のコードを少し修正してあげる必要があります。

というのもGoogleはスマホサイトの位置画面に複数のアドセンス広告を表示させることを禁止しており、上記コードをそのまま貼るとスマホサイトにもアドセンスが2つ並んで表示され規約違反になってしまうからです。

そのためレポンシブルテーマを利用している場合は、ダブルレクタングル用に取得した2つのアドセンスのコードの1つを、以下のように修正してください。

アドセンスのコードの以下の部分を

ins class="adsbygoogle"

下記に変更します。

ins class="adsbygoogle mobile"

こうすることで変更した方のアドセンスはスマホに表示されないので、PCではダブルレクタングル・スマホではレクタングルを1つ表示させるように設定することができます。

コードを「記事下」or「記事上」にコピペ

はてなブログの設定画面から「デザイン」→「カスタマイズ」→「記事」にある記事上か記事下に、上記のコードをコピペします。

記事上にはれば記事の上部にダブルレクタングルを設置し、記事下にはれば記事の最後にダブルレクタングルを設置することができます。

まぁ個人的にオススメでかつ一般的なのは記事下なので、特に理由がなければ記事下にコピペしておくといいでしょう。

f:id:netlifehack:20170723003947p:plain

CSSを設定する

続いて以下のCSSコードをデザインCSSコードにコピペします。

CSSコードはこちら

@media screen and (max-width: 680px) {

  .mobile{

    display: none !important;

  }

}

.table-css, .td-css { 

    border-style:none;

    margin:0 auto;

}

上記コードをはてなブログのデザイン→カスタマイズ→デザインCSSに貼り付けます。

f:id:netlifehack:20170723004003p:plain

以上ではてなブログでのダブルレクタングルの設置は完了です!

最後に一言

ダブルレクタングルは大手メディアでも使われている効果的な手法ですので、是非あなたのはてなブログでも真似してみてください。

以上、最後までお読みいただき感謝!感謝!

皆様の参考になれば幸いです。