Bloggerテーマをカスタマイズ - 空のテーマから始めよう

Bloggerのテーマを自分好みにカスタマイズしたいと思う人は多いでしょう。
しかしカスタマイズするにはある程度知識が必要です。
まずは全くの空の状態のテーマを作って少しづづテーマの仕組みを理解していこうと思います。

最小構成のテーマ

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
      b:templateVersion='1.3.0'
      b:layoutsVersion='3'
      b:defaultwidgetversion='2'
      b:css='false'
      expr:lang='data:blog.locale'
      expr:dir='data:blog.languageDirection'
      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:skin><![CDATA[]]></b:skin>
  </head>
  <body>
    <b:section id='main'/>
  </body>
</html>

BloggerテーマはXHTML形式

Bloggerのテーマは「XHTML形式」で記述していきます。
XMLの書式に沿った記述が必要になるので以下の点に注意が必要です。

要素名・属性名は小文字
要素は必ず閉じる（<HR>ではなく<hr />）
属性値は引用符で囲む

xmlns属性による名前空間宣言

<html>要素にはxmlns属性を使って名前空間が宣言されています。
以下の３つは Blogger の機能を実装する為に必要な名前空間です。

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'

テーマのバージョン情報

Blogger はテーマ → テンプレート → レイアウト → ウェジェットという階層構造で構成されいて、それぞれにバージョンを持っています。
これらのバージョン情報を<html>要素の属性で定義しておきます。
それぞれの最新バージョンは以下の通りです。

テンプレート　・・・　b:templateVersion='1.3.0'
レイアウト　　・・・　b:layoutsVersion='3'
ウェジェット　・・・　b:defaultwidgetversion='2'

デフォルトのCSSのリンクはしない

何も指定しないとデフォルトのCSSを読み込むコードが埋め込まれます。
デフォルトのCSSを読み込まないようにするには<html>要素の属性で以下を定義します。

b:css='false'

lang 属性と dir 属性

lang属性はそのページがどのような言語で書かれているかを表すもので、dir属性は文字を読み進める方向を表すものです。
これらの値は blogger の設定情報から取得して埋め込む事が出来ます。

expr:lang='data:blog.locale'　　　　　　 → lang='ja' のように置き換わる
expr:dir='data:blog.languageDirection'　→ dir='ltr' のように置き換わる

<b:skin>要素を追加

<head>要素の中に必ず１つ<b:skin>要素が必要です。
無いとエラーが出て保存できません。

<b:section>要素を追加

<body>要素の中に必ず１つ<b:section>要素が必要です。
また<b:section>要素には必ず id属性を指定します。
無いとエラーが出て保存できません。

出来上がるページ

この状態でページを確認してみるとタイトルの本文もない真っ白なページが出来上がります。このままではブログとしての意味をなさないテーマですが、ここに様々な要素を追加していくことで自分だけのテーマを作り上げていくことが出来るはずです。

Ararami Studio