BloggerのHTML構造とJavaScriptの挿入方法【初心者向け解説】-P-LIFE.NET

Bloggerでカスタマイズをしようとすると、「テンプレートのHTML構造ってどうなってるの？」「JavaScriptはどこに入れればいいの？」という疑問にぶつかることがあります。

この記事では、BloggerのHTML構造の全体像と、JavaScriptの適切な挿入方法を初心者にもわかりやすく解説します。

1. Bloggerの基本HTML構造とは？

Bloggerでは、通常のHTMLに加えて「Blogger専用タグ（b:○○）」が使われます。以下は、可能な限りシンプルにした構造のイメージです。

<!DOCTYPE html>
<html b:version='2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'>
<head>
  <title><data:blog.pageTitle/></title>

  <b:skin><![CDATA[
    /* ここにテンプレート全体用のCSSを書く */
  ]]></b:skin>

  <link rel="stylesheet" href="外部CSSのURL" />
  <b:include data='blog' name='all-head-content'/>
</head>

<body>
  <header>
    <b:section id='header' class='header'/>
  </header>

  <nav>
    <b:section id='main-menu' class='menu'/>
  </nav>

  <main>
    <b:section id='main' class='main'>
      <b:widget id='Blog1' type='Blog'/>
    </b:section>
  </main>

  <aside>
    <b:section id='sidebar-right' class='sidebar'/>
  </aside>

  <footer>
    <b:section id='footer' class='footer'/>
  </footer>

  <b:include data='blog' name='all-body-end'/>
</body>
</html>

よく使われるタグ解説

タグ	役割
`<html>`	HTML文書全体を囲うタグ
`<head>`	ページの情報（タイトル、CSS、JavaScriptなど）をまとめる場所。画面には表示されません
`<body>`	ブラウザに表示されるメインの内容を入れる場所
`<header>`	ロゴやナビメニューなど、ページ上部によくあるパーツ
`<main>`	メインコンテンツ（記事本文など）を入れる部分
`<footer>`	ページ下部の著作権情報やリンクなどを置く場所
`<b:section>`	ウィジェットを配置できるエリア。ヘッダー・サイドバーなどに使う。
`<b:widget>`	記事やプロフィールなど、具体的な機能ブロック。
`<b:skin>`	テンプレートに埋め込むCSS。全体に適用される。
`<b:include>`	Blogger側が必要なコード（スクリプトなど）を自動で挿入する場所。

2. JavaScriptの挿入場所まとめ

Bloggerでは、JavaScriptの挿入場所を間違えると正常に動作しないことがあります。以下に目的別でまとめました。

2-1. 全ページ共通で使いたい場合

最適な挿入場所：</body> タグの直前

<b:include data='blog' name='all-body-end'/>
<script>
  console.log("全ページに適用されました");
</script>

2-2. 特定ページだけに入れたい場合

※Bloggerは投稿内の <script> タグを削除してしまうことがあるので、外部JSの利用をおすすめします。

<script src="https://example.com/script.js"></script>

2-3. 条件付きで読み込みたいとき

以下のように、記事ページだけで実行されるJavaScriptを書くことも可能です：

<b:if cond='data:blog.pageType == "item"'>
  <script>
    console.log("これは個別記事ページです");
  </script>
</b:if>

2-4. <head> 内に挿入したいとき（例：Google Analytics）

<head>
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-XXXXXX-X');
  </script>
</head>

3. 注意点まとめ

投稿本文に <script> を書くと消えることがある → 外部ファイルで回避
<b:if> や <b:include> を使えば柔軟な条件指定が可能
テンプレートの編集前はバックアップを取ろう！

おわりに

Bloggerの構造は少し独特ですが、慣れればとても自由にカスタマイズできます。JavaScriptの挿入も正しく使えば、ブログをもっと便利に・楽しくできます。この記事を参考に、ぜひ自分だけのブログを作ってください！

BloggerのHTML構造とJavaScriptの挿入方法【初心者向け解説】