Bloggerテンプレートの構成をざっくりと説明します

2020/10/17

Bloggerは、無料ブログの中では優れたカスタマイズ性を持ち、放置していても広告が入らないなどのメリットがある有用なサービスだと思いますが、いかんせん流行っていないようです。

その原因の一つとして、Bloggerの使い方やカスタマイズ方法を日本語で解説しているサイトが少ないからだと思います。そこで、テンプレートを作り上げた一人として、テンプレートの構成をざっくりとまとめて説明したいと思います。

テンプレートの基本構成

ベースとなるソースコード

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
b:templateVersion='1.3.0'
b:layoutsVersion='3'
b:defaultwidgetversion='2'
b:version='2'
b:css='true'
b:js='true'
b:responsive='true'
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>

<meta charset='UTF-8' />
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta name='description' expr:content='data:blog.metaDescription' />
<b:include data='blog' name='all-head-content'/>


<title>
<data:blog.title />
</title>


<b:skin><![CDATA[

]]></b:skin>

</head>

<body>

</body>

</html>

上記がベースとなるテンプレートのソースコードになります。コンテンツはまだ何もありませんが、ベースとなる上記のコードにコンテンツを構成する記述を追加していくことでテンプレートとして使えるようになります。

Bloggerのテンプレートは、XHTMLというあまり流行っていない形式で構成されているので、HTMLやCSSを理解しただけでは分かりづらいと思いますが、基本的には一緒のことです。

上記のコードは、XHTMLおよびHTML5を使っている宣言をし、<html>にBlogger独自の設定を使えるように設定を加え、あとは<head> <body>タグで主要な領域を構成しています。そして<head>タグに文字コードやビューポートをなんかを加えているだけです。

一般的のHTMLと異なるところは「Bloggerの独自タグを使っているところ」だと思います。XHTMLは独自タグを使えるようにできるので、<data:blog.title />などBlogger独自タグを使ってコンテンツを構成できるわけです。上記のコード内のBlogger独自の記述に関しては下記リンクの記事に詳しくまとめています。

セクション

<b:section class='クラス名' id='セクション名'>

</b:section>

Bloggerにおけるセクションとは、管理画面のレイアウトにおける各部位の領域のことです。大抵のテンプレートでは、ヘッダー、メイン、サイドバー、フッターといった感じで領域が区切られていると思います。

上記のセクションタグを使って領域を設定すると、管理画面で簡単にガジェットを追加できるようになるので、セクションはそういった用途で設定される項目になります。

ちなみに、上記のコードのようにセクションには何も設定しなくても特に問題はありません。何も設定しなくても管理画面には領域として表示されますし、そこに何かしらのガジェットを追加するとソースコード上では勝手にガジェットを構成するコードが追加されます。

また、<b:〇〇>といったタグはXTHML全般で使えるタグではなく、Bloggerでしか使うことが出来ません。この「b:」の部分はBloggerがシステム独自のタグ名として分かりやすくするためにつけたイニシャルだと思われます。

ウィジェット（ガジェット）

<b:widget オプション>
<b:includable id='main'>

</b:includable>
</b:widget>

ウィジェット（ガジェット）は、Bloggerにおけるコンテンツのことです。セクション内にウィジェットタグを設定することで、ブラウザでコンテンツを表示できるようになります。Bloggerでは基本的にはウィジェットタグ内にコンテンツを設定していくことになるので、特殊な設定をしない限りは必ず使うことになります。

ウィジェットタグは「必ず <b:includable id='main'>～</b:includable> とセットで使うこと」が決められており、上記のコードがウィジェットにおける最低限の構成になります。また、ウィジェットタグのオプション部分には「ブログ記事」や「HTMLガジェット」といった「ガジェットの種類を示すもの」および「それに対応した設定」を記述することになります。

上記のような設定を施した上で、<b:includable>タグ内にウィジェットのメインとなる処理を書き込んでいきます。この辺からBlogger独自のタグを多用することになるので、以下の記事から独自タグの意味を参照してみてください。

includableとinclude

<b:section class='クラス名' id='セクション名'>


<b:widget オプション>


<b:includable id='main' var='post'>

<b:include name='sub1' data='post'/>

<b:include name='sub2' data='post'/>
</b:includable>


<b:includable id='sub1' var='post'>

</b:includable>


<b:includable id='sub2' var='post'>

</b:includable>

</b:widget>

</b:section>

上記のコードは、とあるセクション内に、とあるウィジェットを設定し、そのウィジェット内にとある処理を設定した、という形のコードで、Bloggerにおけるセクション内の記述の基本形になります。

includable（インクルーダブル）とは、コンテンツの処理を記述するための領域のことです。この中に「HTMLタグ」や「Bloggerの独自タグ」を記述してコンテンツを構成することになります。このincludableは、プログラミング言語における「関数（function）」に当たる部分なので、そのようなイメージで使うと分かりやすいと思います。

include（インクルード）は、Bloggerのシステム設定や、他所で設定したincludableの処理を呼び出すためのタグで、基本的にはincludableタグ内で使うことになります。上記のコードがその一例です。このincludeは、プログラミング言語における「関数の呼び出し」に当たるものです。

上記のコードのように、includableは「メイン処理」あるいは「サブ処理」を構成する関数として使い、includeは「メイン関数にサブ処理を呼び出す」といった使い方が多くなると思います。もちろん、メイン処理の領域のみを用意し、その中に全ての処理を書いて使うことも可能ですが、可読性が落ちたり、メンテナンスがしにくくなったりします。

データベースに保存されたコンテンツの呼び出し

<b:loop values='data:posts' var='post'>
<b:include name='articles'/>
</b:loop>

Bloggerのデータベースに保存されている情報は、Bloggerにおいては単体で取り出すことはできません。そのため<b:loop>タグを使って繰り返し処理を行った上で呼び出す必要があります。

具体的には、ブログ記事・タグ（ラベル）・アーカイブなんかがデータベースに保存された情報になります。ですので、トップページの記事リストや記事のタグリストを作る場合は、<b:loop>タグが必要になります。

CSSの記述領域

<b:skin><![CDATA[

/* CSSのコード */

]]></b:skin>

BloggerテンプレートでCSSを使うには、上記のコードを<head>タグ内に設定することで反映させることができます。

JavaScriptの記述

BloggerテンプレートでJavaScriptを使うには、処理ごとに上記のコードを設定することで使うことが出来ます。基本的にはどの部分に設定しても反映されますが、</body>の上辺りにまとめておくのがオススメです。

ですが、処理によってはincludableタグ内にまとめて設定しなければならないこともあります。ブログなどで紹介されているJavaScriptコードを使用する際は、そのコードの使用方法に応じた設定をしてください。

なお、JavaScriptの記述は必須ではありません。なので、JavaScriptを全く使わず、CSSのみでサイトデザインや要素に動きを設定することもできます（そっちの方が読み込みが早いです）。

外部サービスの設定など

OGP設定

OGP設定とは、TwitterやFacebookといったSNSに記事のリンクを貼った際に、画像や説明を表示できるようにする設定のことです。この設定は<head>タグ内に設定します。詳しくは下記の記事を参照してみてください。

CDNの読み込み

CDNとは、外部からライブラリなどのまとまったプログラムを読み込んで自サイト内で使えるようにすることです。ポピュラーなものとして「font awesome」というWEBアイコンを使えるようにするものや、「jQuery」というJavaScriptを簡単に記述できるようにするものがあります。

このCDNは<head>タグ内に読み込みコードを書き込めばOKです。CDNのコードについては各サービスのサイトを参照してください。

WEBフォントの読み込み

WEBフォントとは、ブラウザで表示することができる特殊なフォントのことで「Google Fonts」なんかが有名です。これは<head>タグ内に<link>タグで設定する、あるいはCSSに@importで設定することができます。

Bloggerテンプレートの作り方を知りたい方へ

当サイトでは、ゼロからBloggerテンプレートを作り上げる軌跡を記した一連の記事を公開しています。下記リンクにてBloggerテンプレート制作の過程を番号順にまとめていますので、そちらを参照してください。

・Bloggerテンプレートの作り方

Blogger Labo