Google AdSenseの広告を記事に埋め込む
本来、好きな場所へGoogleAdSenseの広告を設置する場合、記事の中に手動で埋めこむ必要があります。
それでも問題が無いのですが、既に綴ったすべての記事に埋め込むのはとても大変なんですよね！
そこでとても簡単で良い感じにGoogleAdSenseを設置できるスクリプトを公開しているブログがありましたのでご紹介いたします。
【はてなブログの記事ページに、いい感じにアドセンス埋め込むスクリプト。】 kanaxx.hatenablog.jp
ソースコードの一部を書き換える
うぇいくは一切プログラムの知識がありませんので、適当に変更しています。
間違いや記述による不具合があるかもしれませんので、ご了承下さい。
プログラムことはほんとにわからないので、そのままコピーして貼り付けたら全然動かなくて、おかしいなって思うくらいの知識無しです。
それでも眺めていたら、どうもコードの一部を変更する必要があるようなので、その点についてちょっとだけ説明するね♪
（ソースコードは許可を得て掲載しています）
<script> /*説明 <script> //記事側でコントロールできる変数 //この記事で、h3のどの位置にadを差し込むかの指定。出したくない記事では[]。 //記事側で変数を定義しなかったら[2,4]に差し込む let adPositionOfThis=[]; //記事の最後にadを差し込みたくないときの指定。trueで抑止。falseで差し込み //記事側で変数を定義しなかったらfalse扱いで差し込み実行 let avoidInsertLastOfThis=true|false; <\/script> */ function insertAdsense() { console.info('-InsertAdsense start'); let googleAdCode = `スポンサー<br> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0000" data-ad-slot="20000" data-ad-format="auto" data-full-width-responsive="true"></ins>`; //List形式の画面で記事を入れる場所。上から2個目と7個目のsectionの後に入れる。 //一番上の記事を0と数えるので、3番目の下と8番目の下と、、、に入る let topAdPosition = [2, 7, 12, 17]; //記事内で個別に指定されないときに使うAd挿入場所。 //0から始まる値で、2を指定すると3番目の<h3>と直前に差し込む。2番目のh3の枠内 let articleAdPosition = [2,4]; if (document.querySelector('article')) { let entryBody = document.querySelector('div.entry-content'); if (!entryBody) { return; }
👆先の紹介したブログから、コードの前半部分を抜粋しました。
👇コードの赤い字の部分を自分のアドセンスに書き換えます。
function insertAdsense() {
console.info('-InsertAdsense start');
let googleAdCode = `スポンサー<br>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0000"
data-ad-slot="20000"
data-ad-format="auto"
data-full-width-responsive="true"></ins>`;
自分のコードに書き換える
書き換える情報を得るために、
Google AdSenseの設定画面より、広告ユニットを選択、コードを確認ください。
＜＞このマークからコードを確認できます。
style="display:block" → "display:block"：そのまま
data-ad-client="ca-pub-0000" → "ca-pub-774351798"
data-ad-slot="20000" → "508287"
data-ad-format="auto" → "auto"：そのまま
data-full-width-responsive="true"> → "true"：そのまま
はてなブログへセットする
このように書き換えたら、
はてなブログの管理画面から、「デザイン」→「カスタマイズ」→「サイドバー」→「モジュールを追加」→「HTML」と設定して、コードを全部貼り付けます。
保存して記事を更新してみると、3番目の「h3」の直前と、記事の最後に広告が差し込まれていたら成功です♪
文字も「スポンサーだよ♪」に変更してみました。
これですべての記事にGoogle AdSenseがいい感じに差し込まれたと思います。
もっとアレンジできたらいいな、って思いますが、うぇいくがわかるのはここまででした。
おわりに（kanaxxさんへの謝辞）
Google AdSenseの自動広告がもう少し柔軟性があればいいですが、きちんとセットしようと思うとそれなりのプログラムの知識がいると思います。
そんな中、素晴らしいコードを丁寧に公開してくださったkanaxxさんに感謝申し上げます。
初心者の助けとなる素敵な記事を綴っていただき、ありがとうございました。
技術不足のあとがき
・なぜかパソコン版で見ると記事一覧の広告が縦長しか出ないですよね。
色々いじってみているけれど、直らないです。
GoogleAdSenseについて
・タイトル下と、ページ切替時の全画面は自動広告です。（使わないって言ったのに💦）
この部分は見られやすくて、絶対載せたほうがよいって書いてあったので一応載せてます。
あまりクリックされないなら、外してもいいかな。