アフィリエイト広告を利用しています

▲一番上に戻る


サイト内検索

広告

posted by fanblog

2015年06月25日

ブログ記事のランキングを簡単に作る方法

こんばんわ、もんじです。

ブログをやっている皆さんは、どうやって人気記事のランキングを作っていますか?

ninkiRanking01.png

アナリティクスとにらめっこしながら手作業で作成?
大変ですね。

私もサイドバーを見てもらうとわかると思いますが、前月の人気記事ランキングを掲載しています。

でも実はこれって、ツールを使って作っているんです。

そのツールはこれ、その名も 人気記事ランキングめーかー です。

このツールを使うと、アナリティクスのデータを自動で集計してくれて、人気記事ランキングがあっという間に作成されます。

しかも出力結果は HTML で作成されるので、貼り付けるだけで良いという優れものです。

今回はこのツールの使い方をご紹介したいと思います。
(※以下、マウスカーソルが になる画像はクリックで拡大します)

スポンサードリンク


「人気記事ランキングめーかー」の使い方


以下のサイトにアクセスします。
人気記事ランキングめーかー

アクセスすると設定画面が表示されるので、各種設定を行っていきます。
Highslide JSまず【認証】ボタンを押下して、アナリティクスのユーザーID とパスワードを入力します。

Highslide JS次に【アカウントデータを取得】ボタンを押下します。

Highslide JSそうすと左画面のように、アナリティクスのアカウントが並びますので、ランキングを集計したいアカウントをクリックします。

Highslide JS次にプロパティの一覧が表示されますので、ランキングを集計したいプロパティをクリックします。

Highslide JS最後にビューを選択します。

Highslide JSこれで左画面のように、HTML 付きでランキングを表示してくれます。
簡単でしょ?

次に詳細設定の説明をします。


「人気記事ランキングめーかー」の詳細設定


Highslide JSまずは、集計の期間ですね。
左の枠が開始、右の枠が終了です。
私は前月のランキングを掲載しているので、前月の1日から31日を選択しています。

Highslide JS次に、ブログに訪問した「ユーザー数」で集計するのか、「ページビュー数」で表示するのかを選択します。
私は「ページビュー数」を選択しています。

Highslide JS次はランキングの表示数になります。
トップページなんかも集計対象として表示されてしまうので、余裕を持った数字に設定した方がいいと思います。
私はトップ10のランキングを表示したいので、15〜20を設定しています。

Highslide JS次からのコードの編集はマニアックな内容となりますので、HTML に詳しい人のみ設定して下さい。
よくわからないという人は、触らない方が良いでしょう。

マニア向けに簡単に説明すると、デフォルトでは以下のコードになります。


【スタートコード】は1行目の背景が赤の部分です。
デフォルトは「<ul>」になっています。

【エンドコード】は最終行の背景が赤の部分です。
こちらもデフォルトは「</ul>」になっています。

ここを好きなように変更可能です。

例えば、太文字にしたければ、【スタートコード】を「<ul><B>」、【エンドコード】を「</B></ul>」にしたりします。

【ループコード】は以下のコードの背景が赤の部分になります。



ここの変更はHTMLの知識だけでなく、プログラムの知識も少々必要ですので、頭の「<li>」以外はあまり触らないようにしましょう。

これらの詳細設定が終わったら
Highslide JS忘れずに【更新】ボタンを押下しましょう。

Highslide JS一番下にプレビューが表示されるので、想定通りに表示されているか確認しましょう。

Highslide JS最後の設定、【削除】ですが、これは消したい文字列を削除する機能になります。
例えば左画面のプレビューを見てもらえばわかると思いますが、ランキングとして記事名を表示するには「BFuture:」と「: BFuture」という文字列が邪魔です。
なので、この文字列を削除します。
カンマ区切りで一気に消すということは出来ませんので、「BFuture:」を削除した後に「: BFuture」を入力して削除します。

Highslide JS削除すると、左画面のプレビューを見てもらえばわかると思いますが、スッキリした形になりました。

以上でランキングの作成方法は終わりです。

プレビューがいい感じに出来たら、自分のブログにコードを貼り付けましょう!

でわでわ (´∀`*)ノシ

スポンサードリンク



タグ:ブログ
posted by もんじ at 18:54 | Comment(0) | TrackBack(0) | Web 関連
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/3847635
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
最新テクノロジー情報
最新記事
カテゴリアーカイブ
タグクラウド
プロフィール
もんじさんの画像
もんじ
前職はシステム開発の仕事でプロジェクトリーダーをやっていました。そこで疲れ果て、精神を病み、退職へ。今は前職で培った技術を元に、独立に向けて勉強中の身です。
運営者情報
×

この広告は30日以上新しい記事の更新がないブログに表示されております。