『ブログのカテゴリ分けを使いこなす』の記事で、よりカテゴリに意味を持たせて細分化ができるようになりました。
こうなってくるとカテゴリごとに違ったメニューを表示したり、デザインも切り替えたりしてみたくなってきます。
そんな訳で、実際にFC2ブログで(他のブログでも活用できると思います)できるのかどうかをテストしてみました。
１．ページを見分ける
カテゴリごとに表示を切り替える訳ですが、複数の記事が同時に表示されている場合、それぞれカテゴリが異なってしまいます。
記事の部分に何かを表示したりデザインを装飾する場合はそれでもいいですが、サイドバーを追加したり、ブログのデザイン全てを切り替えるような場合は具合が悪いです。
そこで個別に記事が表示されている時にだけ、表示機能がＯＮになるようにページを見分けます。
これにはテンプレート変数を使います。
『QLOOKの高度な解析を使いこなす その１』の記事で書きましたが、FC2ブログには以下のような種類のページがあります。
- 各記事
例)http://run800m.blog23.fc2.com/blog-entry-48.html
- 日付
例)http://run800m.blog23.fc2.com/blog-date-200901.html
- カテゴリ
例)http://run800m.blog23.fc2.com/blog-category-6.html
- タグ
例)http://run800m.blog23.fc2.com/?tag=HTML
- 検索
例)http://run800m.blog23.fc2.com/?q=QLOOK
- コメントを書く(携帯版)
例)http://run800m.blog23.fc2.com/?m&m2=form&no=43
- コメントを見る(携帯版)
例)http://run800m.blog23.fc2.com/?mode=m&no=43&m2=res
- トラックバック(携帯版)
例)http://run800m.blog23.fc2.com/?mode=m&no=43&m2=tb
- その他
例)http://run800m.blog23.fc2.com/(トップページ)
http://run800m.blog23.fc2.com/page-1.html(一覧)
トップページなどはテンプレート変数では見分けることができないので、その他としています。
ちなみに携帯版だとタグや検索も見分けることができません。
では、実際にどう見分けるのかというと、↓のようなエリアタグを使います。
<!--category_area--> ～ <!--/category_area-->
これは開始タグ<!--category_area-->と終了タグ<!--/category_area-->の間に挟まれた内容がカテゴリ表示のページの時だけ表示されるようになります。
こういったエリアタグが何種類もあります↓
<!--index_area-->
<!--not_index_area-->
<!--permanent_area-->
<!--date_area-->
<!--category_area-->
<!--comment_area-->
<!--trackback_area-->
<!--form_area-->
<!--search_area-->
<!--tag_area-->
<!--edit_area-->
これを組み合わせることで、上述したようにページを見分けます。
つまり
- 各記事
<!--not_index_area--><!--permanent_area--><!--/permanent_area--><!--/not_index_area-->
- 日付
<!--not_index_area--><!--date_area--><!--/date_area--><!--/not_index_area-->
- カテゴリ
<!--not_index_area--><!--category_area--><!--/category_area--><!--/not_index_area-->
- タグ
<!--not_index_area--><!--tag_area--><!--/tag_area--><!--/not_index_area-->
- 検索
<!--not_index_area--><!--search_area--><!--/search_area--><!--/not_index_area-->
- コメントを書く(携帯版)
<!--not_index_area--><!--permanent_area--><!--form_area--><!--/form_area--><!--/permanent_area--><!--/not_index_area-->
- コメントを見る(携帯版)
<!--not_index_area--><!--comment_area--><!--/comment_area--><!--/not_index_area-->
- トラックバック(携帯版)
<!--not_index_area--><!--trackback_area--><!--/trackback_area--><!--/not_index_area-->
こういったようにして表示するページを判別できます。
分類の詳しい話は『QLOOKの高度な解析を使いこなす その１』をどうぞ。
今回はそのうちの各記事
<!--not_index_area--><!--permanent_area--><!--/permanent_area--><!--/not_index_area-->
２．カテゴリを見分ける
カテゴリの見分けにはJavaScriptを使います。
カテゴリの名前は<%topentry_category>、カテゴリ番号は<%topentry_category_no>で得ることができます。
この<%topentry...>で始まるテンプレート変数は<!--topentry-->～<!--/topentry-->というエリアタグの中でのみ有効になります。
これを使って、例えば「QLOOK」というカテゴリの場合だとこうなります↓
<!--not_index_area--><!--permanent_area--><!--topentry-->
<script language="JavaScript"><!--
if("<%topentry_category>"=="QLOOK")
document.write("QLOOK");
// -->
</script>
<!--/not_index_area--><!--/permanent_area--><!--/topentry-->
この表示する部分に任意のHTMLソースを入れ込めば、任意のカテゴリの時だけサイドバーを表示したり、画像を表示したりできます。
(ちなみにHTMLソースを入れ込む場合は『ブログやサイトにソースコードを乗せる時に便利なツール』を使うと改行、タブの削除などが簡単にできて便利です。)
各記事の時だけ表示したいので、全体を<!--not_index_area--><!--permanent_area--><!--/permanent_area--><!--/not_index_area-->というエリアタグで囲っています。
今回はカテゴリ名をif文の条件に使いましたが、カテゴリ番号でも同じことが可能です。
ただ、カテゴリを追加・削除したりした場合に番号だと変更されてしまい、その度に確認をしなければならないのが面倒なので、カテゴリ名を条件に使ってみました。
もちろんカテゴリ名の変更をした場合には、条件文の方を修正しなければなりません。
３．その他の方法
カテゴリを見分けるのにJavaScriptを使いましたが、それならいっそのことページの判別もJavaScriptで行う方法もあります。
JavaScriptではlocation.hrefを用いて現在のURLを取得することができます。
上述したリストにありましたが、
- 各記事
例)http://run800m.blog23.fc2.com/blog-entry-48.html
- 日付
例)http://run800m.blog23.fc2.com/blog-date-200901.html
- カテゴリ
例)http://run800m.blog23.fc2.com/blog-category-6.html
- タグ
例)http://run800m.blog23.fc2.com/?tag=HTML
- 検索
例)http://run800m.blog23.fc2.com/?q=QLOOK
- コメントを書く(携帯版)
例)http://run800m.blog23.fc2.com/?m&m2=form&no=43
- コメントを見る(携帯版)
例)http://run800m.blog23.fc2.com/?mode=m&no=43&m2=res
- トラックバック(携帯版)
例)http://run800m.blog23.fc2.com/?mode=m&no=43&m2=tb
- その他
例)http://run800m.blog23.fc2.com/(トップページ)
http://run800m.blog23.fc2.com/page-1.html(一覧)
このようにページの種類によってURLが変わりますので、現在のURLさえ取得できれば、それを元に処理の切り分けができる訳です。
テンプレート変数により切り分けよりも、より詳細に分けることも可能です。
こんな感じにテンプレートにJavaScriptを仕込みます。
<script language="JavaScript"><!--
blog_url="http://run800m.blog23.fc2.com/"; // トップページのURLを記入
offset_num=blog_url.length; // そのURL文字数を取得
url=location.href; // ブラウザの現在のURLを取得
if(url.length > offset_num){ // 現在のURLがトップページのURLよりも長いか？
word=url[1+offset_num]; // トップページのURL+2文字目の文字を取得
if(word=="t") // http://run800m.blog23.fc2.com/?『t』ag=...
document.write("タグページ");
else if(word=="q") // http://run800m.blog23.fc2.com/?『q』=...
document.write("検索ページ");
else if(word=="l"){ // http://run800m.blog23.fc2.com/b『l』og...
word=url[5+offset_num]; // トップページのURL+6文字目の文字を取得
if(word=="e") // http://run800m.blog23.fc2.com/blog-『e』ntry...
document.write("各記事ページ");
else if(word=="d") // http://run800m.blog23.fc2.com/blog-『d』ate...
document.write("日付ページ");
else if(word=="c") // http://run800m.blog23.fc2.com/blog-『c』ategory...
document.write("カテゴリページ");
}
}
// -->
</script>
http://run800m.blog23.fc2.com/?『t』ag=
http://run800m.blog23.fc2.com/?『q』=
http://run800m.blog23.fc2.com/b『l』og-『e』ntry-48.html
http://run800m.blog23.fc2.com/b『l』og-『d』ate-200901.html
http://run800m.blog23.fc2.com/b『l』og-『c』ategory-6.html
これだけで検索のページなのか、日付のページなのかということが分かります。
上の例では「各記事ページ」などと表示を行うだけですが、ここの部分に表示させたいHTMLソースを入れれば、任意のページでサイドバーを表示させたりできる訳です。
今回の記事でカテゴリごとに個別に表示を替えることができるようになりました。
と、いいながらまだうちのブログでは使っていません。
いずれテンプレートを自作しようと思っていますので、その時に導入してみたいと思います。
最近の記事を見る
⇒ (2010/02/22) ⇒QLOOKの解析タグのカスタマイズに新機能 (2009/05/02) ⇒CREATIVE ZEN その１１（ZEN MX発売） (2009/04/30) ⇒あらゆるコネクタの埃(ホコリ)対策 (2009/03/31) ⇒カテゴリごとにブログのデザインを替える方法 (2009/02/28) ⇒T-falのIH鍋を買いました (2009/01/31) ⇒ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15) ⇒CREATIVE ZEN その１０(右クリックメニューを消す方法) (2008/12/12) ⇒Spybotの右クリックメニューを消す方法 (2008/12/11) ⇒ブログのカテゴリ分けを使いこなす (2008/11/21)
テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ カテゴリ:ネット関連
|
