【Bloggerテーマ】<title> タグを出力する方法～ブログ名、投稿タイトル、ページタイトル、ラベル名のBlogger独自タグ【#002】

2022-09-13

【Bloggerテーマ】<title> タグを出力する方法～ブログ名、投稿タイトル、ページタイトル、ラベル名のBlogger独自タグ【#002】

9月 13, 2022 Blogger Bloggerテーマテーマカスタマイズ特殊タグ独自タグ

<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文を使って次のパターンで条件分岐しています。

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

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

ねこせんしのメモ

2022-09-13