スキップしてメイン コンテンツに移動

Blogger カスタムHTML 非公式日本語版ドキュメント

※本記事はBlogger公式ヘルプに基づく技術解説であり、
不正行為・改変・規約違反を助長するものではありません。

1. 対象範囲と前提

1.1 対象範囲

本ドキュメントは、Blogger 管理画面の 「テーマ → HTML を編集」 で扱う
XML テンプレートを対象とする。（2025年12月16日現在時点）

対象は以下に限定する。

  • レイアウト定義タグ（b:section / b:widget）

  • 再利用・制御タグ（b:includable / b:include / b:if 等）

  • データ参照タグ（data:）

  • CSS 定義（b:skin）

1.2 前提事項

  • Blogger テンプレートは HTML ではなく XML である

  • すべてのタグは正しく閉じる必要がある

  • 公式ヘルプに明記されていない挙動は将来変更される可能性がある

2. テンプレート全体構造

Blogger テンプレートは、概ね次の構造を取る。

<html>
  <head>
    <b:skin>...</b:skin>
  </head>
  <body>
    <b:section>
      <b:widget>...</b:widget>
    </b:section>
  </body>
</html>

3. レイアウト定義タグ（Page Elements）

3.1 <b:section>（セクション）

定義（公式仕様）
<b:section> は、ページ内のレイアウト領域（コンテナ）を定義するタグである。
管理画面の「レイアウト」に表示される各エリアと対応する。

仕様として確認できる属性

属性区分説明
id必須セクション識別子（テーマ内で一意）
class任意出力 HTML に付与されるクラス
maxwidgets任意配置可能なウィジェット数
showaddelement任意レイアウト画面での追加可否
growth任意配置方向（vertical / horizontal）

仕様上の制約

  • セクションの子要素として想定されているのは b:widget のみ

補足（実装上の注意）

  • HTML を直接記述すると表示される場合もあるが、公式に保証された用法ではない（非推奨）

3.2 <b:widget>（ウィジェット）

定義（公式仕様）
<b:widget> は、セクション内に配置されるページ要素（ガジェット）を定義するタグである。

仕様として確認できる属性

属性区分説明
id必須ウィジェット識別子
type必須ウィジェット種別（例: Blog, Header）
title任意管理画面表示用タイトル
locked任意移動・削除の制御
pageType任意表示対象ページ
mobile任意モバイル表示制御

実装例として確認されている属性（仕様明記なし）

  • visible

重要な整理（必須 vs 慣例）

  • 多くの公式・既存テーマでは id='main' の <b:includable> が定義されている

  • これは 実装上の慣例 であり、公式仕様として必須とは明記されていない

4. 再利用・制御タグ

4.1 <b:includable> / <b:include>

定義（公式仕様）
ウィジェット内部で使用される再利用可能なテンプレート部品を定義・呼び出すためのタグ。

属性

タグ属性区分説明
<b:includable>id必須部品名

var任意受け取るデータ名
<b:include>name必須呼び出す部品名

data任意渡すデータ

cond任意条件付き呼び出し

注意

  • id='main' の includable は広く使われているが、仕様上の必須条件ではない

4.2 <data:*>（データタグ）

定義（公式仕様）
Blogger が内部的に保持するデータをテンプレートに出力するためのタグ。

使用形式

  • <data:name/>

  • <data:object.property/>

重要事項

  • 参照可能なプロパティは ウィジェット種別および文脈によって異なる

  • 完全な一覧は公式ヘルプを参照する必要がある

例

<h1><data:blog.title/></h1>

4.3 制御構文タグ

タグ区分説明
b:if / b:elseif / b:else仕様条件分岐
b:loop仕様繰り返し処理
b:switch / b:case / b:default仕様多分岐処理

補足

  • <b:else> は閉じタグを持たない使用例が多い

5. CSS 定義（b:skin）

定義（公式仕様）
<b:skin> は、テンプレートデザイナー用の変数定義および CSS を記述するための領域である。

仕様上のポイント

  • <head> 内に記述する

  • CDATA セクション内に CSS と <Variable> 定義を記述する

例

<b:skin version='1.3.0'>
<![CDATA[
  <Variable name="bg-color" type="color" default="#ffffff"/>
  body { background: $(bg-color); }
]]>
</b:skin>

6. 仕様整理まとめ

区分内容
仕様（公式明記）section / widget / data / 制御タグ
慣例（実装標準）includable id='main'
非推奨section 内への直接 HTML 記述

7. 本ドキュメントについて

本ドキュメントは Blogger 公式ヘルプおよび確認可能な実装事実を基に整理した
非公式のメモである。

公式仕様の変更により、将来内容が変わる可能性がある点に留意すること。

8. 管理画面UI表記とテンプレートタグ対応表

本章では、Blogger の管理画面（日本語UI）で表示される用語と、
テーマ HTML（XML テンプレート）上で対応するタグ・属性の関係を整理する。

8.1 レイアウト画面（管理画面）とテンプレート構造

管理画面UI表記意味・役割対応するタグ / 要素備考
レイアウトページ構造の編集画面<b:section> / <b:widget>UI操作は XML 構造に反映される
セクションページ内の領域<b:section>header / sidebar / footer 等
ガジェット機能ブロック<b:widget>管理画面では「ガジェット」と表記
ガジェットを追加ウィジェット追加操作<b:widget> の生成showaddelement により制御

8.2 よく使われるガジェットと type 属性

管理画面での名称type 属性主な役割備考
ヘッダーHeaderブログタイトル表示多くのテーマで locked
ブログ投稿Blog投稿一覧・投稿ページ最も複雑なウィジェット
HTML / JavaScriptHTML任意の HTML/JSカスタム用途
プロフィールProfile投稿者情報チームブログ対応
ラベルLabelラベル一覧data:labels を使用
ブログ アーカイブBlogArchive月別・年別一覧階層表示可能
ページ一覧PageList固定ページ一覧ナビゲーション用途

8.3 管理画面設定とウィジェット属性の対応

管理画面項目対応する属性 / 要素区分補足
タイトルtitle 属性仕様レイアウト画面で表示
削除できないlocked="yes"仕様管理画面で固定
表示するページpageType仕様index / item / archive 等
モバイルで表示mobile仕様yes / no
表示/非表示visible実装例公式明記なし

8.4 テンプレートデザイナー（外観）と b:skin

管理画面UI表記テンプレート側内容
テーマをカスタマイズ<b:skin>CSS・変数定義
背景色<Variable type="color">色変数
フォント<Variable type="font">フォント変数
詳細設定CSS 本体変数を参照して反映

8.5 ページ種別（管理画面概念）と条件式

管理画面上の状態data:blog.pageType使用例
トップページindexトップ専用表示
個別投稿item投稿ページ制御
固定ページstatic_page固定ページ判定
アーカイブarchive月別・ラベル別
<b:if cond='data:blog.pageType == "item"'>
  <!-- 投稿ページのみ -->
</b:if>

9. ガジェット別 data: 参照可能プロパティ対応表

本章では、Blogger の主要ガジェット（ウィジェット）ごとに、
テンプレート内で参照可能な代表的 data: プロパティを整理する。

注意: ここに示すものは、公式ヘルプおよび公式テーマ・広く確認できる実装例で
実在が確認できた代表例であり、すべてのプロパティを網羅するものではない。
利用可能なプロパティはテーマや Blogger 側の仕様変更により増減する可能性がある。

9.1 Blog（ブログ投稿）ガジェット（type="Blog"）

プロパティ意味
data:posts投稿の配列
data:post.title投稿タイトル
data:post.body投稿本文（HTML）
data:post.url投稿 URL
data:post.timestamp投稿日時
data:post.author投稿者情報
data:post.labelsラベル配列
data:post.allowCommentsコメント可否
data:post.numCommentsコメント数
data:post.addCommentUrlコメント投稿 URL

9.2 Header（ヘッダー）ガジェット（type="Header"）

プロパティ意味
data:titleブログタイトル
data:descriptionブログ説明文

9.3 HTML / JavaScript ガジェット（type="HTML"）

プロパティ意味
data:titleガジェットタイトル
data:content管理画面で入力された HTML 内容

9.4 Profile（プロフィール）ガジェット（type="Profile"）

プロパティ意味
data:displayname表示名
data:aboutme自己紹介
data:location所在地
data:photo.urlプロフィール画像 URL
data:userUrlプロフィール URL

9.5 Labels（ラベル）ガジェット（type="Label"）

プロパティ意味
data:titleガジェットタイトル
data:labelsラベル配列
data:label.nameラベル名
data:label.urlラベル URL
data:label.countラベル投稿数

9.6 BlogArchive（ブログアーカイブ）ガジェット（type="BlogArchive"）

プロパティ意味
data:titleガジェットタイトル
data:dataアーカイブ項目配列
data:archive.name年・月表示名
data:archive.urlアーカイブ URL
data:archive.post-count投稿数

9.7 PageList（ページ一覧）ガジェット（type="PageList"）

プロパティ意味
data:titleガジェットタイトル
data:linksページリンク配列
data:link.titleページタイトル
data:link.urlページ URL

10. 資料出典・参考情報

本ドキュメントは、以下の 公式情報および確認可能な実装例 を基に整理している。

10.1 公式ヘルプ（Google Blogger）

10.2 公式・準公式テンプレート（仕様確認用）

※ 上記テーマの XML テンプレートは、管理画面「テーマ → HTML を編集」から直接確認可能。

10.3 実装例・技術資料（挙動確認・補助資料）

以下は公式仕様を補完するための 実装確認用資料 であり、仕様そのものを保証するものではない。

本資料は非公式であり、将来の Blogger 仕様変更により内容が変わる可能性がある。

以上


ラベル:
場所: 日本

このブログの人気の投稿

日本国内では「匿名VPS」は無理という話。

 はじめに  結論： 日本国内のVPSで「完全匿名VPS」は無理。 　ここでいう「匿名」は、少なくとも「事業者に個人情報が紐づかない」「法的手続きでも遡れない」というような強い匿名性のこととします。 この記事は一旦、日本国内で提供されるVPS（国内事業者）だけを前提とし、海外のサービスや海外色の強い日本サービスの話はしないこととします。 VPSというサービスの前提 　まず前提として、VPSはどこかに存在する物理サーバー上で動作する仮想マシンで、運営事業者は必ず存在し、サービスは必ずどこかの法制度の下で運用されます。そのため、VPSという仕組み自体が「誰からも完全に切り離された存在」になることはありません。 この点を踏まえたうえで、考えなければなりません。 「匿名VPS」というものは具体的にはどのようなものか 　一般に「匿名VPS」と言われる場合、匿名というものは以下のように分けられると考えます。 　・契約時に提供する個人情報が限定的であること 　・支払方法において、実名制が低い手段が用意されていること 　・通信経路上で、利用者の情報が第三者から見えにくいこと 　・運営事業者がどこまで利用者を識別管理しているか これらはそれぞれ性質の異なる話であり、「匿名」という一言でまとめてしまうのは、前提条件が曖昧になりやすいのでよろしくないと思っています。例えば、支払いに関する匿名性と、通信の匿名性は別の層の話ですし、運営側からどの程度利用者が見えているかという問題も、また別の文脈になります。 国内事業者と日本の法制度   　VPSというサービスの性質上、運営事業者はホストOSや物理インフラを管理しており、必要に応じて運用上の関与（障害対応・不正利用対応等）を行える立場にあります。さらに、日本国内で運営・提供されるサービスである以上、運営事業者は日本の法制度の下で事業を行い、各種法令・行政上の要請などに沿った運営をしています。事業者に悪意がある/ないとは別で、国内で事業を行い、収益をあげるためには避けて通れないところです。 　国内VPSは、日本の法制度で運営される以上、事業者にはサービス利用者を適切に管理・監督する責任があり、法令違反や不正利用等が発生した際には調査・利用停止等の措置を行い、関係機関からの照会や開示要請への対応を行います。つ...
続きを読む

VPN Gateサーバー運営者は通信内容を簡単に閲覧できる話。

 VPN Gateのサーバーを運営している人は、技術的には利用者の通信内容を閲覧できる立場にある。これは特定の個人や組織等を批判する話ではなく、VPNという仕組み、VPN Gateの目的に内在する構造的な問題である。  なぜVPNサーバー側で通信が見えてしまうのか だいたいここを読んでいる人ならわかっていると思いますが、VPNは通信を安全にする 「魔法のトンネル」ではない 。 実際の通信は次のようになっている。      ・利用者の端末       ・VPN Gateサーバー      ・ インターネット(通信相手サーバーのこと)   VPNサーバーは暗号化された通信を復号したうえで外部へ中継する役割を持つ。 そのためサーバー運営者は、技術的には以下の情報を取得・観測できる、      ・平文HTTP通信の内容      ・接続先のIPアドレスやドメイン      ・通信のタイミング・サイズ・頻度      ・SSL/TLS通信におけるSNIやメタデータ VPNサーバーは「暗号化を提供する存在」ではなく、「復号後の通信を扱う存在」であるという点である。   認証情報は見えてしまうのか  セキュリティが不十分な条件がそろえば 認証情報や認証情報に相当するデータが閲覧可能になる 可能性がある。VPN Gateの中継サーバーとして登録し、第三者が接続している最中に通信を観測すると、VPNの構造上、サーバー側では中継される通信を確認できる。 特に、通信がHTTP（暗号化されていない接続）の場合、送信されるリクエストやパラメータは平文で流れるため、      ・ログイン情報に相当するデータ      ・セッションの識別子      ・ 入力内容そのもの が通信上に含まれ、閲覧できてしまう可能性がある。 別にこれは特別な裏技を行ったり、不正な挙動をさせたりすることなく起こる。 VPNサーバーが通信の終端として動作する以上、理論...
続きを読む