さて、カスタマイズ Tips をご紹介する前に、なんやかんやありましたが・・・。気を取り直して、(やっと)ソラマメのデフォルトテンプレートをゴリゴリ改造していきますよ。
まず最初に改造するのは、ブラウザのタイトルバーに表示されるテキストの部分から。
「タイトルバー」は閲覧している Web ページのタイトルを表示します。この部分は HTML ファイルで指定しています。トップページを表示するときはブログタイトルのみが表示されますが、それ以外のページでは内容が異なります。
デフォルトでは、以下のように表示されます。ご自身のブログでも確認してみてください。
- トップページ
- ブログタイトルのみ
- 個別記事ページ
- ブログタイトル:記事タイトル
- カテゴリーアーカイブページ
- ブログタイトル:カテゴリー名
- タグアーカイブページ
- ブログタイトル:タグ名
- 日別アーカイブ(カレンダーの日付をクリックした場合)
- ブログタイトル:年月日
- 月別アーカイブページ
- ブログタイトル:年月
トップページ以外では、ブログタイトルの後に半角のコロン(:)と各ページが個別に持つタイトルが追加されていますね。
また、 このタイトルは Google や Yahoo などの検索結果にも反映されます。
先頭にブログタイトルがあるため、記事タイトルの後ろが省略されていますね。
なぜ今回この部分をカスタマイズするかと言うと、記事タイトルが優先された方が訪問者に親切だからです。
情報を探している大多数の人は、検索サイトを利用するでしょう。検索結果からは、恐らくサイトやブログのタイトルよりも
記事のタイトルを見て、求めている情報があるかどうか(閲覧するか・しないか)を判断すると考えられます。ニュースサイトでも、記事タイトルが先に表示されていることが多いですよね。
ソラマメ内で検索すると自動的に記事タイトルのみが表示されるようになっていますが、他の検索サイトでも同様に記事タイトルが優先されるようにしておくと、訪問者の増加が期待できます。
では、カスタマイズを始めましょう。
今回使用するテンプレートは、「個別記事」と「アーカイブ」の2つです。
テキストエディタにテンプレートをコピペして作業されている方は、9行目を確認してください。テンプレートの冒頭にある、<head>〜</head> の中の、<title>〜</title> の箇所です。
「個別記事」では、以下のような記述になっているはずです。
<title><%BlogTitle%>:<%EntryTitle%></title>
これは解りやすいですね。<%BlogTitle%> はブログタイトルを、 <%EntryTitle%> は記事タイトルを自動的に取得するようになっています。
これを前後入れ替えるわけですが、ついでに半角コロン(:)の部分もタイトル同士が隣接し過ぎていて読みにくいので、他のものに変えてみましょう。
私は以下のようにしてみました。
<title><%EntryTitle%>|<%BlogTitle%></title>
コロンなどは記事タイトル内に使用することがあるかもしれないので、パイプラインを挟むことにしました。
「アーカイブ」も同じように変更します。
まずはタイトルを指定している部分を探します。
<title><%BlogTitle%>:<%CategoryName%></title>
私は「個別記事」と同じく、以下のようにパイプラインで挟みました。ちょっとしたことですが、ブログ内で統一した方が良いでしょう。
また、開いているページがアーカイブページであることを示すために、「のアーカイブ」を追加してみました。
<title><%CategoryName%> のアーカイブ|<%BlogTitle%></title>
テンプレートを保存して、ブログを確認してみてください。
尚、選択したカテゴリーに1記事も投稿されていない場合、カテゴリー名はタイトルバーに表示されないようです。
また、タグのアーカイブページのタイトルバーは即座に反映されないようです・・・。ブラウザのキャッシュをクリアしても、変わらない部分があったりしていますね。ちょっと不安定です。
恐らくこちらからは触れない部分になるので、反映されるのを待ってみます。