BloggerブログのテーマのHTML編集／テンプレートのソースコードの基本構造と使用可能な独自タグについて

結城永人 -2019年4月2日 (火)

Bloggerは無料のブログサービスとして何よりもサーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じるけれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。サイト作成のコーディングを覚えるのに役立つ情報源

HTML：HTML: HyperText Markup Language、HTML5（目的別）など

CSS：CSS: カスケーディングスタイルシート、CSS3（目的別）など

JavaScript：JavaScript、JavaScriptなど

Blogger：レイアウト用ページ要素タグについて／レイアウト用のウィジェットタグ、Les balises Blogger [introduction]など

一般的にサイト作成はHTMLとCSSという構成とデザインのマークアップ言語とその他にJavaScriptなどのデータを扱うプログラミング言語で成り立っている。Bloggerの独自タグは他のサイト作成ではあり得ないほどに性能が充実していて普通にブログサービスが利用者のためにマークアップを簡略化するだけのものではなく、一つのプログラミング言語としてまるで小さなJavaScriptと呼べるくらい色んなことができるようになっているのが凄いんだ。独自タグでコンテンツのマークアップだけではなくて簡単なプログラミングもできてしまうBloggerのサイト作成は正しく面白い。ところが覚えるまでが反対に大変というか、Bloggerの独自タグはブログのメインの記事の作成には使えなくて関係ないけれどもテーマ／テンプレートのカスタマイズにおいて初心者にはサイト作成に必要な知識が増える分だけ難しいといわざるを得ないので、取りかかって混乱しないようにBloggerブログならではのHTML編集／ソースコードの基本構造を明らかにして予め知っておくと良いと思う。

BloggerのHTML編集／ソースコードの基本構造の見本
HTMLのhead内にのみ記載される独自タグ
HTMLのbody内にのみ記載される独自タグ
HTMLのhead内とbody内の両方に記載される独自タグ

A white pendant lamp by Pierre Châtel-Innocenti on Unsplash

BloggerのHTML編集／ソースコードの基本構造の見本<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html> <head> HTMLのhead内の通常の領域 <b:skin>（独自タグ／CSSとVariableタグとGroupタグのみ含む） <![CDATA[ CSSのstyle内の通常の領域 <Variable/>（独自タグ） <Group>（独自タグ／Variableタグのみ含む） <Variable/>（独自タグ） </Group> CSSのstyle内の通常の領域テーマデザイナーの「CSSを追加」の領域 ]]></b:skin> <b:template-skin>（独自タグ／CSSとb:variableタグのみ含む） <![CDATA[ CSSのstyle内の通常の領域 <b:variable/>（独自タグ） CSSのstyle内の通常の領域 ]]> </b:template-skin> HTMLのhead内の通常の領域 <b:defaultmarkups>（独自タグ／defaultmarkupタグのみ含む） <b:defaultmarkup>（独自タグ／includableタグのみ含む） <b:includable>（独自タグ） HTMLのbody内の通常の領域 </b:includable> </b:defaultmarkup> </b:defaultmarkups> HTMLのhead内の通常の領域 </head> <body> HTMLのbody内の通常の領域 <b:section>（独自タグ／widgetタグのみ含む） <b:widget>（独自タグ／widget-settingsとincludableタグのみ含む） <b:widget-settings>（独自タグ／widget-settingのみ含む） <b:widget-setting> レイアウトの「ウィジェット編集」の領域 </b:widget-setting> </b:widget-settings> <b:includable>（独自タグ） HTMLのbody内の通常の領域 </includable> </b:section> HTMLのbody内の通常の領域 <b:template-script/>（独自タグ） </body> </html>※head内の通常の領域に使用可能なstyleタグを記載するときはtype属性の「text/css」を追加しないとエラーになる。scriptタグはそのままでもエラーにならず、記載することができる。
※必須ではないdefaultmarkupsなどの一部の独自タグは使われない場合もある。そして見本に取り上げた独自タグが全てではなくて他にも数多く使われ得る。HTMLのhead内にのみ記載される独自タグ

b:skin／スキン

ブログではstyleタグの<style type="text/css" id='page-skin-1'></style>のHTMLに置き換えられる。CSSは<![CDATA[（マークアップ）]]>によって出力される。必須の独自タグで、ブログに一回しか使えない。

Variable／ヴァリアブル

skinタグのマークアップのCSSの値の変数（$）を定義する。テーマデザイナーで変更できる文字のサイズや色などに対応している。さらに定義された値はskinタグの外側でも<data:skin.vars.name/>（nameはVariableタグの項目の一つで、半角ピリオドがあれば半角アンダースコアに変えたもの）で呼び出すこともできる。

Group／グループ

複数のVariableタグを一つに纏める。テーマデザイナーで変更できるブログの全体や部分の区分けに対応している。そしてVariableタグの項目を表示して操作できるようにする。

b:template-skin／テンプレートスキン

ブログではstyleタグの<style type="text/css" id='template-skin-1'></style>のHTMLに置き換えられる。CSSは<![CDATA[（マークアップ）]]>によって出力される。skinタグと性能は殆ど同じだけれども必須ではなくて何回でも使えるのが全く違う。

b:variable／ヴァリアブル

template-skinタグのマークアップのCSSの値の変数（$）を定義する。Variableタグと性能は同じだけど、ただし纏めるGroupタグに相当するものがないので、テーマデザイナーで表示されてCSSのデザインの項目を操作できるようにはならない。

b:defaultmarkups／デフォルトマークアップス

defaultmarkupタグのマークアップを配置可能にして機能させる。

b:defaultmarkup／デフォルトマークアップ

includableタグのマークアップをブログのウィジェットを表示するHTMLのbody内のwidget内へ送り込む。一旦、テーマ／テンプレートを保存するとブログ全体のCommonのtype以外は所定のwidget内に必要なincludableタグのマークアップが実際に追加されるので、同様に変更したいブログのウィジェットが多いほどにカスタマイズの手間を省く。

HTMLのbody内にのみ記載される独自タグ

b:section／セクション

ブログのレイアウトのヘッダーやページの本文やサイドバーやフッターなどのウィジェットを含んだ仕切りを作り出す。

Bloggerで使える投稿や検索やメールなどのブログのウィジェットを個々に表示する。

widget-settingタグのプログラミングを配置可能にして機能させる。

レイアウトから変更できるブログのウィジェットの様々な項目を設定する。

HTMLのhead内とbody内の両方に記載される独自タグ

b:includable／インクルーダブル

ブログのマークアップやブログラミングを示す。idを持っていてnameを持っているincludeタグと一緒に動作する。前者の内容が後者でテーマ／テンプレートに記載されてブログにwidgetタグを通じて表示される。使うかぎり、includableタグはウィジェット毎に記載された全てを表示するかどうかを決定するmainのidを少なくとも一つは持たなくてはならない。

HTMLのhead内に記載される場合はdefaultmarkupsタグとdefaultmarkupタグで囲まなくてはエラーになってしまう。
HTMLのbody内に記載される場合はsectionタグとwidgetタグで囲まなくてはエラーになってしまう。

b:include／インクルード

付けられたnameと同名のidを持つincludableタグが示すマークアップやプログラミングを実行する。ブログにコンテンツを表示するための最終的な役割を担った独自タグといって良い。

HTMLのhead内でもbody内でもincludableタグに囲まれて記載される場合が大半を占める。
例外としてブログのメタ情報の<b:include data='blog' name='all-head-content'/>のようにサーバー側の内容を呼び込みながらincludable外で動作する場合もないわけではない。

data／データ

Bloggerのサーバーに保存されているブログ自体のデータ：記事、著者名、日付、等々を出力する。

b:if／イフ

ブログのページの種類やデータの状況によってマークアップやブログラミングを振り分けるために使う。

b:elseif／エルスイフ

if内で使われてifの他の振り分けの条件を与える。

b:else／エルス

if内で使われてifの振り分けの反対の条件を与える。

b:switch／スイッチ

ブログのページの種類やデータの状況をcaseタグで個別に捉えながらマークアップやブログラミングを相応に振り分けるために使う。

b:case／ケース

switch内で振り分けの個別の条件を付ける。

b:default／デフォルト

switch内でcaseタグと共に使われて最後に全てのcaseタグに該当しない条件を付ける。

b:loop／ループ

一定の条件から同様のマークアップやプログラミングを繰り返すために使う。

b:with／ウィズ

変数を作って内側のプログラミングに限定して活用できる。

b:eval／イヴァル（イヴァリュエイション）

条件に応じてデータを出力する。dataタグと結果は同じだけれども目的が違う。evalタグはifタグやswitchタグとdataタグを組み合わせて使うのと等しく、条件式の演算を組み込める。

b:comment／コメント

HTMLのコメントアウトのを記載する。

b:class／クラス

直前のHTMLの何等かのタグにclass属性と値を追加する。

b:attr／アトル（アトリビュート）

直前のHTMLの何等かのタグに特定の属性と値を追加する。

b:tag／タグ

HTMLの何等かのタグを記載する。

b:message／メッセージ

マークアップやプログラミングにBloggerの既成のメッセージを記載する。

b:param／パラム（パラメータ）

message内で使われて記載する項目を詳しく追加する。

レイアウトヴァージョン３／htmlタグの「b:layoutsVersion='3'」の公式テーマのContempoとSohoとEmporioとNotableで有用な独自タグ

b:template-script／テンプレートスクリプト

ブログのテーマ／テンプレートを表示するためのBloggerがホストするjsファイルを取り込むscriptタグが生成される。

レイアウトヴァージョン２／htmlタグの「b:version='2'」の公式テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行まででサポート終了の独自タグ

macro／マクロ

レイアウトの段組に特化した独自タグの接頭辞、通常の「b」の代替として例えばmacro:includableやmacro:includeのように記載されて同様に機能する。

b:section-contents／セクションコンテンツ

レイアウトの段組に特化した独自タグの一つ、widgetタグを含んでブログのサイドバーなどに、順次、ウィジェットを配置するために使う。

Bloggerの独自タグは専ら接頭辞の「b」から始まる。これはhtmlタグの「xmlns:b='http://www.google.com/2005/gml/b'」で示されるxmlの名前空間の「b」から来ていると思う。なぜ「b」なのかはたぶんBloggerの頭文字の「B」を取って小文字にしているせいかも知れない。逆にいうと接頭辞の「b」がないBloggerの独自タグはhead内のskin内のVariableとGroupとbody内でも大丈夫なdataの三つと代替の接頭辞のmacroの一つ（レイアウトヴァージョン３以降は使わない）だけだから覚えるのは想像されるよりも大変ではない。残りはコード毎に接頭辞の「b」があるかないかでBloggerの独自タグかサイト作成の汎用タグ――最も紛らわしいのは他のタグで括られずにどこにでも素のままに記載されるHTMLだ――かを識別できるからブログのカスタマイズで混乱しなくなる。