🐥

Bloggerで独自のテンプレートを作る

2022/05/01に公開

Bloggerの独自テンプレートは壁が高い

Bloggerには、公式、非公式に素晴らしいテンプレートが用意されており、テーマやレイアウトを変更することで、多彩なブログ画面を生成できます。これらを軽微にカスタマイズすることは簡単ですが、大きなカスタマイズや、独自テンプレートの作成は、情報の少なさから苦戦することが多いようです。

この記事では、独自のテンプレートへの第一歩として、ミニマムなテンプレートの内容を説明します。

ミニマムなテンプレートの定義

Blogger のテンプレートは、xhtml で定義します。そして、エラーの発生しないテンプレートは、わずか 11 行です。

<?xml version="1.0" encoding="UTF-8"?>
<html b:css='false' b:js='true' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='' b:templateVersion='1.0.0' 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' showaddelement='yes' />
    </body>
</html>

ここにある、Blogger 独自の要素は 3 つですが、この記事では、<html>タグの独自属性にフォーカスします。

<html>タグの独自属性
<b:skin>タグ
<b:section>タグ

<b:skin>と<b:section>は、後続の記事で説明しますので、ここでは決まりごと程度に見てください。

<html>タグの独自属性について

html タグの独自属性は、Blogger テンプレートの基本動作を設定します。少し数が多いですが、1 つずつ見ていきます。

<html 
    b:css='false'
    b:js='true'
    b:defaultwidgetversion='2'
    b:layoutsVersion='3'
    b:responsive='true'
    b:templateUrl=''
    b:templateVersion='1.0.0'
    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'>

b:css

Blogger が提供する css ファイルの読み込みを行うかを設定します。

値	意味
true	読み込む(省略した場合のdefault値)
false	読み込まない

b:js

Blogger が提供する js ファイルの読み込みを行うかを設定します。

値	意味
true	読み込む(省略した場合のdefault値)
false	読み込まない(レイアウト画面でガジェットを配置できなくなります)

b:layoutsVersion

レイアウトバージョンとは、Blogger のテンプレートで使える機能を表します。 2022 年 4 月時点では、2 と 3 を選択できますが、古いバージョンを選択する理由はありませんので、今後は 3 を選択することになります。また、レイアウトバージョンは、次に説明するウィジェットバージョンに、影響を与えます。

値	意味
2	旧バージョン
3	現バージョン(2022年4月時点)

b:defaultwidgetversion

Blogger が提供するウィジェット(ブログパーツ)のバージョンを指定します。2022 年 4 月 30 日時点で、ウィジェットバージョンには 1 と 2 を設定できますが、レイアウトバージョンを 3 とした場合は、ウィジェットバージョンは 2 以外を設定できません。

値	意味
1	レイアウトバージョンが2の場合
2	レイアウトバージョンが3の場合

b:responsive

このテンプレートがレスポンシブか否かを表すメタ情報です。この属性を設定しても、Blogger の動作は変わりませんが、テンプレートの中からこの属性値を参照して利用できます。

値	意味
true	レスポンシブ
false	非レスポンシブ

b:templateUrl

テンプレートの提供元の URL 情報のメタ情報です。この属性を設定しても、Blogger の動作は変わりませんが、テンプレートの中からこの属性値を参照して利用できます。

値	意味
URL	テンプレート作成者のURL

b:templateVersion

テンプレートのバージョン情報のメタ情報です。この属性を設定しても、Blogger の動作は変わりませんが、テンプレートの中からこの属性値を参照して利用できます。

値	意味
VERSION	テンプレートのバージョン

expr:lang

Blogger の情報を利用して、lang 属性を動的に設定します。

expr:dir

Blogger の情報を利用して、dir 属性を動的に設定します。