Bloggerテーマをカスタマイズ - タイトルを追加しよう

HTMLには<title>要素というものがあります。
<title>要素で指定された文字はブラウザのタブ部分などに表示されるようになります。
多くの場合ここに投稿のタイトルを表示されると思います。

テーマを編集して<title>要素に投稿のタイトルを入れ込む方法について解説します。

タイトルで使えそうなデータタグ

データタグを使えばブログ名や投稿毎のタイトルを利用する事が出来ます。

data.blog.pageTitle ・・・　標準のタイトル形式「ブログ名: 投稿タイトル」
data.blog.pageName ・・・　投稿タイトル
data.blog.title ・・・　ブログ名
data.view.title.escaped ・・・　標準のタイトル形式からブログ名を非表示

方法１．標準のタイトル形式を使う

Bloggerがデフォルトで用意しているタイトル形式です。
トップページなどでは「ブログ名」のみが表示され、
投稿ページなどでは「ブログ名: 投稿タイトル」という書式で表示されます。

<head>要素の中に以下のように定義します。

<head>
  <title><data:blog.pageTitle/></title>
   :
   :
</head>

方法２．ブログ名を表示させない形式を使う

Bloggerが用意している最新のテーマなどで使われている形式です。
トップページなどでは「ブログ名」が表示され、
投稿ページなどでは「投稿タイトル」のみが表示されます。

<head>要素の中に以下のように定義します。

<head>
  <title><data:view.title.escaped/></title>
   :
   :
</head>

方法３．投稿タイトルの後にブログ名を表示する

いくつかのサイトを見てみると「投稿タイトル - ブログ名」という形式が多い事に気付きます。
検索エンジンなどで表示される場合、投稿タイトルが先頭にあった方が分かりやすいですし、ブログ名も表示はしたいという場合は以下のように定義します。

<head>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
  <b:else/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
  </b:if>
   :
   :
</head>

データタグ「data:blog.pageType」を使って条件分けをし、投稿や固定ページの場合には「投稿タイトル - ブログ名」という書式になるよう制御しています。

「Bloggerテーマの基礎知識 - ページの種類を判断しよう」を参照

コメント

登録: コメントの投稿 (Atom)