【闇のCMS】GTM（Googleタグマネージャー）を活用して、HTML/CSS/JS制限のあるブログを力技でフッターを付ける

⚠️ はじめに（免責事項）

本記事は、技術的な好奇心および「どうしても仕様上の都合でこれしか手段がない」という極限状態における裏技（ハック）を紹介するものです。
やりすぎるとブログの規約違反に触れたり、表示速度の大幅な低下、最悪の場合は表示崩れを引き起こします。実践される際は、くれぐれも自己責任で（できればステージング環境で）お試しください。

😭 何があったのか

多くのブログサービス（特に無料プランや企業向けの閉じたCMS）では、セキュリティやスパム防止の観点から、HTML/CSSの自由な編集が制限されていたり、JavaScriptの挿入が禁止されていたりします。

「ここに独自の回遊ボタンを置きたいだけなのに…！」
「この記事だけデザインを少し変えたいのに…！」

そんな絶望的な状況を、アクセス解析用に導入されている GTM（Googleタグマネージャー）の『カスタムHTMLタグ』 を利用して、強引かつスマートに（悪く言えば力技で）突破したナレッジを共有します。

GTMを単なる「アクセス解析ツール」としてではなく、「超軽量なフロントエンド配信基盤（闇のCMS）」として活用してみた記録です。

🛠️ 基本戦略：GTMによるDOMハック

GTMは本来コンバージョンタグなどを埋め込むためのツールですが、その本質は「任意のタイミング（トリガー）で、任意のJavaScriptを実行できるシステム」です。

これを利用し、ブログ側が生成したHTML（DOM）が読み込まれた後に、JavaScriptで無理やり要素を書き換えます。

今回はユースケースとして、「記事本文のすぐ直後に、特定のカテゴリに連動した『おすすめ記事カード』を動的挿入する」というカスタマイズを実装します。

👨‍💻 実装コード

custom.js

<div id="custom-gtm-footer" style="background-color: #ffb6c1; color: #4a3b32; text-align: center; padding: 30px 10px; font-size: 14px; font-family: sans-serif; line-height: 1.8;">
  
  <div style="margin-bottom: 15px;">
    <a href="[https://kazukichi0914.hatenablog.com/entry/1987/09/14/220000](https://kazukichi0914.hatenablog.com/entry/1987/09/14/220000)" style="color: #4a3b32; text-decoration: none; margin: 0 10px; font-weight: bold;">プライバシーポリシー</a> | 
    <a href="[https://linkbio.co/kazukichi0914](https://linkbio.co/kazukichi0914)" style="color: #4a3b32; text-decoration: none; margin: 0 10px; font-weight: bold;">運営者情報</a> | 
    <a href="[https://docs.google.com/forms/d/e/1FAIpQLSdK0s7OBIYWV3nv6wcFHJml1ySmSf3hxhwb-epouTPo9vx-wg/viewform?usp=header](https://docs.google.com/forms/d/e/1FAIpQLSdK0s7OBIYWV3nv6wcFHJml1ySmSf3hxhwb-epouTPo9vx-wg/viewform?usp=header)" style="color: #4a3b32; text-decoration: none; margin: 0 10px; font-weight: bold;">お問い合わせ</a>
  </div>
  
  <div style="font-size: 12px;">© 2026 かずきち。の日記 All Rights Reserved.</div>
</div>

<script>
  (function() {
    var hatenaFooter = document.getElementById('footer');
    var myFooter = document.getElementById('custom-gtm-footer');
    
    if (hatenaFooter && myFooter) {
      hatenaFooter.parentNode.insertBefore(myFooter, hatenaFooter.nextSibling);
    }
  })();
</script>

GTMの管理画面で「カスタムHTMLタグ」を作成し、以下のJavaScript（素のVanilla JS）を記述します。ブログ側に負荷をかけないよう、極力シンプルに記述するのがコツです。