🐥

Bloggerの最小テンプレートを作る

に公開
Blogger
tech

まず結論

Blogger のテーマを一から作るときは、最初から完成形を目指さず、保存できる最小構成から始めます。次の例は骨格を確認するための出発点です。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css="false"
      b:defaultwidgetversion="2"
      b:layoutsVersion="3"
      b:responsive="true"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:b="http://www.google.com/2005/gml/b"
      xmlns:data="http://www.google.com/2005/gml/data"
      xmlns:expr="http://www.google.com/2005/gml/expr">
  <head>
    <b:include data="blog" name="all-head-content"/>
    <title><data:view.title.escaped/></title>
    <b:skin><![CDATA[/* CSS */]]></b:skin>
  </head>
  <body>
    <b:section id="main" showaddelement="yes"/>
  </body>
</html>

Blogger 側の実装は変わり得ます。適用前に既存テーマをバックアップし、プレビュー用ブログで保存と表示を確認してください。

使う場面

公式テーマの HTML を直接削りながら構造を調べると、必須要素とテーマ固有の要素を区別しにくくなります。最小構成は、次の用途に向いています。

  • 独自テーマの土台を作る
  • b:section や b:widget の挙動を小さく検証する
  • 保存エラーの原因を切り分ける

構文と設定項目

要素 役割
名前空間 b:、data:、expr: をXMLとして扱う
<b:skin> BloggerがテーマのCSSとして扱う領域
<b:section> ウィジェットを配置する領域
all-head-content 公式テーマで使われているhead要素の組み込み

all-head-content や HTML 要素上の b:* 属性は、公式ヘルプですべてが仕様化されているわけではありません。現在の公式テーマで使われている実装として扱い、依存箇所を増やしすぎないのが安全です。

実装例

最小構成を保存できたら、機能を少しずつ加えます。

  1. b:section に HTML ウィジェットを追加する
  2. <b:skin> にレイアウト用 CSS を追加する
  3. 投稿一覧や個別記事の表示を追加する
  4. 各段階で保存とプレビューを確認する

変更単位を小さくしておくと、Blogger の保存時検証で弾かれた箇所を特定しやすくなります。

つまずきやすい点

本番ブログへ直接適用する

テーマ変更は表示全体に影響します。Blogger の「テーマ」画面からバックアップを取得し、別ブログで検証してから反映します。

XMLとして閉じていない

HTML では省略できる閉じタグも、テーマの XML ではエラーになることがあります。属性値も引用符で囲みます。

非公開の実装を固定仕様とみなす

公式テーマから読み取れる要素は便利ですが、将来も同じとは限りません。公式ヘルプに記載されたページ要素を中心に組み立てます。

関連する機能

まとめ

独自テーマは、保存できる小さな骨格から育てると調査しやすくなります。公式ヘルプにある要素と、公式テーマから観察した実装を分けて扱うことが、保守しやすさにつながります。

Discussion