2014年4月16日水曜日

Google Bloggerのテンプレートを自作する

Google Bloggerでは、様々なデザインのテンプレートが予め用意されていますが、自分独自のデザインを使いたいって思ったことないでしょうか。本記事では、僕が試行錯誤しながらテンプレートを作成する過程で学んだことをまとめます。

テンプレートとは

簡単にいうと雛形。ページによって異なる文章などの内容は空白にしておき、全てのページに共通なものだけを記述したもの。ページのレイアウトとかデザインとかブログのタイトル画像とかコピーライトとかを記述します。各ページの記事などは、システムがテンプレートの指定した部分に後で当てはめて使います。こうすることで、ページを作る度に、例えば、文章だけを書けば、いつも同じデザインやレイアウトを自動で施して表示されて、便利になります。

HTML(XML)を使う

Google Bloggerでテンプレートを作成するには、HTML(本当はXML)を書けなければなりません。テンプレートはHTMLで記述します。ただ、デザインを凝りたいなら、CSSも知ってた方がいいし、動的なページを作りたいなら、JavaScriptを知ってた方がいいと思います。最低限必要なものは、一応HTMLだけです。

テンプレートを作成する前に

現在使っているテンプレートは、必ずパックアップをとりましょう。もし、テンプレートを自作して、ブログが大変なことになっちゃっても、当方は責任終えませんので、編集は自己責任でお願いします。

バックアップをとるには、以下のようにします。
  1. ブログの管理画面の左のサイドメニューの「テンプレート」をクリック
  2. 画面右上あたりにある「バックアップ/復元」をクリック
  3. ポップアップダイアログの「テンプレートをすべてダウンロード」をクリック

テンプレートの作成手順

テンプレートを作成するには、以下のようにします。
  1. ブログの管理画面の左のサイドメニューの「テンプレート」をクリック
  2. 「ブログで使用中」という項目の中の「HTMLの編集」ボタンをクリック
  3. HTML(正しくはXML)編集画面が表示されるので、ここにHTMLを書く
  4. 「テンプレートをプレビュー」をクリックし、ブラウザでどのように表示されるのか確認
  5. 編集が完了したら「テンプレートを保存」をクリックして保存する
  6. 自分のブログに行って、テンプレートが適用されているか確認する

最も簡単なテンプレート

Google Bloggerのテンプレートで最も単純な(最低限必要なタグのみを使った)ものは、以下のようなXMLになります。このテンプレートは、どのページに行っても何も表示されません。ページのどの部分に記事を挿入するか指定してないからです。

10 
11 
12 
13 
14 
15 
<?xml version="1.0" encoding="UTF-8" ?>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <b:skin></b:skin>
  </head>
  <body>
    <b:section id='mainSection'>
      <b:widget id="Blog1" type="Blog">
        <b:includable id="main">
        </b:includable>
      </b:widget>
    </b:section>
  </body>
</html>

ここで、普通のHTMLとは違ったタグ(skin, section, widget, includable)がいくつか混じっています。簡単に1つ1つ見ていきましょう。詳しく知りたい方は、次が詳しいので覗いてみるとよいでしょう。

https://support.google.com/blogger/answer/47270
http://aragger.blogspot.jp/2012/04/blogger.html

スキンタグ

<b:skin>

このタグの中にCSSを記述します。このタグは必ず書かなければなりません。

セクションタグ

<b:section>

1つのテンプレートには、必ず1つはセクションタグが必要です。この中で、ウィジェットを作成します。いくつでもウィジェットを作成してもかまいません。

ウィジェットタグ

<b:widget>

ウィジェットとは、「プロフィール」とか「人気の投稿」とか「ラベル一覧」とかのことです。ブログページのサイドにあったりするやつです。ちなみに、ブログの記事もウィジェットです。ウィジェットタグのtype属性を、例えば type='Blog' と指定すると投稿ウィジェットになります。このウィジェットタグ内では、投稿記事に関するデータ(例えば、記事のタイトルや本文など)を扱えます。扱えるデータは、ウィジェットによって違います。また、ウィジェットは、idがmainのインクルーダブルタグを1つ持ってなければなりません。

インクルーダブルタグ

<b:includable>

このタグは、関数を定義するようなものです。idがmainインクルーダブルタグというのは、main関数ということですね。実行時のエントリーポイントです。ウィジェットが読み込まれる際には、mainインクルーダブルが自動的に実行されます。つまり、main関数の内容が、HTMLとして置き換えられます。もちろん、ウィジェット内では、ユーザが自由にmain関数以外も定義することができます。定義した関数を呼び出す時には、インクルードタグを使います。

テンプレートに記事を挿入する

今のままのテンプレートでは、ページには何も表示されずに真っ白なので、少なくともタイトルと記事くらいは表示したいもんです。それには、テンプレートに、タイトルと挿入する場所と記事を挿入する場所を教えてあげる必要があります。そうすれば、誰かがブログのあるページにアクセスしたら、Bloggerのシステムは、テンプレートを読んで、記事を挿入する場所を探します。記事を挿入する場所が見つかったら、そのページのURLを見て、該当する記事を持ってきて、記事をそこに挿入します。なのでページによって挿入される記事が自動的に変わります。

記事が1つページもあれば、トップページのように複数の記事が一覧になっているページもあります。どのページでも同じテンプレートを使うわけですから、テンプレートで記事を挿入する場所を指定するときは、1つの記事にも複数の記事のページにも対応していなければなりません。そこでBloggerのテンプレートでは、記事が1つのページでも記事のリストを扱います。この場合は、要素(記事)が1つしかないリストになります。

以下の記述は、記事を挿入する部分のコードです。

<b:widget id='Blog1' type='Blog'>
  <b:includable id='main'>
    <b:loop values='data:posts' var='post'>
      <div><data:post.title/></div>
      <div><data:post.body/></div>
    </b:loop>
  </b:includable>
</b:widget>

1行目は、ウィジェットの定義です。ブログの記事を挿入するには、'Blog'ウィジェットを使います。widgetタグのtype属性に'Blog'を指定します。
<b:widget id='Blog1' type='Blog'>

3行目から6行目までは、ブログ記事のリストを挿入している部分です。

3行目のloopタグは、ブログの記事のリストをループ(繰り返し)しています。'data:posts'が記事のリストで、'post'が各記事です。
<b:loop values='data:posts' var='post'>
JavaScriptで書くなら
for( post in posts )
みたいな感じでしょうか。

4行目は、記事のタイトルを挿入しています。
<div><data:post.title/></div>
data:は、「ここにはデータを挿入しますよ」ってことで、そのデータは、「post.titleですよ」ってことです。上記のloopタグのところで定義した'post'という変数を使っています。'post'は、先ほど言ったように、ページの記事1つ1つのことで、'title'は、'post'が保持している'もの'で、記事のタイトルを表しています。

5行目は、記事の全文を挿入しています。
<div><data:post.body/></div>
記事の全文を指しているのが、'post.body'って記述です。先ほどは、'post'の'title'でしたが、今度は、'post'の'body'です。'post'は、他にもいろいろな'もの'(例えば、日付の情報とか)をもっているので、興味がある方は、先ほど挙げたページに行ってみるとよいでしょう。

ここまで作成したテンプレート

作成したテンプレートは、各ページの記事とタイトルを表示するだけの単純なものですが、これが基本となるものだと思います。あとは、これに他のウィジェットを追加したり、CSSを使ってデザインしたり、JavaScriptを使ってリッチなページにしたりするのがよいでしょう。

10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
<?xml version="1.0" encoding="UTF-8" ?>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title><data:blog.pageTitle/></title>
    <b:skin></b:skin>
  </head>
  <body>
    <b:section id='mainSection'>
      <b:widget id='Blog1' type='Blog'>
        <b:includable id='main'>
          <b:loop values='data:posts' var='post'>
            <div class="postTitle"><data:post.title/></div>
            <div class="postBody"><data:post.body/></div>
          </b:loop>
        </b:includable>
      </b:widget>
    </b:section>
  </body>
</html>

2 件のコメント:

  1. HTML編集するときに超役立ちました!
    この記事のおかけで自作テーマが完成しました。
    本当にありがとうございます。

    返信削除
  2. ひとつだけ疑問点があります。
    '5行目は、記事の全文を挿入しています。'
    これを使うとトップページにそれぞれの記事の全文が表示されてしまいます。
    「続きを読む」みたいな感じで記事の最初の5行だけを表示する。
    みたいなことってできますか?

    返信削除