Google Blogger Advent Calendar 2019 の 10 日目の記事です。
Blogger には、標準でおしゃれなテーマがいくつか付属しています。また、検索エンジンで少し調べてみれば、有志が作成した素晴らしいテーマを簡単に見つけることができます。しかし、こうは思ったことはありませんか？「自分だけのテーマを作ってみたい」と。
この記事では、Blogger のテーマを作成するためのチュートリアルと TIPS をお届けします。
前置き
HTML や CSS などの基本的な Web 技術が多少分かることを前提としています。また、SEO を目的としたテーマ作成について扱うわけではありません。
まずはじめに
Blogger のテーマってどこで作るの？
Blogger を開き、「テーマ」を開きます。「HTML を編集」のボタンをクリックすると、エディタが開きます。あとは自分の HTML を書いていくだけです。(このエディタは結構使いにくいので、手元で書いたものを貼り付ける方が良いかもしれません。テキストエディタは VSCode や Atom, Sublime Text などが有名です)
Blogger のテンプレートを記述する XML って何？
Blogger のテーマは HTML とは少し形式の異なる、XML という言語で記述します。大まかな違いとしては、HTML は多少誤った記述をしても寛大に解釈されます (例えば、閉じタグを忘れても自動的に閉じてくれます)。一方で、XML は文法に則った記述をしないと、エラーとなってしまいます。具体的な違いとしては、まず XML では閉じタグを省略できません。<img>などの閉じタグが不要なタグでも、必ず記述しなければなりません。
閉じタグを忘れるとエラーになる
ng -- <h1><h2>Heading</h1>
閉じタグを省略できない
ok -- <img src='https://example.com/foo.png'></img>
ok -- <img src='https://example.com/foo.png'/>
ng -- <img src='https://example.com/foo.png'>また、ファイルの先頭に決められた形式の記述をしなければなりません。Blogger の場合は次のようになります。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:responsive='true' lang='ja' 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'>
<!-- Your cool things here -->テーマの構成
Blogger のテーマには、決められた構成が存在します。これは皆さんが Blogger 管理画面の「レイアウト」で見慣れているものとほぼ同じです。Blogger のテーマで使用されるレイアウトのパーツには、b:section, b:widget, b:includable (b:include) があります。
Blogger のレイアウト構成は次のようになっています。
b:section
レイアウトの最上位に配置されます。日本語の管理画面では「セクション」と表示されていますね。セクションにはウィジェットだけを含むことができます。
id属性は必須です。他の ID と重複しない一意な文字列を指定します。
<b:section id='foo'>
<!-- widgets -->
</b:section>b:widget
セクションの中に配置されます。管理画面では「ウィジェット」と表示されています。皆さんが Blogger をカスタマイズするときには、最も良く扱う部分ではないでしょうか。ウィジェットの特徴としては、 Blogger によって用意されているものだけを使用できるという点が挙げられます。また、ウィジェット内には後述する b:includableのみを配置できます。
idとtype属性は必須です。type属性には BlogArchive, Blog, Header, LinkList, NavBar, BlogProfile などを指定できます。これらは管理画面から追加できるウィジェットと同じです。また、id属性は Type + 連番の形式にする必要があります。
<b:section id='foo'>
<b:widget id='Blog1' type='Blog'>
<-- includables -->
</b:widget>
<b:widget id='LinkList1' type='LinkList'>
<-- includables -->
</b:widget>
</b:section>b:includable
ウィジェットの中で使用されるパーツです。includable という名前が表すように、他の場所で再利用可能です。セクションやウィジェットと異なり、この中では自由に要素を追加できます。
id属性は必須です。また、各ウィジェット内には必ずmainを ID とした includable が必要です。main以外を指定した includable は、b:includeで明示的に指定しない限り、表示されません。
<b:section id='foo'>
<b:widget id='Blog1' type='Blog'>
<b:includable id='main'>
<p>やっと他の要素を書き込める！</p>
</b:includable>
<b:includable id='another-includable'>
<p>まだ表示されない</p>
</b:includable>
</b:widget>
</b:section>b:include
includable を再利用します。name属性を使用して include するものを指定します。
<b:section id='foo'>
<b:widget id='Blog1' type='Blog'>
<b:includable id='main'>
<p>やっと他の要素を書き込める！</p>
<b:include name='another-includable'></b:includable>
</b:includable>
<b:includable id='another-includable'>
<p>main の中に表示された！</p>
</b:includable>
</b:widget>
</b:section>データタグ / 制御タグ
ここまでは、Blogger のレイアウトを構成するタグを説明しました。実際にブログとして機能させるには、ブログのデータを埋め込んでいく必要があります。そこで使用するのがウィジェットタグです。ウィジェットタグは大まかに分類してデータタグと制御タグに分けることができます。
データタグは、ブログのデータを表現します。例えば、<data:blog.title/>というタグは、ブログのタイトルに置き換えられます。使用可能なデータタグはヘルプページに説明がありますが、いくつか補足があります。「グローバルに利用可能なデータ」は、テーマ内の任意の場所で使用可能です。セクションの外であっても、例えば<title>タグなどに使用できます。一方で、それ以外のデータタグは特定のウィジェット内でしか使用できません。例えば「ブログの投稿」で説明されているデータタグは、<b:widget id='Blog1' type='Blog'><b:widget>内でのみ使用できます。
制御タグを用いて、ループ (繰り返し) や条件分岐を記述できます。大抵の場合、ブログのトップページに表示する記事の一覧はループを用いることになるでしょう。また、特定の条件でのみ表示させたいタグがあるとき、条件分岐を使います。これは、例えば Blogger 内での記事検索を実装するのに使えるでしょう。条件分岐には b:if, b:elseif, b:else タグを、ループには b:loop タグを使います。
<!-- </b:loop> までを、記事の数だけ繰り返す -->
<b:loop var='post' values='data:posts'>
<b:if cond='data:blog.pageType == "index"'>
<!-- トップページや検索結果画面などで表示される -->
<h2><data:post.title/></h2>
<!-- それ以外で表示される -->
<b:else/>
<h1><data:post.title/></h1>
<p><data:post.body/></p>
</b:if>
</b:loop>b:evalタグとexpr:属性 (Attribute) は特殊で難しい構文です。eval:属性は、HTML の属性にブログのデータを埋め込みたいときに使用します。例えば、ブログのホームページへのリンクは次のようなものになるでしょう。
<a expr:href="data:homepageUrl">ホームページ</a>b:evalタグも同様の役割を持ちますが、これは属性ではなくタグです。
制御タグとb:eval、expr:についてのヘルプページはこちらです。
TIPS
SNS などへの共有時にプレビューを表示する
SNS に記事を共有したときにプレビューを表示させるには、OGP (Open Graph Protocol, ogp.me) を使用します。
<html prefix='og: http://ogp.me/ns#'>
<head>
<meta property='og:title' content='記事のタイトル'>
<meta property='og:type' content='article (トップページなら website)'>
<meta property='og:site_name' content='サイト名'>
<meta property='og:url' content='記事の URL'>
<meta property='og:image' content='記事のサムネイル画像の URL>
<meta property='og:description' content='記事の概要'>
<meta property='og:locale' content='ja_JP'>読み込みを高速化する
Blogger のテーマは、そのまま書くと勝手に CSS や JavaScript を挿入されてしまいます。これらはレンダリングをブロックする要因になり、読み込みの低速化に繋がります。もしパフォーマンスにこだわりのある方は、次のような一手間を加えてみてください。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:responsive='true' lang='ja' 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 開始タグ-->
<!--<head>--><head>
<!-- ... -->
<!-- head 終了タグ -->
<!--</head>--></head>
<!-- body 開始タグ (変更する必要なし) -->
<body>
<!-- ... -->
<!-- body 終了タグ -->
<!--</body>--></body>
</html>ただし、これによって Blogger が用意している CSS が読み込まれなくなるため、公式のウィジェットは正常に機能しなくなる可能性があります。
凝りすぎない
自分のブログでしかテーマを使わないのであれば、汎用性にこだわりすぎる必要はありません。例えば、Blogger 公式テーマのように、ヘッダーやフッター、サイドバーなどのパーツに分けて、そこにウィジェットが挿入される可能性を考えて...などやっていると、軽く数日どころではなく日が暮れることになります。例えば Web に公開して誰でも使えるようなものにする、などの目的がないのであれば、「見た目が整えば OK!」という気持ちで挑むのがまずは良いと思います。これが辛いのは、後述するように公式情報が乏しいのも理由だったりするわけですけども...
例えば、このブログのテーマも1つの変更不可能な巨大ウィジェットだけで構成されています。
公式情報はあまり当てにならない...
Advent Calendar の前日の記事にも書かれていたように、テーマ作成について公式に出されている情報は非常に乏しいものになっています。英語のページですが、とてもわかり易く書かれたドキュメントが存在するため、困ったときはそちらも見てみると良いかもしれません (https://sites.google.com/site/templateofdoom/)。Google Developers にきちんとリファレンスを出してほしいな...
終わりに
参考に、これまでのことをまとめた最小のテンプレートを公開します。GitHub Gist
Blogger のテーマを作成するには、ループや条件分岐など、いくらか高度な概念を用いることになります。確かにやや難易度は高いですが、自作のテーマが完成した時は嬉しいですし、何より深い愛着が湧くものです。自分のブログを開くたびに少し嬉しくなるような、そんな素敵なテーマが完成することを祈っています。
次の記事は minato さんです。楽しい Blogger ライフを！
