編集

【Blogger】目次の下にAdSense広告を自動挿入する方法

2026/05/07

久々のBloggerネタ

前にやろうとして断念、、、

しかし、またやりたくなった

AIに聞いたらすぐできるだろう！！

と

今回はChatGPTではなく

Geminiに聞いてみました

Adsense自動貼付けコード

Blogger、F-light（ここで使っているBloggerテーマ）の目次下にAdsense広告を自動貼付けをするコードです
※他のテーマ、他のブログサービスでテストはしていません

目次の<script>を書き換えします

<!-- Auto TOC Generator via: https://itblogger-note.blogspot.com/2021/12/fast-and-simple-auto-toc.html -->
<script>/*<![CDATA[*/
  !function(e,t){const n=t.querySelector(".post-body");if(!n)return;const s=t.createElement("details"),l=t.createElement("summary"),r=t.createElement("ul");s.id="toc",s.open=!1,l.className="toc-title",l.title="目次を開く/閉じる",l.innerHTML='<svg aria-label="リスト" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>目次<svg aria-label="開閉" class="svg-icon-24 angle"><use href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>',r.className="toc-container",s.appendChild(l),s.appendChild(r);const a=n.querySelectorAll("h2, h3, h4");if(a.length<2)return;a[0].parentNode.insertBefore(s,a[0]);const c=[],i=[{level:1,element:r}];a.forEach(e=>{const t=parseInt(e.tagName.substring(1));c.push(t)}),a.forEach((e,n)=>{const s=parseInt(e.tagName.substring(1)),l=c[n+1],r=t.createElement("li"),a=t.createElement("a"),o=n+1,h=t.createElement("ul");let p;a.innerHTML=e.innerHTML,a.href=`#${o}`,r.appendChild(a),s<l&&r.appendChild(h),e.id=o;do{p=i.pop()}while(p.level>=s);p.element.appendChild(r),i.push(p),i.push({level:s,element:h})})}(window,document);
//目次に戻るボタン
const tocContainer = document.querySelector("#toc");
if (tocContainer) {
  let backToc = document.querySelector("body");
  backToc.insertAdjacentHTML("beforeend", '<a id="backtoc" title="目次" href="#toc"><svg aria-label="目次に戻るボタン" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg></a>')
}
/*]]>*/</script>

元が↑コレ

↓に書き換え

<!-- Auto TOC Generator via: https://itblogger-note.blogspot.com/2021/12/fast-and-simple-auto-toc.html -->
<script>/*<![CDATA[*/
!function(e, t) {
  const n = t.querySelector(".post-body");
  if (!n) return;

  const s = t.createElement("details"),
        l = t.createElement("summary"),
        r = t.createElement("ul");

  s.id = "toc", s.open = !1, l.className = "toc-title", l.title = "目次を開く/閉じる", 
  l.innerHTML = '<svg aria-label="リスト" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>目次<svg aria-label="開閉" class="svg-icon-24 angle"><use href="/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>', 
  r.className = "toc-container", s.appendChild(l), s.appendChild(r);

  const a = n.querySelectorAll("h2, h3, h4");
  if (a.length < 2) return;

  // 目次を挿入
  a[0].parentNode.insertBefore(s, a[0]);

// --- 直接、広告コードを生成して挿入 ---
  const adDiv = t.createElement("div");
  adDiv.style.margin = "50px 0";
  adDiv.innerHTML = `
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
         data-ad-slot="XXXXXXXXXX"
         data-ad-format="horizontal"
         data-full-width-responsive="true"></ins>
  `;
  s.parentNode.insertBefore(adDiv, s.nextSibling);
  
  // 挿入した広告に対してのみ実行命令を出す
  (adsbygoogle = window.adsbygoogle || []).push({});
  // ------------------------------------

  const c = [], i = [{ level: 1, element: r }];
  a.forEach(e => {
    const t = parseInt(e.tagName.substring(1));
    c.push(t)
  }), a.forEach((e, n) => {
    const s = parseInt(e.tagName.substring(1)),
          l = c[n + 1],
          r = t.createElement("li"),
          a = t.createElement("a"),
          o = n + 1,
          h = t.createElement("ul");
    let p;
    a.innerHTML = e.innerHTML, a.href = `#${o}`, r.appendChild(a), s < l && r.appendChild(h), e.id = o;
    do { p = i.pop() } while (p.level >= s);
    p.element.appendChild(r), i.push(p), i.push({ level: s, element: h })
  })
}(window, document);

//目次に戻るボタン
const tocContainer = document.querySelector("#toc");
if (tocContainer) {
  let backToc = document.querySelector("body");
  backToc.insertAdjacentHTML("beforeend", '<a id="backtoc" title="目次" href="#toc"><svg aria-label="目次に戻るボタン" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg></a>')
}
/*]]>*/</script>

これで目次の下にAdsense広告が自動で貼付けされます

// --- 直接、広告コードを生成して挿入 ---
  const adDiv = t.createElement("div");
  adDiv.style.margin = "50px 0";
  adDiv.innerHTML = `
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
         data-ad-slot="XXXXXXXXXX"
         data-ad-format="horizontal"
         data-full-width-responsive="true"></ins>
  `;

ここを忘れずに自分の奴に変えてくださいね
赤字の数字を変えると目次との余白を調整できます

それと、、、

data-ad-format="horizontal"←ここ、自動で広告サイズが変わる場合 auto になっていると思いますが horizontal に変えています

これで細い横長の広告しかでなくなります

嫌な方、デカい広告も出したい！！って方は auto にしてください

自分は目次下にデカい広告は目障りだと思うから、、、

そういうなら広告貼り付けるなよ！！って話しなんですが、、、

お小遣いを稼げるかもしれないじゃないですか、、、

人間って欲深いんです、、、