スポンサーサイト

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

【同じタグを付けた記事の一覧】

FC2 アクセスランキングのブログパーツでタイトルを折り返す方法

2010年09月13日(月)20時17分

FC2 アクセスランキング

前回FC2 アクセス解析を導入したことを書きましたが、同時に FC2 アクセスランキングも導入していました。
アクセス解析もアクセスランキングも、サイトに対するアクセス状況が確認できるという意味では似たようなサービスですが、アクセス解析で得られた情報は、主に自分が参考にするために使用するのに対して、アクセスランキングで得られた情報は、他者(訪問者)に参考にしてもらうために(基本的には)公開する、というのが違いだと思います。
つまりまあ、「人気ページランキング」みたいなブログパーツを設置してみたかったわけです。

ブログパーツの問題点

ただ、このブログパーツというのがタイトルを折り返さず、必ず一順位一行で表示されます。
ブログパーツは、サイド・バーのような幅の狭い場所に表示することが多いのではないかと思うのですが、順位やアクセス数の表示領域が結構幅をとる上にタイトルが折り返さないため、1位から10位まで「http://denspe.blog」と途中で途切れた半端な URL が並んでいたりします。
URL 表示(初期設定)から、ページ・タイトルを自動取得して表示する設定に変更(反映まで結構タイム・ラグがあります)したところで、やはり先頭一部分しか表示されないことに変わりありませんので、あまり興味をそそらないものに…。
見回すと FC2 でブログを書いておられる方でも、アクセスランキングは ACR WEB、といったケースが結構あったりするのは、このあたりの事情も影響しているのでしょうか?

とりあえず結論から

「細かい話はいいから、とにかくやり方だけを知りたい」という方のために、まず結論から書きますと、以下のようにすれば、タイトルが折り返すようになると思います、…多分。

<div id="ranking-page">
【貼り付け用タグ】
</div>
<script type="text/javascript" charset="utf-8">
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/white-space:\s?nowrap/ig,"white-space: normal");
</script>

【貼り付け用タグ】の部分は FC2 アクセスランキングで取得できるブログパーツ用タグのものに置き換えてください。
3か所ある「ranking-page」は「人気ページ」用の記述で、「リンク元(IN)」なら「ranking-ref」、「移動先(OUT)」なら「ranking-clk」等に置き換えてください(ただの識別用ラベルですので、実際にはAでもBでも、他とかぶりさえしなければどんなものでもかまいませんが)。
とりあえず FirefoxInternet Explorer(以下IE)で確認しましたが、環境によってはうまくいかないかもしれません。
当然ながら JavaScript が許可された環境でないといけません(そもそも不許可の場合はブログパーツ自体が表示されませんが)。

折り返させる仕組み

FC2 アクセスランキングのブログパーツは JavaScript になっており、呼び出されると動的にテーブル・タグを生成して「document.write」で呼び出された位置に書き込みます。
そして生成されるテーブルの各行に「white-space: nowrap;」が設定されるために折り返されなくなっています。
つまり、これを全て「white-space: normal;」に置換してしまえばよい、ということになるわけです。
ということで、まず「貼り付け用タグ」を DIV タグで囲み、その中にテーブル・タグを書き込ませることで、変更範囲を限定します。
そうしておいて、DIV タグに付けた識別子を使って「document.getElementById("ranking-page").innerHTML」とすれば、ブログパーツが書き込んだテーブル・タグ文字列の取得・変更が可能になるということです。

文字列置換

ということで、innerHTML の内容を replace 命令で置換した後、また innerHTML に書き戻すのですが、ここでは一致条件として正規表現(//で囲む)を使用しています。
置換文字列自体は単純一致なのですが、置換対象が行ごとに複数個存在しますので、「g」オプションを指定して繰り返し一致させるために正規表現にする必要があります。
また IE では「document.write」で書き込まれたタグが大文字に変更されてしまうため、「i」オプションも指定して、大文字・小文字の違いを無視させる必要があります。
もうひとつ、置換条件を単純化すれば、置換文字列は「nowrap → normal」だけでかまわないわけですが、万一タイトルやURLに「nowrap」が含まれると面倒なため、少しでも誤爆を防ぐ意味で「white-space: 」も付けています。
であれば、一ブロックという意味で、末尾のセミコロンも含めて「white-space: nowrap;」を対象としてはどうか?と思うわけですが、これもまた IE においては「document.write」の際に、なくても分離可能な場所にある文末記号(;)は、削除されてしまうため、付けると一致しなくなることがあります。

ブログ・タイトルの非表示

ブログパーツに表示されるタイトルは、ブログのテンプレートの設定によっては、ブログ・タイトルが含まれたものになります。
例えば当サイトにおいては、各行のタイトル末尾に「 - 電脳スピーチ blog」がつくことになり、狭い枠内に同じ情報をいくつも表示するのは無駄といえますので、これを削除してみることにしました。
といっても、「document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/ - 電脳スピーチ blog/ig,"");」を「nowrap → normal」置換行の場所に並べて、「 - 電脳スピーチ blog」という文字列を空文字(“”)で置換、つまり削除してしまうだけです。

アクセス数の非表示

ブログパーツは各行3列で構成されており、「順位/タイトル/アクセス数」になりますが、「アクセス数」の幅がわりに広く取られているように感じます。
まあ、一日に数千~数万アクセスある人気サイトであればこれくらいないと表示しきれないのかもしれませんが、当サイトにおいては大幅に余っています。
というより、自分にとっては順位さえわかればアクセス数は比較的どうでもいい情報でしたので、限られたスペースを有効に使うという意味で、取り去ってみることにしました。
少し調べてみると、順位は 24px、アクセス数は 60px を固定でとり、残りの部分をタイトル表示領域にしているようです。
ブログパーツは初期設定で横幅 180px となっていますので、標準ですとタイトル表示領域は「180-24-60」で 96px となります。
ただし、当サイトではサイドバー領域の最大表示幅が 195px であるため、ブログパーツの横幅もそれに合わせて変更していますので、「195-24-60」で 111px となっています。
つまり、アクセス数領域の 60px を 0px に、減らした分をタイトル領域に足すために 111px を 171pxとすればよいわけです。
ということで、上記の「ブログ・タイトルの非表示」と合わせて、こんな風になりました。

<div id="ranking-page">
【貼り付け用タグ】
</div>
<script type="text/javascript" charset="utf-8">
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?111px/i,"width: 171px");
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?60px/i,"width: 0px");
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/white-space:\s?nowrap/ig,"white-space: normal");
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/ - 電脳スピーチ blog/ig,"");
</script>

なお、幅の指定は一か所しか存在しないため、「g」オプションは必要ありません。

文字色の変更

ブログパーツのタイトル欄の文字の色は鮮やかな青(#0000CC)で、これはおそらく一般的なリンク文字の色ではないかと思われますが、当ブログではリンク文字の色は少しくすんだ青(#006AB6)に変更してありますので、このままですと少し浮いてしまいます。
ということでこれを変更しようというわけですが、動的に生成された HTML のソースは「color: rgb(0, 0, 204)」となっており、これを「color: rgb(0, 106, 182)」にすることになります。
正規表現では「()」はエスケープする必要がありましたので、要旨のみ抜粋すると「replace(/color: rgb\(0, 0, 204\)/ig,"color: rgb(0, 106, 182)")」となりました。
ただし、これもまた IE の「document.write」では変換されてしまうため、「replace(/color: #0000cc/ig,"color: #006ab6")」という置換文も必要になります。
また、これは各行ごとに複数出現するため「g」オプションが必要です。

ご注意

ここで書かれている内容は 2010/09/13 時点でのものですので、将来的に FC2 アクセスランキングのブログパーツの仕様が変更されれば、使えなくなります。
また、「広告消し」のような悪質な改変でもないし、特に規約などで禁止されたりもしていないようだから、ということでやってみましたが、悪質かどうかはこちらの判断で決まることではなく、規約で禁止されていないかどうかも公式に確認したわけではありませんので、突然 ID の利用停止処置等がなされたりする可能性もありうる点にご注意ください。

【追記:2011/05/07】Firefox 4 に対応

Firefox のバージョンを 4 にしたところ、この記事の変更が適用されなくなっていました。
原因を調べてみたところ、このバージョンでは、例えば「white-space: nowrap」が「white-space:nowrap」というようになっており、つまり「:」に続く半角スペースが省略されるようです。
ということで、記事中のサンプル部分では、「: 」の記述を「:\s?」に変更しました(解説部分では焦点がぼけるためそのままにしてあります)。
なお、「\s」は空白記号(半角スペースに限らずタブなども含む)で、その後ろの「?」は「0個か1個ある」ことを表し、繋げて書くことで「ここには何もないか、空白記号が一つだけ入ります」という意味になります。

関連記事

【同じタグを付けた記事の一覧】
FC2 サイト運営 アクセスランキング ブログ

スポンサーサイト

trackback


この記事にトラックバックする(FC2ブログユーザー)

ページランキング

投稿記事のアクセス数をランキング形式で表示する方法。 これまで「月間ページランキング」としてACR WEB を使用。 今回、新たに「人気ページランキング」として 「FC2アクセスランキング」を併用してみました。(表示件数30件) 右サイドバー切替内の「月間ペー?...

FC2アクセスランキング その後 -ブログパーツ-

前回、幅が狭いサイドーバーへの表示がうまくいかず、 リセットした「FC2アクセスランキング」ですが、 集計対象が1000件を超したのと、 表示を変更する事が出来るようになったので

今までの集計を諦めました。~ランキングを変更~

以前使っていたIDEA‐UNLIMITEDの 「人気記事ランキング」というブログパーツが 全く表示されなくなったため、 別のパーツなどでいろいろ試行錯誤しましたが、 結局のところ、 FC2のアクセスランキングに落ち着きました。 …今までのデータが全く生かされないのが 悲しいと言えば悲しいですが、 HTMLの知識が無いので、 原因追及はもはや無理と判断したためです。 ...

コメントの投稿

非公開コメント

参考にさせて頂きました。

初めまして。
どうもリンク色の青が合わなくて、何とかならないかと検索していましたら
解決策が丁寧に紹介されており助かりました。
早速使わさせて頂きました。有難う御座いました。

Re: 参考にさせて頂きました。

はじめまして、Hiroさん。
トラックバックありがとうございます。
リンクの色、デザインをいじっているとやっぱり気になりますよね。
鮮やかな青すぎて何か浮いてる感じというか。
お役にたてたようで何よりです。

こんにちは!

はじめまして。困った事がほとんど解決出来て感動です!
順位の幅を24から20くらいに縮める事はかのうでしょうか?

Re: こんにちは!

はじめまして、kahorisさん。
結構前に書いたものなので忘れかけているのですが、順位は24px固定でとられているはずですので、
単純に「24→20」に置き換える行を置けばいいのではないかと思います。
本文「アクセス数の非表示」の項目で例示されているコードですと、
4~5行目の間に一行挿入して、以下のような感じです(真ん中の一行が追加分です)。
---
<script type="text/javascript" charset="utf-8">
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?24px/i,"width: 20px");
document.getElementById("ranking-page").innerHTML=document.getElementById("ranking-page").innerHTML.replace(/width:\s?111px/i,"width: 171px");
---

改善できました^^

初めてコメントさせていただきます。
ポイントサイトでお小遣い稼ぎのブログをFC2ブログで
書いているものです。
FC2ブログの人気ページランキングのタイトル行の
幅が変えたくてこちらのブログに辿り着きました。
無事に行の幅が変更できました!!(#^^#)

プログラミング能力が無い私でも、丁寧にプログラムの
解説を付けてくださってるので、なんとなく理解できました。
勉強になりました。
ありがとうございました^^

Re: 改善できました^^

はじめまして、ぽいんさん。
お役にたてて何よりです。
自分自身プログラミングに関しては「永遠の初心者」のようなものですので、
自分が後で見返したときに理解できるようにと
「考え方」のようなものも細かくメモしてみたのですが、
その甲斐があった?ようでよかったです。

参考にさせていただきました。

はじめまして。
FC2アクセスランキングを設置したものの、
思うように表示させることができず、
こちらのブログにたどりつきました。
 
全くHTMLのことがわからないので、
とりあえずブログパーツをそのまま貼り付けるだけでしたが、
丁寧に解説されていたので、
ワタシでも「ブログ・タイトルの非表示」ができました。
本当にありがとうございました。

Re: 参考にさせていただきました。

はじめまして、りふぃなさん。
お役にたてて何よりです!書いた甲斐がありました。
でもまあ本当は公式で簡単に設定できるのが一番だとは思うのですが…。
最新記事
最新コメント
Amazonおまかせリンク
カテゴリ
タグクラウド
Amazonお買い得ウィジェット
カレンダー
09 | 2017/03 | 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 31 -
月別アーカイブ
プロフィール

Author:電脳太助
Website:電脳スピーチ web

RSSリンクの表示
メールフォーム

名前:
メール:
件名:
本文:

サイト内検索
Ads by Google
FC2アクセスランキング
Ads by Google
FC2拍手ランキング
ユーザータグ

音楽管理(65)
ポータブル(57)
ソフト紹介(44)
プログラミング(42)
音声技術(41)
自作ソフト(34)
サイト運営(32)
FC2(31)
ブログ(30)
iTunes(26)
Windows(25)
LISMO(24)
音声合成(23)
音声認識(22)
x-アプリ(22)
電子ブック(22)
eラーニング(20)
バックアップ(19)
語学学習(19)
foobar2000(18)
ソースコード(17)
画像管理(15)
WindowsLiveWriter(15)
C++(14)
アフィリエイト(10)
DnspTools(10)
ウォークマン(9)
fi-6130(9)
FLAC(9)
Gracenote(8)
英語音読学習計画(8)
Prolog(8)
JavaScript(8)
ベクター(8)
雑記(8)
CodeBlocks(7)
SyntaxHighlighter(7)
TraConv(7)
wxWidgets(7)
spcbght(7)
DCP-J552N(6)
W63CA(6)
MP3Gain(6)
WinRT(6)
iGoinLM(6)
VirtualBox(6)
WindowsLiveMesh(6)
英語発音矯正実験(6)
ExactAudioCopy(6)
楽器演奏(5)
Mery(5)
LAME(5)
音楽技術(5)
GalateaProject(4)
LLVM(4)
nLite(4)
MIDI(4)
ホームページ(4)
WindowsLiveSkyDrive(4)
GalateaTalk(4)
PC-98(3)
カウンター(3)
AACGain(3)
iTCDini(3)
OverCutChecker(3)
拍手(3)
PK-513L(3)
UniversalExtractor(3)
アクセスランキング(3)
ImageCompositeEditor(2)
アクセス解析(2)
OCR(2)
qtaacenc(2)
資格試験(1)
AquesTalk(1)
AquesCmdDl(1)

FC2アクセスランキング
最新トラックバック
アクセスランキング
[ジャンルランキング]
コンピュータ
125位
アクセスランキングを見る>>

[サブジャンルランキング]
ソフトウェア
14位
アクセスランキングを見る>>
FC2カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。