カレンダー

08 | 2017/09 | 10
- - - - - 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

最近の記事

月別アーカイブ

カテゴリー

ユーザータグ

最近のコメント

プロフィール

run800m

Author:run800m
元・陸上競技の800m選手。
好きな食べ物はねぎともやし。

専門は機械工学・ロボティクス
興味は経済・経営・生産・心理
・地理・プログラミング・性

QLOOKアクセス解析
フィードメーター - 他人の日記を見るのか? ver.BLOG

QRコード

QR

RSS

はてなRSSに追加
livedoor Readerに追加
My Yahoo!に追加
Googleに追加
goo RSSリーダーに追加
Bloglinesに追加
Technoratiに追加
newsgatorに追加
Powered by SEO対策 RSSプラス

ブログ内検索

リンク

このブログをリンクに追加する

気まぐれ広告

ブログ内容を反映するらしい。
ホントか!?

他人の日記を見るのか? ver.BLOG
デジモノ好きのたわいもない記録 デジタルライフ
スポンサーサイト
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


カテゴリ:スポンサー広告

カテゴリごとにブログのデザインを替える方法
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
ブログのカテゴリ分けを使いこなす』の記事で、よりカテゴリに意味を持たせて細分化ができるようになりました。

こうなってくるとカテゴリごとに違ったメニューを表示したり、デザインも切り替えたりしてみたくなってきます。

そんな訳で、実際にFC2ブログで(他のブログでも活用できると思います)できるのかどうかをテストしてみました。


1.ページを見分ける


カテゴリごとに表示を切り替える訳ですが、複数の記事が同時に表示されている場合、それぞれカテゴリが異なってしまいます。

記事の部分に何かを表示したりデザインを装飾する場合はそれでもいいですが、サイドバーを追加したり、ブログのデザイン全てを切り替えるような場合は具合が悪いです。

そこで個別に記事が表示されている時にだけ、表示機能がONになるようにページを見分けます。

これにはテンプレート変数を使います。

QLOOKの高度な解析を使いこなす その1』の記事で書きましたが、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の高度な解析を使いこなす その1』をどうぞ。

今回はそのうちの各記事
<!--not_index_area--><!--permanent_area--><!--/permanent_area--><!--/not_index_area-->
を利用します。


2.カテゴリを見分ける


カテゴリの見分けには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-->
カテゴリ名が「QLOOK」に一致するかどうかを、JavaScriptのif文で調べて、正しい場合は「QLOOK」と表示しています。

この表示する部分に任意のHTMLソースを入れ込めば、任意のカテゴリの時だけサイドバーを表示したり、画像を表示したりできます。

(ちなみにHTMLソースを入れ込む場合は『ブログやサイトにソースコードを乗せる時に便利なツール』を使うと改行、タブの削除などが簡単にできて便利です。)

各記事の時だけ表示したいので、全体を<!--not_index_area--><!--permanent_area--><!--/permanent_area--><!--/not_index_area-->というエリアタグで囲っています。

今回はカテゴリ名をif文の条件に使いましたが、カテゴリ番号でも同じことが可能です。

ただ、カテゴリを追加・削除したりした場合に番号だと変更されてしまい、その度に確認をしなければならないのが面倒なので、カテゴリ名を条件に使ってみました。

もちろんカテゴリ名の変更をした場合には、条件文の方を修正しなければなりません。


3.その他の方法


カテゴリを見分けるのに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>
URLのドメイン以降の2文字目と6文字目を取得して、条件分岐に使っています↓
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ソースを入れれば、任意のページでサイドバーを表示させたりできる訳です。



今回の記事でカテゴリごとに個別に表示を替えることができるようになりました。

と、いいながらまだうちのブログでは使っていません。

いずれテンプレートを自作しようと思っていますので、その時に導入してみたいと思います。

今回興味を持ったもの

さすが!と言わせる 続・FC2ブログ徹底攻略術さすが!と言わせる 続・FC2ブログ徹底攻略術
篠塚 充

シーアンドアール研究所 2007-11
売り上げランキング : 133029
おすすめ平均

Amazonで詳しく見る
by G-Tools
スポンサーサイト


関連した記事を見る(タグ検索)
HTML FC2ブログ JavaScript
最近の記事を見る

(2010/02/22)

QLOOKの解析タグのカスタマイズに新機能 (2009/05/02)

CREATIVE ZEN その11(ZEN MX発売) (2009/04/30)

あらゆるコネクタの埃(ホコリ)対策 (2009/03/31)

カテゴリごとにブログのデザインを替える方法 (2009/02/28)

T-falのIH鍋を買いました (2009/01/31)

ZoneAlarmフリー版のいらない右クリックメニューを消す方法 (2008/12/15)

CREATIVE ZEN その10(右クリックメニューを消す方法) (2008/12/12)

Spybotの右クリックメニューを消す方法 (2008/12/11)

ブログのカテゴリ分けを使いこなす (2008/11/21)


テーマ:ホームページ・ブログ制作 - ジャンル:コンピュータ

カテゴリ:ネット関連

この記事に対するコメント
【承認待ちコメント】
このコメントは管理者の承認待ちです
【2010/07/21 20:26】 URL | # [ 編集]


この記事に対するコメントの投稿
質問・指摘・その他諸々、古い記事にも遠慮なくコメントして下さい!














管理者にだけ表示を許可する
宣伝・スパム・荒し行為でしかないものは削除します。


この記事に対するトラックバック
古い記事にも遠慮なくトラックバックして下さい!
トラックバックURL
→http://run800m.blog23.fc2.com/tb.php/48-4dbbe9de
この記事にトラックバックする(FC2ブログユーザー)

言及リンクのないもの、宣伝・スパム・荒らし行為でしかないものは削除します。
またトラックバック先の内容について当ブログ管理人は一切保障しませんし、責任も負いません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。