ねこせんしのメモ

<head>タグに記述するBlogger独自タグ

本稿で紹介するBlogger独自タグは、テーマの<head>タグ内に記述してください。
※随時更新中

METAデータの出力

文字コードやページ情報などのMETAタグやブログのフィード情報が出力されます。
必須度：推奨。SEO対策にもなるので、特に理由がなければテーマに追加しておくのがおすすめです。

<b:include data='blog' name='all-head-content'/>

CSSの記述

スタイルシートを記述するための独自タグです。ちなみにスタイルシートはこのタグの外で記述しても問題なく適用されます。
必須度：必須。このタグを含まないテーマはエラーが発生し、動作しない。

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

使用例

<b:skin><![CDATA[
/* この中にCSSを書きます */
]]></b:skin>

<title> タグを出力する方法

以下のようなコードをテーマに設定してみました。
<title>～から始まる一行に注目してください。実際にブログを表示すると、どうなるでしょうか。

<html>
  <head>
    <title><data:blog.title/>　★　<data:blog.pageTitle/>　★　<data:blog.pageName/></title>
    <b:skin></b:skin>
  </head>
  <body>
    <b:section id='a'></b:section>
  </body>
</html>

【結果１】ブログトップページを開いたとき

タイトルの出力は次のようになりました。
※「ブログタイトル」は、Bloggerの設定でブログタイトルにしている文字列です。

ブログタイトル　★　ブログタイトル　★

<data:blog.title/> と <data:blog.pageTitle/> はブログタイトルが出力されています。
<data:blog.pageName/> は、何も出力されませんでした。

【結果２】ブログトップページを開いたとき

タイトルの出力は次のようになりました。
※「記事タイトル」は、Bloggerの投稿のタイトルにしている文字列です。

ブログタイトル　★　ブログタイトル: 記事タイトル　★　記事タイトル

<data:blog.title/> は先ほど同様、ブログタイトルが出力されています。
<data:blog.pageTitle/> は、ブログタイトルと記事タイトルの両方が出力されています。半角コロン「: 」で区切られています。
<data:blog.pageName/> は、記事タイトルのみが出力されています。

【結果３】固定ページを開いたとき

タイトルの出力は次のようになりました。
※「固定ページタイトル」は、Bloggerのページのタイトルにしている文字列です。

ブログタイトル　★　ブログタイトル: 固定ページタイトル　★　固定ページタイトル

<data:blog.title/> は先ほど同様、ブログタイトルが出力されています。
<data:blog.pageTitle/> は、ブログタイトルと固定ページタイトルの両方が出力されています。半角コロン「: 」で区切られています。
<data:blog.pageName/> は、固定ページタイトルのみが出力されています。

【結果４】ラベルページを開いたとき

タイトルの出力は次のようになりました。
※「ラベル名」は、Bloggerの投稿のラベルにしている文字列です。

ブログタイトル　★　ブログタイトル: ラベル名　★　ラベル名

<data:blog.title/> は先ほど同様、ブログタイトルが出力されています。
<data:blog.pageTitle/> は、ブログタイトルとラベル名の両方が出力されています。半角コロン「: 」で区切られています。
<data:blog.pageName/> は、ラベル名のみが出力されています。

まとめ

<title> タグで使える３つのBlogger独自タグについて、まとめです。

• <data:blog.title/>
  ブログ名を出力する
• <data:blog.pageTitle/>
  ブログ名とページ名を、区切り文字「: 」付きで出力する
• <data:blog.pageName/>
  ページ名を出力する

  ※ページ名は、投稿のタイトル、ページのタイトル、ラベル名などのこと。

実践

実際にテーマに組み込むサンプルです。

<html>
  <head>
    <!-- ブログトップページのタイトル -->
    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.pageTitle/></title>
    </b:if>
    <!-- エラーページのタイトル -->
    <b:if cond='data:blog.pageType == "error_page"'>
    <title>Not Found - <data:blog.title/></title>
    <b:else/>
    <!-- それ以外のページのタイトル -->
    <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
    <b:skin></b:skin>
  </head>
  <body>
    <b:section id='a'></b:section>
  </body>
</html>

このサンプルでは、Blogger独自タグのif文を使って次のパターンで条件分岐しています。

1. ブログトップページを表示している場合
   ブログ名とページ名を、区切り文字「: 」付きで出力する。
2. エラーページを表示している場合（※存在しないページにアクセスされた場合など）
   「Not Found - ブログタイトル」の形式で出力する。
   HINT： 「Not Found」は「ページが見つかりません」などに変えてもOK。
3. いずれでもないページを表示している場合
   「ページ名 - ブログタイトル」の形式で出力する。

好みの文言に替えて使用してみてください。
また、他のページではどのように表示されるか、ぜひ確認してみてください。

白紙の Blogger テーマ

テーマに登録したとき、エラーが発生しない最低限のコードです。
１字でも削除するとエラーが発生します。
※見やすさのためインデントを加えていますが、インデントは削除して問題ないです。

登録すると、白紙のページが表示されます。

<html>
  <head>
    <b:skin></b:skin>
  </head>
  <body>
    <b:section id='a'></b:section>
  </body>
</html>