「Bloggerをがっつりとカスタマイズしていくぜッ」と思っても、どのようなテンプレートコードを書けば、自分の思い通りのカスタマイズができるか理解している人は少ないのではないでしょうか？
そこで今回は、ボクが自作テンプレートを作る上で、「このテンプレートタグは便利だったな」というものを全部まとめて紹介していきます。
ぜひ、Blogerのカスタマイズの際の参考にして下さい。
<head>内で使うテンプレートタグ
どのテンプレートにも書かれているheadタグ
<b:include data=’blog’ name=’all-head-content’/>
この1文を書くだけで、<head>内に様々な情報を読み込ませることができます。
例えば、主な情報として以下の３つが挙げられます。
- 重複コンテンツを回避する「rel=’canonical’」
- 文字化けを防ぐ「charset=’UTF-8’」
- metaの読み込み
<
p>早い話が、「上のタグを書くだけで、それなりにＳＥＯ的に良いテンプレートが作れるよ」と言う『魔法のタグ』と言うわけですね。
このタグはどのテンプレートにも書かれていますが、基本的に触らなくてＯＫです。
タイトルタグ
<data:blog.pageName/>
記事ページやカテゴリーページで、タイトルを表示してくれるタグ。
<
p>しかし、ＴＯＰページのタイトルは表示できない、と言うデメリットがあります。
<data:blog.title/>
逆にこちらは、ブログのタイトルを表示してくれるタグ。
例えば、「サッカー講座」と言うブログ名だったら、タイトルが「サッカー講座」になります。
<
p>しかし、このタグを使うと、記事ページだろうがカテゴリーだろうが、ブログタイトルしか表示されません。
ですが、上の２つのタイトルタグの欠点は、ifタグを使うことで解消されます。
例えば、下のコードの様にタイトルタグを変えてあげると、ＳＥＯに強い設定にできます。
<b:if cond=’data:blog.pageType == "index" ‘>
<!–TOPページのタイトル–>
<title>
<data:blog.title/>
</title>
<b:else/>
<!–記事ページのタイトル–>
<title>
<data:blog.pageName/>|<data:blog.title/>
</title>
</b:if> ## header部分で良く使うタグ
ブログタイトル
<data:title/>
ブログタイトルを表示させたい場合は、上のコードの様に記述します。
ブログの説明
<data:description/>
そして、ブログの説明を表示したい場合は、このコードを記述すれば良いです。
<
p>では、<data:title/>と<data:description/>にはどのような文字が挿入されるかと言うと、管理画面の左サイドバーから「設定」→「基本」をクリックした時に出てくる画面の「タイトル」と「説明」の記述が、先ほどのタグに挿入されます。
この場合だと、<data:title/>の部分に「Vaster DEMOブログ」が、<data:description/>の部分に「ただのサンプルです」が表示されます。
コンテンツ、サイドバー部分で使うタグ
記事タイトル
<data:post.title/>
記事タイトルを表すタグ。
TOPやカテゴリーページでの記事一覧や記事ページで、よく見かけるタグです。
h1やh2タグに挟まれて使われることが多いです。
ラベル名（カテゴリー名）
<data:label.name/>
これは、記事のラベル名を表示するためのタグ。
このタグ単体で使われる事はあまりなく、以下の様にコードを書く場合が多いです。
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url'> <data:label.name/> </a> </b:loop>
<
p>上のコードに出てくる「loop」とは、大雑把に説明すると「valuesで指定した『’data:post.labels’（ラベル名）』を読み取るよ」と言う感じのタグです。
このloopタグがないと、<data:label.name/>のタグが、記事のラベルを読み取る事ができないため、エラーを起こします。
記事内容
<data:post.body/>
記事の編集画面で書いた記事内容を表示するためのタグ。
これがないと、コンテンツ部分が真っ白になります。
aタグ（リンク）
<a expr:href='data:blog.homepageUrl'>
TOPページのリンク。
<a expr:href='data:label.url'>
ラベル（カテゴリー）ページのリンク。
<a expr:href='data:post.url'>
記事ページのリンク。
サムネイル画像（アイキャッチ画像）の表示
サムネイル画像を表示させるためのタグは、以下の２つがあります。
<img expr:src='data:post.firstImageUrl'/>
<img expr:src='data:post.thumbnail'/>
しかし、この２つには違いがあります。
例えば、600×400のサイズの画像がサムネイル画像となる場合、前者のタグは600×400のサイズのままサムネイル画像として使用してくれますが、後者は80×80のサイズに直してサムネイル画像として使用します。
記事の公開日を表示するタグ
記事の公開日を表示させるタグも、以下の２つあります。
<data:post.dateHeader/>
<data:post.timestamp/>
しかし、この2つのタグは、公開日をどのような形式で表示するかが違ってきます。
具体的に言うと、Bloggerの管理画面に入って左サイドバーの「設定」→「言語の形式」をクリックすると、以下の様な画面が表示されますが、上のコードの前者が「日付ヘッダーフォーマット」、後者のコードが「時刻のフォーマット」で設定した表示方法で公開日が表示されます。
<
p>
一見、<data:post.dateHeader/>の方が公開日の表示方法が良さげですが、1日に2記事以上投稿すると、最初の1記事の公開日が上手く表示されない不具合があるので、1日に複数の記事を投稿する人は、<data:post.timestamp/>のタグを使った方が良いです。
