ブログのタイトル形式の変更

FC2 ブログでのタイトルは次のような形式のものが多いです。
  <ブログタイトル> <記事タイトル>
  プログラマーズ雑記帳 ブログのタイトル形式の変更
しかし、 Web ではページのタイトルは次のような形式の方がよく見られます。
  ブログのタイトル形式の変更 - プログラマーズ雑記帳
  ブログのタイトル形式の変更 | プログラマーズ雑記帳
順番を入れ替えて、 -| をつけるだけだと ちょっと落とし穴があるので、このブログのタイトル形式の変更方法について説明してみたいと思います。

標準的な FC2 ブログでのタイトル形式

まずは標準的な FC2 ブログのタイトルをテンプレートで書くと次のような形式になります。
<title>
  <%blog_name> <%sub_title>
</title>
<%blog_name> 単変数がブログのタイトルで、 <%sub_title> 単変数が記事タイトルなどのモードによって変更されるサブタイトルになります。

以前の記事でも書きましたが、 FC2 ブログでは複数の表示モードがあります。 このモードごとの <%sub_title> で表示される内容は次のようなものです。
モード モード名 表示内容
トップページ(最新記事) index (空)
ページ記事 (なし) (空)
カテゴリ category カテゴリ名
タグ tag タグ名
日、月別 date 日または月の数値
個別記事表示 permanent 記事タイトル
記事一覧 titlelist (空)
検索結果表示 search 検索文字列

一般的な web ページのタイトル形式(不完全版)

まずは単純に並び替えて | を付けてみます。
<title>
  <%sub_title> | <%blog_name>
</title>
モードによっては <%sub_title> は空文字になります。 このため、 | だけ残ってしまう場合が発生してしまい、ちょっとかっこ悪いです。
 | プログラマーズ雑記帳 

各モードには not_xxxx_area という xxxx のモード以外の時だけ有効になるブロック変数が用意されています。これを使って少し改良してみましょう。
<title>
  <!--not_index_area-->
  <!--not_titlelist_area-->
  <%sub_title> |
  <!--/not_titlelist_area--> 
  <!--/not_index_area-->
  <%blog_name>
</title>
これでトップページと記事一覧ページの場合には | は出ないようになりました。 この書き方だとページ記事以外のモードに対しては対応できています。
ページ記事のモードでも not_xxxx_area を使って対応したいところですが、 モード名が用意されていないため、使用することはできません。

一般的な web ページのタイトル形式

not_xxxx_area のブロック変数が使えないため、少し面倒ですが、 <%sub_title> が空ではないをモード一つ一つ書いていきます。
これですべてのモードに対応した表示になります。
<title>
  <!--search_area-->    <%sub_title> | <!--/search_area-->
  <!--tag_area-->       <%sub_title> | <!--/tag_area-->
  <!--date_area-->      <%sub_title> | <!--/date_area-->
  <!--permanent_area--> <%sub_title> | <!--/permanent_area-->
  <!--category_area-->  <%sub_title> | <!--/category_area-->
  <%blog_name>
</title>
ちなみに以下は実際にこのブログのテンプレートで使っている記述で、 記事一覧と検索モードのところを少し変えています。
<title>
  <!--search_area-->    <%sub_title> | <!--/search_area-->
  <!--tag_area-->       <%sub_title> | <!--/tag_area-->
  <!--date_area-->      <%sub_title> | <!--/date_area-->
  <!--permanent_area--> <%sub_title> | <!--/permanent_area-->
  <!--category_area-->  <%sub_title> | <!--/category_area-->
  <!--titlelist_area--> 記事一覧           | <!--/titlelist_area-->
  <%blog_name>
  <!--search_area--> 検索 <!--/search_area-->
</title>
関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
35位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
6位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

05月 | 2017年06月 | 07月
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。