はじめに
皆さんこんにちは、こんばんは。
techblogchan（ @techblogchan ）です。
先日Google AdSenseにようやく合格した私ですが、自動広告が悪さをしてブログのレイアウトが大きく崩れる問題が起きてしまいました…！
そこで今回は、手動ではてなブログにいい感じにGoogle Adsenseを貼り付ける手動広告のやり方について私なりの工夫を備忘録も兼ねて書いていきたいと思います。
＊＊＊＊＊
自動広告を使っていて起きた問題
techblogchanのサイトを見てもらうとわかる方もいると思うのですが、私のサイトではカードタイプのUnderShirtというはてなブログのテーマを使用しています。
自動広告をONにする前は以下の画像のようにきれいに各記事のカードが並んでいました。
しかし自動広告をONにしたあと、サイトを確認してみると何故か思わぬところに広告が導入されていて全体のデザインが大きく崩れてしまいました…
これはまずいと思い、すぐに自動広告をOFFにして手動で広告を入れる方法を模索しました。
＊＊＊＊＊
手動での広告導入方法
はてなブログでは、HTMLを自分で書くことができないのでインフィード広告を使用するとなるとどうしてもjavascriptでの制御が必要になってしまいますよね…。
今回は以下の記事を参考にさせていただきながら、自分のサイトに合うように調整しました！
clean-copy-of-onenote.hatenablog.com
実際に私がフッタ部分に記載しているコードは以下のコードです！
<script>
// topページの各記事カードが入っている親コンポーネント
var parentElement = document.getElementsByClassName("archive-entries")[0];
// 各記事カードがいくつ入っているか数える
var j = parentElement.childElementCount;
// 5記事おきに入れる場合
for(var i=4; i<j; i=i+5) {
// ※ 下記で説明します
$('section.archive-entry').eq(i).after('<section class="archive-entry autopagerize_page_element">AdSenseのコードをstring化したものを挿入</section>')
i++;
}
</script>
topページの各記事カードが入っている親コンポーネントはブラウザの開発者ツールから確認しました！
(確認の仕方がわからない人はコメント等いただければと思います)
開発者ツールを見るとarchive-entriesクラスの中にすべての記事カードが
<section class="archive-entry autopagerize_page_element"></section>
上のsectionタブの中に挟まれて表記されているのが確認できます。
ここでの確認が※印の部分の解説とつながるのですが、上記sectionタブの間に参考にさせてもらったサイトで生成した文字列化したAdSenseコードを挿入することで5記事ごとのインフィード広告を表示できるようになりました！
同じテーマを使用している人であれば、私がフッタ部分に記載しているコードのAdSenseのコードをstring化したものを挿入という部分だけご自身のAdSenseコードを参考サイトでString化してコピー&ペーストすればうまく動くかと思います。
きれいに表示されたときは小躍りしました♪
上記参考サイト様にも記載はありましたが、AdSenseコードの取り扱いに関してはくれぐれも自己責任でお願いします！
まとめ
今回は、Google AdSenseのインフィード広告を使ってトップページに手動で広告を設置する方法についてまとめました！
自動広告は何も設定しなくても勝手に設置してくれるので便利ではありますが、デザインが崩れたりすることがあるということがわかりました…。
他の部分のGoogle AdSenseの手動設置に関しても記事をまとめますのでまたぜひ見ていただけたらと思います！
それではまた別の記事で〜！
