Bloggerテンプレート自作 #1:最低限の状態を作る

前回の「テストブログの準備と開発環境の構築」に引き続き、今回は「最低限の状態を作る」から始めようと思う。

テンプレートを自作する際、すでにできあがった既存のテンプレートを改変していく方が楽のように思われるかもしれないが、実際は空の状態から作り始めるほうがかなり楽。これはWordPressで自作テーマ制作のときに学んだことだ。

というわけで、この記事では最低限の状態を作るための「作業工程」「関連知識」をまとめておくことにする。


作業工程


最低限の状態を表示させるソースを書く


最低限の状態を表示するために、自分は以下のようなソースを書くことにした。

<?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>

  <!-- CSS -->
  <b:skin><![CDATA[
 
  ]]></b:skin>

</head>

<body>

  <!-- ページタイトル -->
  <h1><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1>

  <!-- コンテンツ -->
  <b:section id='メイン'>
    <b:widget type='Blog' id='Blog1' mobile='yes'>
      <b:includable id='main'>
        <h2>新着記事</h2>
        <b:loop var='post' values='data:posts'>
          <h3><a expr:href='data:post.url'><data:post.title/></a></h3>
          <div>
            <data:post.body/>
          </div>
        </b:loop>
      </b:includable>
    </b:widget>
  </b:section>

</body>

</html>


出力結果(ブログ画面)


Bloggerテンプレート自作 #1:最低限の状態を作る

とりあえず、ブラウザの表示とレイアウトはこのようになった。

関連知識


テンプレートの初期化方法


とりあえず、上記のような初期状態のソースコードを作り、以下の方法を使って初期化する。

・「テーマ」 → 「バックアップ/復元」 → 「テンプレートファイルのアップロード」
 → 初期化前のガジェット情報を引き継ぐ
・「テーマ」 → 「HTMLの編集」 → 「Bloggerエディタに直接ソースコードを貼り付けて保存」
 → ソースコードの記述どおりの状態になる

<html>タグの内容


真偽値の指定


・「b:css='真偽値'」:BloggerのデフォルトCSSを読み込むかどうか(省略時true)
 → true:属性が入っている場合、または「b:css」が記述されていない場合 に読み込む
 → false:読み込まない
・「b:js='真偽値'」:デフォルトのJSを読み込むかどうか(省略時true)
 → true:読み込む(ウィジェットを使用するのに必要)
 → false:読み込まない(ウィジェットが使えなくなる代わりに読み込みが早くなる)
・「b:responsive='true'」:レスポンシブ設定?(よくわからない)

バージョンの指定


・「b:defaultwidgetversion='2'」:ウェジェットのバージョン
・「b:layoutsVersion='3'」:レイアウトのバージョン
 → Version='3' だと、デフォルトのモバイルバージョンは使えなくなる(要らないけど)
・「b:templateVersion='1.3.0'」:テンプレートのバージョン
・「b:version='2'」テーマのバージョン
 → クラシックテーマはb:version='1'

XHTMLの宣言


・「xmlns='http://www.w3.org/1999/xhtml'」:XHTML1.0の宣言
・「xmlns:b='http://www.google.com/2005/gml/b'」:XHTMLの名前空間宣言(b)
 → Blogger独自の b: が他と競合しないようにする
・「xmlns:data='http://www.google.com/2005/gml/data'」:XHTMLの名前空間宣言(b)
 → Blogger独自の b:data が他と競合しないようにする
・「xmlns:expr='http://www.google.com/2005/gml/expr'」:XHTMLの名前空間宣言(expr)
 → Blogger独自の b:expr が他と競合しないようにする

変数っぽいやつ


・「expr:lang='data:blog.locale'」:Bloggerの設定情報から取得した値を lang='ja' のように置き換える?
 → lang属性はそのページの言語の指定(ブラウザの翻訳機能などに影響する)
・「expr:dir='data:blog.languageDirection'」: Bloggerの設定情報から取得した値を dir='ltr' のように置き換える?
 → dir属性は文字を読み進める方向を表すもの