記事一覧

【FC2ブログ】人気記事ランキングを無料で導入する方法


thumbnail-entry-24.jpg

こんにちは。

今回の記事は、

今まで自分が書いてきた各記事のアクセスランキングを

サイドバーに表示するという内容です。


思い通りの形になるまで少し手間取り、時間がかかったので、

以下の複数の参考サイトを参照させていただきながら、

行わせていただきました。(各サイトの管理者の皆様、ありがとうございます。)


よろしければ、お読みになる前に
以下クリックをお願いいたします。
 ↓↓↓
にほんブログ村 海外生活ブログ 外こもりへ
にほんブログ村


目標はこんな↓感じにすることです。

ar-20151125-23.png



 環境 

以下の環境の方はスムーズにできる(はず)です!
  1. FC2ブログ

  2. HTMLテンプレート「basic_white」(2015年11月時点のもの)

  3. ランキング表示ツールに「ACR WEB」利用




 参考リンク 
  1. FC2ブログで人気記事ランキングを表示する | 0822の奇跡

  2. 人気ページランキングの設置方法(ACR WEB) | 夢を叶える歩き方

  3. PVアップ!?ACR WEBページランキングに画像を表示させる方法 | 横浜ピアノ教室 福田音楽教室 Webサイト管理人のブログ



 手順 
  1. ACR WEBのサイトにてユーザー&ブログ登録

  2. ACR WEBの環境設定とサイトへの組み込み

  3. ページランキングにサムネイルを表示させる



1. ACR WEBのサイトにてユーザー&ブログ登録


今回記事ランキングを表示させるためのツールとして選んだのが、

ACR WEB』から提供されているページランキングの無料CGI。


まず、このCGI紹介のページに行き、

以下の流れでご自身のユーザー&ブログ登録を行います。



ACR WEBのトップ画面から「ページランキング」をクリック

ar-20151125-01.jpg


画面の下へ行くと、以下のような申し込みフォームがあるので、

必要事項を入力して下さい。入力したら「利用規約に同意し申し込む」をクリック。

ar-20151125-02.jpg

メールアドレス・・・・・任意のEmail
URL・・・・・設置予定のブログURL
希望するユーザID ・・・・・ACR管理画面に入るための任意のID
希望するパスワード・・・・・ACR管理画面に入るためのパスワード
サイトのジャンル・・・・・そのまま


しばらくすると、さきほど入力したアドレスに以下のメールが届きまので。

以下のURLリンクをクリックしてください。

ar-20151125-03.jpg


この後は上で設定した、IDとパスワードで管理画面に入り、

詳細の設定をしていきます。




2. ACR WEBの環境設定とサイトへの組み込み


管理画面に入力後、「環境設定」画面でご自身のブログのデザインに合うよう

設定を変更してください。

※私の場合、以下画像内の「文字コード」部分を
shift_jisに変更しないとうまく表示されませんでした!!


ar-20151125-04.jpg


次に、画面上部の「タイトル自動設定」ボタンをクリックし、

RSSファイルのURLの部分に、ご自身のブログのURL/?xml

を入力し、設定ボタンをクリックします。

ar-20151125-05.jpg

そうすると以下の通り、下部のタイトル反映処理に

ご自身のブログの内容が反映されます。

ar-20151125-06.jpg


ここまでやったら、最後に画面上部「ランキングの手動更新」をクリックします。

ar-20151125-18.jpg


そして最後にHTMLに貼り付けるためのタグを取得します。

画面上部の「タグ取得」をクリックし、以下の2つのピンク枠内のコードを

連続させた形でFC2ブログのフリーエリアの内容に貼り付けます。

ar-20151125-19.jpg

ar-20151125-07.jpg


※念の為、以下はフリーエリアの作成方法↓

FC2ブログの管理画面の左メニュー「設定」内の「プラグインの設定」をクリックします。


PC用 「公式プラグイン追加」をクリックします。
(既存のプラグイン「最新記事」のHTML部分をカスタマイズする形でもできるみたいですが、私のやり方がマズかっただけだと思いますが、それではなかなかできなかったので、今回は新たにプラグインを作成する形でいきます!)



画面をスクロールし、(大体)中央部分に拡張プラグイン「フリーエリア」という項目の右側の「追加」ボタンをクリックします。


以下画面の1と2の部分を変更します。
ar-20151125-20.jpg
1. 「人気記事」に修正
2. 以下のように、上記で生成したタグを連続させたもの



ブログパーツ





※このCGIを導入する前に書いた記事については

システムがタイトルを取得できず、ランキング結果表示上、URLの表示になります。

これはかなり見にくく、クリックされるはずがありません。


その場合、置換設定で「タイトルを取得していない記事」のURLを入力しなければいけません。


ページランキングリストに、サムネイルも追加したい場合は、
ここを飛ばして、手順3に進んでください。(2度手間になります!!!)


画面上部「置換設定」をクリックします。

ar-20151125-21.jpg

そして、

ランキングに表示されているURLを「置き換え前のURL」と「置き換え後のURL」の両方に入力し、

「置き換え後のタイトル」にはその記事のタイトルを打ち込みます。

ar-20151125-22.jpg



3. ページランキングにサムネイルを表示させる


画面上部「置換設定」をクリックします。

ar-20151125-21.jpg

そして、

ar-20151125-22.jpg


ランキングに表示されているURLを「置き換え前のURL」と「置き換え後のURL」の両方に入力し、

「置き換え後のタイトル」には、

入れたいサムネイルのURL + その記事のタイトル

例)<img class="hidari" src="http://blog-imgs-85.fc2.com/m/e/m/memorandums7/thumbnail-entry-1.jpg" width="100" height="100">世界で今流行りの最新サービスやプロダクトがわかるサイト!

を打ち込みます。


上述で指定したクラス "hidari" は、

サムネイル画像右に表示されるタイトルの周りこみがおかしかったので、

以下のような指定をCSS内に追記したものです。


.hidari {
float: left;
}





結果このようになりました!!


ar-20151125-23.png


どうでしょうか!?

以上です。
関連記事

コメント

コメントの投稿

非公開コメント

検索フォーム

スポンサーリンク

最新の投稿記事

自己中心的思考と労働生産性の関係 Dec 09, 2018
フィリピンと日本の子育ての違い Nov 24, 2018
パロキヤニエドガー 〜Parokya ni Edgar〜 Nov 03, 2018
フィリピン人妻と喧嘩になるくだらない原因と解析-002- Nov 03, 2018
フィリピン人妻と喧嘩になるくだらない原因と解析-001- Nov 03, 2018

人気記事

ブログパーツ

スポンサードリンク