INTEREST

「 ＡＣＲ ＷＥＢ 」 - CGIレンタルサービス・ブログパーツなど

---

【ＡＣＲ ＷＥＢのページランキング】

1. 1.ページランキングの新規登録
2. 2.ログインして各種設定をする
   • 2-1.「タイトル自動設定」
3. 3.タグをブログ内に貼り付ける

---

1.ページランキングの新規登録

まずは「ＡＣＲ ＷＥＢ」のトップページ左上にある「ページランキング」をクリックして「ページランキング新規登録」の項目を入力します。



「ページランキング新規登録」を行うと、登録したメールアドレス宛にすぐメールが届き、そのメール内に管理画面のURL等が記載されてます。
※すぐにメールが届かない場合は、迷惑メールフォルダ等を確認してみて下さい。

---

2.ログインして各種設定をする

上記の手順で届いたメールから、管理画面にログインして各種設定を行います。
※ここからはこのブログでの設定になるので、各項目の詳しい説明は「マニュアル 」をご確認下さい。

まず、管理画面にログインすると右の画像のような画面になり、ここで「環境設定」を行います。 パッと見だと設定項目が多く面倒に思うかもですが、大まかに言うと表示する色と横幅を設定するだけで大体OK

このブログでは以下の項目を初期状態から変更しました。

【タイトルサイズ】 変更前：空白　→　変更後：0 （非表示）
【奇数順位背景色】 変更前：#AAEEAA　→　変更後：#333333
【偶数順位背景色】 変更前：#CCFFCC　→　変更後：#3c3c3c
【表ライン色】 変更前：#44AA44　→　変更後：#222222
【項目名最大長さ】 変更前：空白　→　変更後：0（全て表示）
【表全体の幅】 変更前：空白　→　変更後：234px
【順位部分の幅】 変更前：空白　→　変更後：15px
【アクセス数部分の幅】 変更前：空白　→　変更後：0 （非表示）
【TOPページに○位まで表示】 変更前：10位　→　変更後：6位


変更箇所の補足
タイトルは後の手順の「プラグイン名」で表示するので、ここのタイトルは非表示にする為に【タイトルサイズ】の項目に“0”を入力してます。
※タイトルが非表示なら、タイトルの背景色と文字色は変更無しでもOK

【表全体の幅】はサイドメニューの幅に合わせて「234px」としてます。 空白だとテキストの長さに合わせて表の横幅が広がるようなので、ここは表示位置に合わせて調整した方が良いと思います。

【TOPページに○位まで表示】の部分は初期状態の10位まで表示にしようか悩んだけど... 各記事ページで「このページの目次」と一緒にサイドメニューに固定表示にしたくて、ちょっと削って中途半端な “6位” まで表示にしました...ｗ（どうしても気になったら後々また変更します... ）

以上、「環境設定」への入力が完了したら、そのページの下部にある「送信する」をクリックします。
※「環境設定」は後で何度でも変更出来るので、最初は “とりあえずこんな感じかな？” でOKですｗ

---

2-1.「タイトル自動設定」

「管理画面」のページ上部には、各種設定をする為にボタンがいくつもありますが全てに何かしら設定が必要って訳じゃないので、次は「置換設定」と「除外設定」を飛ばし「タイトル自動設定」を行います。

これをやっておかないと、ランキング表示がページのタイトルでは無く、URLで表示されてしまいます。

URLでの表示では無く、ページのタイトル名で表示する為には「置換設定」または、この「タイトル自動設定」が必要になるのですが「置換設定」だと1件ずつ登録する事になり手間なので「タイトル自動設定」からやっちゃいます。（表示するページタイトルを個別に設定する場合などは「置換設定」で行う）

ここでワンポイント
「タイトル自動設定」はRSSを読み取って、処理を行うのでFC2ブログの場合「管理画面」の「環境設定」から「ブログの設定」をクリックして下記の画像のように “RSSの設定” の件数を先に増やしておいてから「タイトル自動設定」を行うと、一気にページタイトルを取得出来るので手っ取り早いです。


このブログの場合、記事の総数が50件も無いけど... とりあえずキリよく50件にしましたｗ


上記の設定を行ったら、「ＡＣＲ ＷＥＢ」の管理画面から「タイトル自動設定」をクリックします。
すると以下のような画面になるので「RSSファイルのURL」を記入します。

RSSファイルのURLには、このブログの場合「http://interest2014.blog.fc2.com/?xml」と記入
「 ブログのURL ＋ ?xml 」（このURLは上記のFC2ブログの「RSSの設定」部分でも確認出来ます。）

その他のブログの場合は管理画面等で確認して下さい^^; （URL ＋ 「.rss」「.rdf」「.xml」等）




上記の通り「RSSファイルのURL」を記入して「設定」をクリックすると、以下の画像のようにタイトル反映処理が行われます。（このブログの場合、この1発で全ての記事ページのタイトルを取得ｗ）


※全て載せるとすごく縦長の画像になるので途中で切って、省略してますｗ

以上の手順が完了したら、ページ上部の「ランキングの手動更新」をクリックします。
すると「更新作業が終了しました」と表示されるので、これで表示結果に反映されるようになります。

また、記事ページ以外のトップページやカテゴリページ、全記事一覧ページ等もページタイトルで表示する場合は、個別に「置換設定」で設定すればOKです♪

上記の手順で大部分のページはタイトル名で表示されるようになってると思うので、必要に応じてちょっとだけ個別に設定すれば良いと思います♪

---

3.タグをブログ内に貼り付ける

ページランキングの表示位置によって、タグの貼り付け場所は異なるのですが、このブログではFC2ブログの公式プラグイン追加で「フリーエリア」を新たに追加し、その中にタグを貼り付けました。

まずは上記の説明の通り、新しく「フリーエリア」のプラグインを用意しておきます。
そして「ＡＣＲ ＷＥＢ」の管理画面からページ上部にある「タグ取得」をクリックします。
すると以下のような画面になるので、その中の「ランキング表示用タグ」をまずはコピーして、プラグインの「フリーエリア」に貼り付けます。

次に「カウント取得用タグ」ですが、このタグを貼り付けた位置には小さい「ＡＣＲ ＷＥＢ」のバナーが表示されます。また、貼り付け位置は全てのページで共通して表示される部分ならどこでもOKなので、ランキングの表示位置とは別のプラグインや、ブログのフッター（ブログの最下部）等でもOKです。

※以下の画像では「ランキング対象となるページ全てに貼り付ける」と記載されてますが、全てのページで共通して表示される部分に貼り付ける場合は、一箇所にタグを貼り付ければOKです。

このブログでは、とりあえずランキングのすぐ下に貼り付けました。（後々変更するかもです...ｗ）




このブログでは、上記の通り「フリーエリア」にそれぞれのタグを貼り付け、さらに「ランキング表示用タグ」を以下のように「<div class="popular"> ～ </div>」で囲いました。
そして「スタイルシート編集」に「div.popular table td{padding:2px 5px}」の1行を追加してます

※ランキング表示の際に表の中に余白が無く、枠線にページタイトルがくっ付いてる感じが嫌だったので、スタイルシートで少し余白を取ってます。（まぁここはお好みでって感じですねｗ）

※HTMLの部分を分かりやすく改行してます。
※表の余白を調整する必要が無い場合は「<div class="popular">」と「</div>」は必要ないです。

以上の状態で「フリーエリア」の「設定」をクリックし保存したら設定は完了です。
あとは実際の表示を確認して微調整を行えばOKだと思います♪

※アクセス数でのランキングなので、設定直後はアクセスが無く正常にページランキングが表示されず “PR（広告）” 部分だけが表示されたりします。

※ページランキングの表は、約60分置きに自動で更新されアクセス数順に並び替えがされます。
また「LastUpdate」の日時には、その更新された日時もしくは手動で更新した日時が表示されます。

※「ＡＣＲ ＷＥＢ」のページランキングの説明にもありますが「アクセス解析とは違う方法でカウント」との事なので、実際のアクセス数とランキングの表示が異なる場合があるようです。

以上、ブログ内の人気記事ランキングを表示する方法でした♪