ニケッチャニッキ

はてなブログ・WordPressカスタマイズ・Androidプログラミング

はてなブログにアドセンスの記事内広告とインフィード広告を自動挿入する

f:id:niketcha:20190707123125p:plain
WordPressからはてなブログに移行してきました。

はてなブログではできることが減るのかな?と思っていたのですが、意外と自由度が高くて驚いています。

自動で記事内広告を貼ることもできるし、インフィード広告をうまい具合に馴染ませることもできる。

しかもWordPressよりも初心者向けに書かれている記事が多く感じました。時間をかけずに簡単に、体裁を整えることができるのって素晴らしい。

私がお世話になったはてなブログカスタマイズ記事を紹介します。

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

▼ドメイン取得はこちら

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

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

記事内広告を自動挿入するには次の記事が参考になります。

uxlayman.hatenablog.com

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

どの位置に挿入するのか、いくつ挿入させるのか細かく設定でき、できたコードを貼るだけでOKです。こんな素晴らしいツールが用意されているなんて!はてなブログのユーザーが多いからなのでしょう。もちろんこのツールを作成されたU太郎さんも素晴らしいし、本当にありがとうございます!

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

インフィード広告というのは記事一覧に挿入する広告です。広告が他の記事と同じようにしれっと並んでいるのでデザインを邪魔しないし、クリック率も高いです。

うちのブログは今下の画像のようになっています。下の段の真ん中が広告です。

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

f:id:niketcha:20190707123619p:plain


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

まずはアドセンスでインフィード広告を作成します。

www.imuza.com

そして上のページに記載されているスクリプトの***部分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に次のコードを追加しています。

@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とはてなブログ、どちらがいいか迷っている方の参考になればと思います。