Bloggerのページタイトルをカスタマイズする方法

Google Blogger では、ブラウザの上部に表示されるページタイトルの設定項目はありません。

Conpempo などの Blogger の公式テーマではページタイトルは単純な仕様です。

投稿や固定ページでは設定したタイトルそのまま、他のページではブログ名となります。

これをカスタマイズしたいと思い、実際にできたやり方を解説します。

ページタイトルのカスタマイズ方法

1. HTML 編集画面にアクセス

Blogger の管理画面から「テーマ」→「カスタマイズ」の右の下向き矢印「▼」→「HTML を編集」の順にクリックしてブログテンプレートの HTML 編集画面にアクセスします。

するとテンプレートのHTMLの設定画面が表示されます。

HTMLの上の方に

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

のように<title>......</title>で囲まれる部分があります。

これがページタイトルの表示を設定する部分です。

2. titleタグを変更

ここからは間違えないように注意して下さい。

間違えるとテンプレートが壊れる恐れがあるのでバックアップを取ることをお勧めします。

次に<title>......</title>を消して、消した所に下のHTMLをコピーして貼り付けます。

<!-- タイトル設定 -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!--トップページ-->
  <title><data:blog.title/></title>
  <!--月別アーカイブ-->
    <b:elseif cond='data:view.archive.month'/>
  <title><data:view.archive.year/><data:view.archive.month/>月の記事|<data:blog.title/></title>
  <!--年別アーカイブ-->
  <b:elseif cond='data:view.archive.year'/>
  <title><data:view.archive.year/>年の記事|<data:blog.title/></title>
  <!--カテゴリーページ-->
  <b:elseif cond='data:blog.searchLabel'/>
  <title>カテゴリー「<data:view.search.label/>」の記事|<data:blog.title/></title>
  <!--キーワード検索結果-->
  <b:elseif cond='data:blog.searchQuery'/>
  <title><data:view.search.query/>」の検索結果|<data:blog.title/></title>
  <!--404エラーページ-->
  <b:elseif cond='data:blog.pageType == "error_page"'/>
  <title>ページが見つかりません|<data:blog.title/></title>
  <!--記事・固定ページ-->
  <b:elseif cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'/>
  <title><data:blog.pageName/><data:blog.title/></title>
  <!--記事一覧ページ-->
  <b:else/>
  <title><data:blog.title/></title>
</b:if>

どの部分がどのページの表示を設定するのか分かりやすくしました。

ページタイトルの文言を変更する場合は<title></title>の中身の部分のみを書き換えます。

Blogger特有のHTMLタグがあるので意味を説明しておきます。

  • <data:blog.title/>...ブログ名
  • <data:view.archive.year/>...ブログアーカイブの年(西暦)
  • <data:view.archive.month/>...ブログアーカイブの月
  • <data:view.search.label/>...検索キーワード
  • <data:blog.pageName/>...編集画面で設定した投稿・固定ページのタイトル

これらのタグを使えばページタイトルを思うような文言に変えることができます。

最後に、右上にある「保存」ボタンをクリックすれば設定完了です。

以上です。

Bloggerのテンプレートのカスタマイズの役に立てればと思います。

当記事のカテゴリー

コメント (0件)