テンプレートタグでカスタマイズ
Posted at: 2005-07-06
11
前々回の記事「日本語の Blogger Help 発見！」で「Blogger の独自タグ」と呼んでいたのは、正確には「テンプレートタグ（Blogger's Template Tags）」といいます。この間は内容に全くふれられなかったので、今日はこのテンプレートタグを見ていくことにします。
Blogger テンプレートの HTML の中には <$BlogPageTitle$> や <$BlogDateHeaderDate$> など、普段ウェブページを作るときには見ないタグが並んでいると思います。これらをテンプレートタグといいます。
この２つのタグの場合は、それぞれ「ブログタイトルを書き出す」「投稿の日時を書き出す」という役割を持っています。
例えばこのブログなら、<$BlogPageTitle$> の位置に「クリボウの Blogger Tips」という文字が書き出されます。
同様に、各ブログのタイトルやプロフィール、各投稿の日時や内容などなど様々なデータが、ページ構成時にテンプレートタグを通して書き出されていきます。
Blogger Help（日本語版）に
Blogger はウェブの更新を手軽なものにします。更新するために、最低限、あなたがすることは Post (投稿記事)を書いて "Publish" をクリックするだけです。あなたが Blogger に Post を投稿した時、その内容は私たちのデータベースに保存されます。そしてそれが Blogger tag によって挿入される内容となります。Blogger tag はデータベースからデータを取得して Blog を Publish するプログラムに挿入場所を教えます。"ここにタイトルを表示、Post はその下、そして日付と時刻はこことあそこ" という具合です。それはとても丁寧に。
とあるのはそういうことです。
前述のような単にデータを書き出すタグ（$ のついたもの）は「アイテムレベルタグ」と呼ばれますが、それとは別にページのデザインや構成を担当するのが「ページレベルタグ」と呼ばれるタグです（$ のついていないもの）。ページレベルタグを使うと、メインページに表示するパーツ、記事単独ページに表示するパーツなどをＨＴＭＬで書き分けて、ページの種類ごとに表示するコンテンツを変える、といったカスタマイズも可能になります。
テンプレートタグの役割と、それぞれのタグの意味を知れば、Blogger のカスタマイズの幅が大きく広がることと思います。最後にテンプレートタグを詳しく紹介しているサイトを、挙げておきますのでご覧下さい。
- Blogger Help（日本語版） > Template Tags
- Blogger Unofficial FAQ blog（日本語版） > Templates
- OpenCage > Blogger Template Tags
ここで紹介するのは、ページ本体の位置を下げて Blogger Navbar との距離をとる方法。
なぜこんなことをしようと思ったかといえば、ページ本体の最上部5,6ピクセルぐらいが、Blogger Navbar の下に入り込んで見えないから。これは最初に選択したテンプレートにもよると思うので、重なりが気にならないという人は読み飛ばしてください。
結論から言うと改行コードで下げることになるだけれど、単純に改行コードを入れればすむ、という問題でもないのです。
実際にやってみるとわかりますが、本文とサイドバーの下地がヘッダーから上へはみ出してしまうのです。その高さちょうど30ピクセル、これはこれまで Navbar の下に隠れていたものです。このようなことが起きるのは、再構築時に自動的に書き込まれるスタイルシートが原因です。このコードは再構築時につけられてしまうので、テンプレートの操作によってそれを除くことはできません。
ではどうすればいいのか。
それならそうで、該当するスタイルについてこちらが先に書いてしまおう、というのが今回のポイントです。
■１．スタイルシートに書き込む
管理画面「テンプレート」から
<head> 内スタイル指定部分の
#wrap {
...
}
に...
}
#wrap {
padding-top: 0px !important;
...
}
と赤字の部分を挿入します。padding-top: 0px !important;
...
}
■２．改行タグを入れる
同じく管理画面「テンプレート」で
<body> のすぐ後に <br /> を好きな数だけ書き込みます。<body>
<br /><br /><br />
<div id="wrap"> ...
<br /><br /><br />
<div id="wrap"> ...
以上２つの作業でページが Navbar から離れる…ようになるはず。
こんなつたない説明でみなさん理解出来ますでしょうか？
最初の記事で、Blogger Help は日本語化されていない、と書きました。
けれども、私的に日本語化しているサイトがあったんですね。
それが stoned soul さんの Blogger Help 。
まだ作成中とのことなんですが、すでに膨大な数のページが訳されています。また訳自体もわかりやすくて、抜群におススメ！
こんなサイトを見逃していたなんて、勉強不足でした…。
ちなみに同じ方が、Blogger Unofficial FAQ blog の訳 もしてくれています。このページでは、Blogger の独自タグについての記述が、特に役に立つと思います。
