Mutter
編集

【Blogger】目次の下～最初のh2の上にAdSense広告を自動貼付け

｜2026/05/17

アイキャッチ画像

久々のBloggerネタ


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

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

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

と

今回はChatGPTではなく

Geminiに聞いてみました 

Adsense自動貼付けコード

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

※追　記
今、このブログに実装しているコードはターゲットを目次下から最初のh2上に変更しました
h2上ターゲットにしてコード別々に記述する方があとからの作業が解りやすいから
↓の追記／ターゲット変更みてください
目次ターゲットが都合が良い方はコチラを使用してください。


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

<!--TOC Generator via: https://itblogger-note.blogspot.com/2021/12/fast-and-simple--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="false"></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広告が自動で貼付けされます 

adDiv.innerHTML = `
  <ins class="adsbygoogle toc-ad"
       style="display:block"
       data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
       data-ad-slot="xxxxxxxxxx"
       data-ad-format="horizontal"
       data-full-width-responsive="false"></ins>
  `;

ここを忘れずに自分の奴に変えてくださいね

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

data-full-width-responsive="false"←ここもtrueからfalseに変更しています

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

デメリットは広告サイズを指定しているので広告が表示される回数が減ると思います

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

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

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

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

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


追記／ターゲット変更

 ※追　記 

目次下ではなく最初のh2の上に場所指定を変えました

こっちの方が処理も早くなるかな、、、

なんで目次下に拘っていたんだろう、、、

表示される場所は目次下、最初のh2の上なので一緒です

ターゲットが変わっただけです

<!-- 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;

  // 最初のH2（a[0]）の直前に目次を挿入
  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>

↑↑↑目次のスクリプトは変更せず、そのまま！！

で

目次のスクリプトの直下に↓↓↓を貼り付けてください

<!-- 最初のH2上 AdSense挿入スクリプト -->
<script type='text/javascript'>
/*<![CDATA[*/
!function(e,t){const n=t.querySelector(".post-body");if(n){const a=n.querySelectorAll("h2, h3, h4");if(!(a.length<2)){
  // サイズ固定、中央寄せ、はみ出し防止
  const s=t.createElement("style");
  s.innerHTML=`
    /* PC用 */
    .toc-ad-wrapper { margin: 100px 0; text-align: center; }
    .toc-ad-wrapper .adsbygoogle { display: inline-block; width: 728px !important; height: 90px !important; }
    
    /* スマホ（iPhone等）用 */
    @media screen and (max-width: 767px) {
      .toc-ad-wrapper { margin: 24px 0; }
      
      /* H2上：120px固定、中央寄せ */
      .toc-ad-wrapper ins.adsbygoogle {
        display: inline-block !important;
        width: 100% !important;
        height: 120px !important; 
        max-height: 120px !important;
        margin: 0 auto !important;
        overflow: hidden; /* 切断ではなく防止 */
      }

      /* 記事内：160px固定、中央寄せ */
      .post-body ins.adsbygoogle:not(.toc-ad) { 
        display: inline-block !important;
        width: 100% !important; 
        height: 160px !important; 
        max-height: 160px !important; 
        margin: 0 auto !important;
        overflow: hidden; /* 切断ではなく防止 */
      }
      
      /* 親要素も含めて全体をセンターに */
      .post-body .adsbygoogle-noablate,
      .post-body div:has(> ins.adsbygoogle) {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
      }
    }
  `;
  t.head.appendChild(s);

  // 2. 広告タグの作成：data-ad-format="fluid"を採用
  const o=t.createElement("div");
  o.className="toc-ad-wrapper";
  o.innerHTML='<ins class="adsbygoogle toc-ad"
  　　　　　　　data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
                data-ad-slot="xxxxxxxxxx"
                data-ad-format="fluid"
                data-full-width-responsive="false"></ins>';
  
  // 3. 挿入と実行
  a[0].parentNode.insertBefore(o,a[0]);
  setTimeout(()=>{try{(window.adsbygoogle=window.adsbygoogle||[]).push({})}catch(e){}},80);

  // 4. スマホ時の記事内広告のタグ設定を修正（端切れ防止）
  if (window.innerWidth <= 767) {
    t.querySelectorAll(".post-body ins.adsbygoogle").forEach(e=>{
      if(!e.classList.contains("toc-ad")){
        e.setAttribute("data-ad-format", "fluid"); 
        e.setAttribute("data-full-width-responsive", "false");
      }
    });
  }
}}}(window,document);
/*]]>*/
</script>
※注／このコードではスマホで見た時の記事内の他の広告にもサイズ指定しています
スマホで広告を見ると画面一杯、全画面広告か！？って場合が多々なのでサイズ指定してて圧迫感を減らしています
※これすると広告の表示回数が減る可能性があります
スマホのみ指定、パソコンの広告サイズは指定していません
※h2上のみパソコンもサイズ指定しています


広告のサイズ気にしない！！って方は↓↓↓のコード使ってください

広告のサイズ指定を削除しています

<!-- 最初のH2上 AdSense挿入スクリプト -->
<script type='text/javascript'>
/*<![CDATA[*/
!function(e,t){const n=t.querySelector(".post-body");if(n){const a=n.querySelectorAll("h2, h3, h4");if(!(a.length<2)){
  // 1. 広告が入るスペース（枠）を事前に確保して高速化（CLS対策）
  const s=t.createElement("style");
  s.innerHTML=`
    /* PC用：一般的な横長バナー（728x90）の枠を確保 */
    .toc-ad-wrapper { margin: 100px 0; text-align: center; min-height: 90px; }
    
    /* スマホ用：画面幅いっぱいに広がる広告用の枠を確保 */
    @media screen and (max-width: 767px) {
      .toc-ad-wrapper { margin: 24px 0; text-align: center; min-height: 120px; }
    }
  `;
  t.head.appendChild(s);

  // 2. 広告タグの作成（Googleお任せのレスポンシブ横長形式）
  const o=t.createElement("div");
  o.className="toc-ad-wrapper";
  o.innerHTML='<ins class="adsbygoogle"
  　　　　　　　　　data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
           　　　　 data-ad-slot="xxxxxxxxxx"
                　　data-ad-format="horizontal"
                  　data-full-width-responsive="false"></ins>';
  
  // 3. 最初のH2の直前に挿入して実行
  a[0].parentNode.insertBefore(o,a[0]);
  setTimeout(()=>{try{(window.adsbygoogle=window.adsbygoogle||[]).push({})}catch(e){}},80);
}}}(window,document);
/*]]>*/
</script>

これもh2上は横長指定、画面いっぱいに広げないようにしています

横長じゃなくてもいい、画面いっぱいに広がってもいいって方は

data-ad-format="horizontal"
ata-full-width-responsive="false"

ここを"horizontal"→"auto >"、"false"→"true"にしてください 


adDiv.innerHTML = `
  <ins class="adsbygoogle toc-ad"
       style="display:block"
       data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
       data-ad-slot="xxxxxxxxxx"
       data-ad-format="horizontal"
       data-full-width-responsive="false"></ins>
  `;

ここを忘れずに自分の奴に変えてくださいね


Blogger F-lightでAdsense自動貼付け | Trekking from Kochi

Blogger F-lightでAdsense自動貼付け | Trekking from Kochi

Adsense自動で貼付けするようにしました

ファビコンkochimountaingo.blogspot.com
他の場所に自動で貼り付ける方法


ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

BloggerのテーマをZEROからF-liteへ変更、カスタマイズの記事もここにまとめてます

ファビコンkochimountaingo.blogspot.com

他カスタマイズ等は↑にまとめてます


Gemini

２日前くらいかな、、、つい最近Geminiを使い始めたんですよ

と言っても、Google検索の代りに質問してみた程度

で、今回初めてコードを作って貰ったんですがChatGptより賢くない？

コードじゃなく普通の質問の答え見てもChatGptより、、、

たまたまかな？


※追記

コード作る時はGemini、ChatGpt、両方使ってお互いの答えを添削させあってる(笑)

これでブログの高速化はGemini、ChatGpt共にこれ以上はやらなくていいって所までできた

どっちがいいかと聞かれたら、、、どっちもどっちで良い悪いの判断は難しいね

Geminiが間違い言ってChatGptが正解だったり、その逆もある

まぁAIが使い方によっては便利なのは間違いない気がする


公式オンラインショップ
スポンサーリンク

デル株式会社 EARLY SUMMERセール開催中