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の空テンプレートを作成する（バグ取りの日々）
・Bloggerテンプレートの自作（imaokilog）

出力結果（ブログ画面）


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属性は文字を読み進める方向を表すもの

【参考】

・テーマをカスタマイズ - 空のテーマから始めよう（Ararami Studio Blogger）