カレンダー

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)


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

カテゴリ:ネット関連

QLOOKの解析タグのカスタマイズを使いこなす
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
QLOOKにまた更新がありました。

ここは本当に更新頻度が高く、毎回お知らせメールが来るのが楽しみです。

今回のメールは有料版の価格改定と、「解析タグのカスタマイズ」という新しい機能の追加です。

解析タグの改造は規約違反だったのですが、これによってタグの自由度が増えました。

またこの機能に伴って、今まであった中・上級者向け、携帯向け、高度な解析という分類が廃止・統一されました。

【QLOOKシリーズ】
QLOOKの高度な解析を使いこなす その1
QLOOKの高度な解析を使いこなす その2
QLOOKの高度な解析を使いこなす その3
QLOOKの高度な解析を使いこなす その4


では、詳しく見ていきましょう。

まず全くカスタマイズしていない状態のタグは
<!--QLOOKアクセス解析-->
<a href="http://analytics.qlook.net/" target="_blank"><img src="http://analytics.qlook.net/run800m/counter.png" id="run800m.analytics.qlook.net" alt="QLOOKアクセス解析" style="width:80px;height:15px;border:0px;" /></a><script type="text/javascript" src="http://analytics.qlook.net/run800m/analyze.js" defer="defer"></script><noscript><div><iframe src="http://analytics.qlook.net/run800m/analyze.html" style="width:1px;height:1px;"><img src="http://analytics.qlook.net/run800m/analyze.gif?guid=ON" alt="QLOOKアクセス解析" style="width:1px;height:1px;" /></iframe></div></noscript>
<!--/QLOOKアクセス解析-->

今までの通常のPC用タグと同じものです。

変更点としては、今まであったタグのバージョン表記がなくなっています。

そして、「解析タグをカスタマイズする ≫」という部分をクリックすると、チェックボックスで9項目の有効・無効を設定できます。

【090502 追記:『QLOOKの解析タグのカスタマイズに新機能』
  • リンクタグ <a> に target 属性を利用する
  • デフォルト:有効
    正確には「target="_blank"」が属性として指定されます。
    これによりQLOOKのアイコンをクリックした時に、リンク先が別窓で開くようになります。
    お好みで決めて下さい。

  • 画像タグ <img> に alt 属性を利用する
  • デフォルト:有効
    Alt属性は画像が表示できない場合の代替テキストになり検索エンジンもこれを読みます。
    「alt="QLOOKアクセス解析"」となっており、これのせいで「QLOOK」と検索した時にQLOOKのアクセス解析を置いているサイトがヒットしてしまっています。
    W3CではIMGタグでのAlt属性の指定は必須項目なので、指定しておきましょう。

  • 画像タグ <img> に width 属性および height 属性を利用する
  • デフォルト:無効
    画像の縦横の長さを指定します。
    これがあると画像の読込が早くなり「軽いページ」に繋がります。
    ブロードバンドのご時勢に小さな画像一つでそれほど影響はありませんが、指定して損するものでもないのでチェックしておきましょう。

  • <iframe> を利用して,検索ロボットなどに対しても解析を行う (推奨)
  • デフォルト:有効
    『QLOOKの高度な解析を使いこなす その4』という記事の中で少し触れましたが、アクセス解析はJavaScript⇒インラインフレーム(iframe)⇒画像と、あの手この手を使って取りこぼしを減らそうとしています。
    ですので、推奨とあるようにiframeが嫌いでない限りは指定をしておくべきでしょう。

  • 解析タグの始まりと終わりの部分をコメントタグ <!-- --> で囲む
  • デフォルト:有効
    タグの最初と最後の行の「<!--QLOOKアクセス解析-->」という部分です。
    ただのコメントなので消してもいいですが、QLOOKのタグに限らずこういったコメントを書いておくと、後でHTMLソースを見たときに見やすくなります。

  • 解析タグにマルチバイト文字を使用しない
  • デフォルト:無効
    マルチバイト文字とは今まさに読んでいる日本語のような全角文字です。
    英語圏では半角英数字のみで済むため、海外製ソフトなんかはマルチバイト文字を扱えなかったりします。
    ただ、ブラウザに関してはそこまで気にする必要はないと思います。
    チェックすると「QLOOKアクセス解析」という部分が全て「QLOOK ANALYTICS」になります。

  • XHTML互換のタグ表記を使用しない
  • デフォルト:無効
    変更箇所はimgタグの末尾の「/>」と、scriptタグの「defer="defer"」部分です。
    XHTMLでは空要素は「/>」で閉じ、属性値も省略せず引用符で囲む必要があります。
    XHTMLでソースを書いていないのであれば、無効にしましょう。

  • 携帯サイト専用の軽量な解析タグにする
  • デフォルト:無効
    携帯ではJavaScriptとiframeが使えないので、それらの部分が省略されます。
    携帯専用ページのタグを生成する場合には、これにチェックを入れます。

  • アクセスカウンタを非表示にする (有料版のみ)
  • デフォルト:無効
    有料版のみ使える機能です。
    アイコン画像が0x0ピクセルの透明画像になるようです。

  • 解析タグにページ名とURLを含める (上級者向け)
  • デフォルト:無効
    以前にあった高度な解析という機能にあたります。これについては私が以前に書いた記事を参考にして下さい。(『QLOOKの高度な解析を使いこなす その1』


チェックボックスにチェックを入れるとページの下の方にリアルタイムでタグが生成・表示されるので、実際にどうなるのかを確認しながら指定ができます。

今までのようにいくつも種類があるよりも分かりやすいですし、カスタマイズできる項目が多いのもいいですね。

例えばコメントとか画像サイズの指定とか、小さな部分を改造・改良するのも規約違反になる可能性があったので、今回のように公式にカスタマイズをさせてくれると安心です。

余談ですが画像サイズ指定の所で「軽いページ」になると触れましたが、確かにアクセス解析での処理がページを重くしてはいけません。

そこでQLOOKのタグではJavaScriptの読み込みにdefer属性が指定されています。

これはページの読み込みが終わるまで、指定されたJavaScriptの処理を待機させるものです。

興味のある方はThousand Yearsというブログの『script要素のdefer属性の実装』という記事なんかを参照してみて下さい。


QLOOKはログの表記が変わったり、統計情報が見やすくなったりと、次々と変化があって本当に面白いです。

これからも機能追加するたびに、QLOOKを使いこなしていきたいと思います(⇒『QLOOKの解析タグのカスタマイズに新機能』

今回興味を持ったもの

Web解析Hacks ―オンラインビジネスで最大の効果をあげるテクニック & ツールWeb解析Hacks ―オンラインビジネスで最大の効果をあげるテクニック & ツール
株式会社デジタルフォレスト 木下 哲也 有限会社 福龍興業

オライリー・ジャパン 2006-11-08
売り上げランキング : 95447
おすすめ平均

Amazonで詳しく見る
by G-Tools


関連した記事を見る(タグ検索)
アクセス解析 解析 HTML QLOOK 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)


テーマ:SEO対策 - ジャンル:コンピュータ

メインカテゴリ:ネット関連  カテゴリ:QLOOK

ブログやサイトにソースコードを乗せる時に便利なツール
このエントリーを含むはてなブックマーク FC2ブックマーク この記事をlivedoorクリップ! Yahoo!ブックマークに登録 Buzzurlにブックマーク
自分好みのが欲しかったんで、簡単なの作りました。

汎用的な特殊文字の置換、任意フレーズの置換、タブの削除・置換、改行の削除ができます↓


使い方は単純明快。

上の「◎入力欄◎」に変換したいソースを貼って「置換開始」のボタンを押すと、下の「◎出力欄◎」に変換されたソースが表示されます。

変換する内容についてはその上にあるチェックボックスやテキストエリアで入力・選択します。

よく使うであろう「< > & "」の変換がデフォルトで選択できるようになっています。

それ以外の置換は「その他」の欄の左側のテキストボックスに置換前の文字列、右側のテキストボックスに置換後の文字列を記入します。

FC2ブログで書いていると、コードの改行が実際に反映されてしまったりするので、改行削除機能もついています。

またタブの削除・置換もできます。

デフォルトではタブを空白(&nbsp;)4つに置換するようになっていますが、任意のフレーズに置換できます。



最近SBMの記事を書いていて、コードを貼り付けることが多かったので作りました。

プログラムやHTMLソースを載せる際に、簡単に変換が行えます。

今まではメモ帳でいちいち「&gt;」とか打ってたので、多少楽になりました。

セミコロンとコロンを打ち間違えたり、『QLOOKの高度な解析を使いこなす その2』の記事で&を変換し忘れたりもしていましたが、このツールを使うことで変換ミスがなくせます。


一応FirefoxとIEで動作確認をしたんですが、最初IEで改行削除がうまくいきませんでした。

調べてみたところ改行がFFは「\n」、IEは「\r\n」のようです。

改行コードがOSによってCRだったりLFだったりってのは知っていましたが、ブラウザでもそんな違いがあるのは初耳でした。

あまりWebプログラミングは経験がなく、「使えればいいや」と場当たり的にやってきましたが、これからはブラウザ上でなんでもやる時代になるでしょうし、もうちょっと勉強した方がいいのかもしれません。


ちなみにうちでは↓の2つの本を使っています。
JavaScript辞典 第3版 改訂新版 JavaScript 例文活用辞典
どちらも使いたい機能の実際の例文が載っているので、何も考えずにコピペするだけで使えます。

ただ、私の使っているのは古い版なので、表示例がIEとNNだったり、今ほど多様な使い方は載ってなかったりしますが……

今出ている最新の版ではAjaxなどについても言及されています。

買いなおそうか悩みましたが、もう少し教科書的な本を今度は買おうと思っています。

日曜プログラマーで今までどれも独学でやってきたので、一度ちゃんと学び直しておきたいところです。

今回興味を持ったもの

JavaScript辞典 第3版JavaScript辞典 第3版
株式会社アンク

翔泳社 2008-01-11
売り上げランキング : 212477

Amazonで詳しく見る
by G-Tools

改訂新版 JavaScript 例文活用辞典改訂新版 JavaScript 例文活用辞典
古籏 一浩

技術評論社 2006-10-20
売り上げランキング : 352584
おすすめ平均

Amazonで詳しく見る
by G-Tools



関連した記事を見る(タグ検索)
FC2ブログ HTML CSS プログラミング 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)


テーマ:HP作成 - ジャンル:コンピュータ

カテゴリ:ネット関連



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