Blogger Labo:Bloggerテンプレートの仕様をざっくりと説明します

前回の「Bloggerテンプレートの構成をざっくりと説明します」に続き、今回はテンプレートの仕様についてざっくりと説明したいと思います。ここで扱うのは、ソースの自動補正などの「仕様について」と「仕様の活用方法」です。

なお、Bloggerは先月の半ばから新UIに移行していくつかの仕様変更がなされましたので、気づいたことがあれば随時追加していきたいと思っています。


仕様について


ソースの自動補正


自分の場合、テンプレートのソースコードはBloggerのルールに則ってローカル(オフライン)で編集し、それをアップロードすることで自サイトに適用するという方法を取っています。そこで、アップロード後にソースコードの自動補正が掛かることに気づいたので「どのようにコードが補正されるのか?」を以下にまとめておきます。

1.システム上必要なコードが追加される


マスターとなるソースコードには必要最低限の設定しか記述していませんでしたが、アップロード後にソースを確認してみると<b:widget id='Navbar1'…>などのコードが追加されていました。

その他にも記述した覚えのないコードが多数追加されていたので、Blogger用のxmlファイルをアップロードすると、サーバー側でそれが認識され、足りない部分を自動で補正する機能が働いているようです。

2.ウィジェットに設定が追加される


テンプレートを自作した際、どのウィジェットにも<b:widget-settings>は基本的に設定していませんでしたが、アップロード後のソースにはこれが自動的に設定されていました。どうやらこれも自動補完されるようです。

3.コメントアウトが削除される


テンプレートを自作した際、各includableタグに説明をコメントアウトしておいたのですが、アップロード後のソースにはそれが無くなっていました。こういった独自タグに関するコメントは不要と見なされて削除されるみたいです。

4.コードの位置が適切な箇所に変更される


アップロード後に一部のコードの挿入位置が変わっていました。この辺もBloggerの仕様に合わせて変更されるようです。

5.バージョンに沿ったコードに変更される


Bloggerの各ウィジェットにはバージョンが設定してあり、そのオプションはバージョンによって内容が異なるようで、一部のコードが変更または追加されていることがありました(旧UIでのことですが)。

既存設定の引継ぎ


Bloggerでテンプレートを変更する際に、管理画面の「元に戻す」からテンプレート用のxmlファイルをアップロードして新テンプレートを適用すると、サイドバーなどに設定したガジェットの情報が新テンプレートにも引き継がれます。

その際に、同じセクションに設定されたガジェットは同じ位置のままですが、元々設定されていたセクションが無くなってしまった場合は、上部のセクションにまとめて移動されてしまうようです(ソースのセクション名あるいはidやクラス名で判定?)。ですので、この方法で新テンプレートの適用した後には、手動でガジェットの位置を設定し直す必要があります。

一方で、「HTMLの編集」に新テンプレートのソースコードを貼り付けると、既存のガジェットは削除され、新テンプレートのソースコードに設定されたガジェットのみが設定されます。

仕様の活用方法


既存の設定を残してテンプレートを変更する


既存のガジェットの設定を残したまま新テンプレートを適用させるには、管理画面の「元に戻す」から新テンプレートのxmlファイルをアップロードしてブログに適用させます。

その後、管理画面の「レイアウト」からガジェットを配置を設定し直すことで、以前の設定を引き継いだまま新しいテンプレートを使うことができます。

この時にテンプレートをバックアップしておくことをおすすめします。今後はバックアップしたテンプレートをマスターとして使うことで、何か不具合があった時に変更したガジェットの位置情報を保持したまま復元できるようになります。

既存のガジェットを一掃する


既存のガジェットを一掃して新テンプレートを適用するには、管理画面の「HTMLの編集」から現在のテンプレートのソースコードを表示させ、そこに新テンプレートのxmlファイルのソースコードをコピペして上書きします。そうすると、既存のガジェットは消え去り、新テンプレートで設定されたガジェットのみが適用されます。

この理由は、レイアウトで設定した既存のガジェットも、テンプレートの上ではガジェットを構成するコードとして認識されているからであり、「HTMLの編集」からソースコードを上書きすることで既存のガジェットを構成するソースコードが消えてしまうからです。ですが、ブログタイトルや記事なんかはサーバーのデータベースに保存されている情報なので消えてしまうことはありません。

なお、この方法を使うと、今まで設定したラベルリストやピックアップ記事なんかが消えてしまうので注意が必要です(旧テンプレートのバックアップがあれば、それを使って復元することは可能)。

トラブルシューティング


新テンプレートを適用するとデザインが崩れた


旧UIにおいて、稀にこうした現象が起こることがありましたが、この原因としては以下のことが考えられます。

・そもそも新テンプレートの設定がおかしい
・xmlのアップロードからテンプレートを上書きした際に、引き継いだ情報が原因となっている

前者が原因の場合は置いといて、後者が原因の場合はHTMLガジェットなんかに追加した<style>タグやJavaScriptなんかが原因でデザインが崩れてしまっていると考えられます。ですので、上記の「既存のガジェットを一掃する」の方法で新テンプレートを適用すると直せることがあります。

新テンプレートに追加したBlogger用のタグが反映されない


新テンプレートをカスタマイズする際に、そのテンプレートのバージョンによっては記述するタグが変わってきたりします。例えば、記事の要約を表示するタグは、バージョン1の場合は<data:post.snippet/>ですが、バージョン2では<data:post.snippets.short/>としなければ反映されません。

また、if文などの条件も新しいバージョンでは文法が違いますので、Bloggerのルールに則った記述だとしても上手くいかないことがあります。こうしたバージョンによる文法については、公式リファレンスでもアナウンスされていないので、有志による情報をウェブ上から探し出して正しい文法で記述する必要があります(全く迷惑な話です^^;)。