ズボラ応援ブログ始めました

はてなブログにインフィード広告と記事内広告を自動で貼る方法

ブログ運営

Googleアドセンスの記事内広告とインフィード広告の貼り方を紹介します。はてなブログで記事内広告やインフィード広告を挿入するには、スクリプトを使う必要があります。自分で作るのは大変なので、コピペできるコードを生成してくれるサイトを利用します。

はてなブログでアドセンスを始めるには、独自ドメインの取得とはてなブログProへの登録が必要になります。

▼ドメイン取得はこちら。ドメイン取得最大手のサイトなので、ここで取得しておけば安心。

公式お名前.com

▼はてなブログPro登録はこちら

公式はてなブログPro

はてなブログに記事内広告を自動挿入

記事内広告を自動で貼りつけるには次の記事が参考になります。

この記事がすごいのは、本当にコピペ一発でできてしまうことです。

どの位置に入れるのか、いくつ挿入させるのか細かく設定でき、できたコードを貼るだけでOKです。

はてなブログにインフィード広告を挿入

インフィード広告というのは記事一覧に挿入する広告です。広告が他の記事と同じようにしれっと並んでいるのでデザインを邪魔しません。

下の画像が例です。下の段の真ん中が広告です。

よく見れば多少デザインが違うのですが、ぱっと見は馴染んでいると思います。

f:id:niketcha:20190707123619p:plain

自分でコードを書くのは大変なので、こちらも便利なツールを使いましょう!

まずはアドセンスでインフィード広告を作成します。そして次のページに記載されているスクリプトの***部分3か所を自分の情報に書き換えます。

 

あとは出来上がったコードをフッターに貼り付ければOK。

// 5記事おきに入れる場合
for(var i=5; i<j; i=i+6)

この部分を書き換えれば好きな場所に好きなだけ貼ることができます。

私は次のように書き換えました。

 // 4記事おきに入れる場合
for(var i=4; i<=j; i=i+5) 

4記事毎に挿入、さらに<を<=に変えることで最後にも挿入しています。私のブログの場合はPCだと12記事が3列に表示されるので、これでぴったり5段で表示できます。

マテリアルぽっぷ追記用css

スクリプトを貼るだけではデザインが馴染まないので、cssで調整しましょう。

私はマテリアルぽっぷというテーマを利用しているのですが、cssに次のコードを追加しています。

@media screen and (max-width: 1200px)
.page-archive .entry-thumb {
height: 191px;
}
.page-archive .entry-thumb {
height: 191px;
}
.ads-infeed {
box-shadow: 0 0 4px 0 rgba(0,0,0,.15), 0 3px 4px 0 rgba(0,0,0,.25);
border-radius: 8px;
background: #fff;
overflow: hidden;
}

マテリアルぽっぷでは画面の横幅に合わせて画像の高さが変わる設定になっていたのですが、それだとアドセンスの画像と高さが合わなくなってしまうので、191px固定にしました。

あとは影をつけるためのbox-shadow、角を丸くするためのborder-radiusを設定。

アドセンスの画像の上部が丸くならなかったので、overflow: hiddenを設定してはみ出した部分を隠すようにしました。

まとめ

はてなブログでアドセンスの記事内広告とインフィード広告を自動挿入する方法が書かれた記事を紹介しました。

はてなブログではWordPressと比べて情報のわかりやすさに驚きました。

はてなブログでアドセンスの広告を貼りたい方、WordPressとはてなブログ、どちらがいいか迷っている方の参考になればと思います。

コメント

  1. ku-kahan より:

    はじめまして。
    読者登録ありがとうございます♡
    見に来てワードプレスのサイトかと思ってしまうくらいデザインが素敵ですね!
    カスタマイズがすごいんですね。
    元SEさん、同じです。
    これからよろしくお願いします^^

    • ニケッチャ より:

      くうか (id:ku-kahan)さん
      訪問&コメントありがとうございます✨
      カスタマイズ大好きで、つい時間が経ってしまいます😅
      こちらこそよろしくお願いします!

タイトルとURLをコピーしました