【Cocoon】人気記事をいろんな期間に分けて表示するページの作り方と作るべき理由

ブログ歴15年、Wordpress歴8年のLeoです。

今日は、LEOLOGで実装している”おすすめ”の固定ページ、「人気記事一覧」についての話をシェアします。

ブログ初心者
ブログの継続にモチベーションが上がらない人
どんな記事を書いたら読まれるか悩んでる人

[affi id=2]

記事内すっとばせます！

人気記事一覧を作る「メリット説明」だけ見たい方はこちらへ
ページの「作り方」だけ見たい方はこちらへ

それぞれジャンプして下さいね✌️

MoKuJi

Twitterの延長線上でブログを始めたい人
- Twitterとブログの関係
実は重要！人気記事一覧を設置するメリット
- 期間ごとに分けた人気記事を設置するメリット
人気記事一覧を設置する方法
- 人気記事のショートコード
- LEOLOGの設定（コピペ用）
まとめ・総括

Twitterの延長線上でブログを始めたい人

ブログをやってみたいんですけど、どんなこと書けばいいかな？

はじめてみたんですけど、書くことに困っています

最近若い方からブログを始めたいという相談を受けることが増えているのですが、多くの方が”ふわっ”としたイメージしか持っていないんですよね。

ボクの印象では、「Twitterの延長線上」という感覚を感じます。

Twitterの延長線上？

そうです、

Twitterは、140文字で考え、感情、写真などをサクッと投稿できる訳ですが、サービス開始当初は「簡易版ブログ」とも呼ばれてました。

つまり、扱いというか、イメージはさっと、手早く投稿できるバージョンのブログだったんですよね。

それが、今の若い世代はTwitterから入って、Twitterじゃ不足というか、もっと表現したいとか、もっと色々発信したいと思ってブログをやってみたくなるという方向だと思います。

Twitterとブログの関係

↑Twitterが始まった頃のイメージはこんな感じです。ボクも2010年からTwitterを始めましたが、すでにブログをやっていたので、「簡易版ブログ」という認識で始めました。

これが今の若い子のイメージ。

Twitter（やInstagram）は「みんなやってるから」などの理由から始めていて、そこからもう少し多くの発信、表現を求めてブログに興味を持つ方が多いと思います。

Twitterも履歴は残りますが、どこか”使い捨て”というか、呟いてからの鮮度は即座に落ちていくイメージがありませんか？

一方ブログは”資産”として構築していくことができるんですよね。

もちろん情報はどんどん古くなっていくものも多いですが、リライト（加筆・修正）ができるので例えば築年数がかさんできた家でもリノベで生き返るような感じで一度作り上げたらずっと財産的に維持できるという要素があります。

この辺りに気づいてか気付かずか、

Twitterに慣れた若い世代の中からブログに興味を持つ人が最近増えていて、

ボクも始め方とか色々相談をされるんですけど、

多くが継続という課題にぶち当たっています

実は重要！人気記事一覧を設置するメリット

そこで「人気記事一覧」です。

LEOLOGではサイドバーに過去7日の人気記事を表示させています。

そもそも論ですが、人気記事を紹介するメリットは、ブログ訪問者にいろんな記事を読んでもらえることだと思います。

多くの訪問者は検索であなたのブログにやってくるハズです。

例えばこのブログで今一番読まれている記事は「大阪に本社がある企業をまとめてみた！」という記事ですが、

あたりで検索すると多分1位か悪くても1ページ目に出てくるハズです。

ユーザーは何らかの理由で大阪にある大企業を知りたい訳ですが、その人たちはLeo Miyanagaが書いていることはどうでもいいんですよね。残念ですが。

でも、

せっかく来てもらったんですから、Leo Miyanagaが書いている他の記事だって見て欲しいやん？ってことです。

他の記事だって見て欲しいやん？！！

大事なことなので、2回言いました

おそらく多くのブロガーさんが同じ想いなのでほとんどのブログに人気記事一覧は設置されていると思う訳ですが、

ボクはそれをさらに深めたって感じです。

期間ごとに分けた人気記事を設置するメリット

以下で紹介する「人気記事一覧ページ」の設置方法では、期間の縛りにバリエーションを持たせる形で「1週間」、「月間」、「3ヶ月」、「年間」、「全期間」、「今日」と6パターンで人気記事を抽出させています。

なぜかというと、

先ほどTwitterは鮮度が落ちるのが早いと書きましたが、ブログでも記事内容によっては鮮度が落ちるものがあり、季節だったりタイミングだったりで読まれる記事に差が生まれます。

例えば、以下は今週のトップ10（左）ですが、車関連の記事にアクセスが多いです。

縦に長くてすみません（笑）。

一方こちらは7月4日のトップ5記事です。約2週間前はユニバの年パス・ライトに関する記事が2位に入っていますよね？

でも、今週のトップ10には入っていません。

つまり、2週間前にはこの記事の需要があったものの、需要が落ち着いたと考えられます。

ユニバは6月中旬に営業再開という出来事があったのでタイミング的に納得ですが、一方で先ほどのスクショ、右の方が月間ランキングなのですが、そちらではまだ8位に年パス・ライトのネタが鎮座しているのがわかります。

このように、時期をわけて人気記事一覧を抽出することで瞬間的な需要と、中期・長期的な需要を見極め、どんな記事を書くと読まれるかとか、どんな記事が人気かとかを分析できるというメリットがあります。

また、以上は運営側のメリットですが、ユーザー側にとっては、

「この人どんな記事書いてるんだろう？」

と思った時に、最近の動向と過去に遡っての動向が読めるのはよくないですか？

例えば留学を考えている人がいるとして、留学者のブログを探します。

このひとのブログ面白いな

ってなったとするじゃないですか？でも、同時にきっと、

いつから留学してるんだろう？

とか、いつまで？何を勉強してる？日本はどこ出身？とか色々気になるハズです。

そして、その筆者の人となりを知る上でどんな記事を書いていて、どんな記事がよく読まれているかは重要なポイントなんですよね。

もう一度ボクの人気記事リストに戻ります。

ボールペンのネタ、車のネタ、Nespressoの記事などが読まれているのがわかります。

一見して、どんなことを書いている人かイメージがつかめるくないですか？

車が好きで、ペンにこだわってる感じの人かな？

的な、まあ何でもいいんですが、人気記事を見たら書いている人のイメージが持てるんですよね。

そして、それら記事一覧を「自分も読みたいと思うか」という自問自答につながります。

ブログをやる上で大きな狙いのひとつは、「読まれること」に他ならない訳ですが、ワンタイムの読者が多くなるのは仕方ないこととして、でも、何とか定期購読者、つまり

あなたのファン

を作ることを目指すべきなんですよね。

この人のブログ面白いな〜、ブックマークしとこっ♡

↑こういう行動をどれだけ作れるかは大事です。

人気記事一覧を作ることのメリットは、そこに結びつけるための布石になり得るという面も大きいとボクは思っています！

ここまでのまとめ

人気記事一覧は自分がブログ状況を把握するために役立つ
期間別で設置することで読まれる記事の傾向を多角的に把握できる
ユーザー目線でも筆者を知ったり、書かれている記事を知れるという効果アリ

まとめると以上の利点からボクは人気記事一覧は重要なコンテンツだと思っています。

そんなわけでボクはこの人気記事一覧ページは毎日何度も見ます！

ちなみに….

Google Search Consoleも使おう

ユーザーがどんな検索キーワードでブログにやってきているかを知るにはGoogleのSearch Console（サーチコンソール）というサービスを使う方がより精度が高いことがわかります。

👆サーチコンソールの画面ですが、ここを見ると「クエリ」と言って、クリック数やGoogleでの掲載順位などが知れます。

問題点は、これはGoogleでの検索に限定されること。

日本では「ググる」という言葉が浸透している一方で、Yahoo!Japanでの検索利用もかなり多いため、Googleの結果だけで全て理解したつもりになるのは微妙です。

なので、両方の情報を元に、

今どんな記事にアクセスがあるの？
今週・月間・全期間など変動はどんな感じ？
クリック率はどう？

などの情報を検証し、より良いブログに育てるヒントにしましょう！

人気記事一覧を設置する方法

さて、それではCocoonにおいて人気記事一覧ページを設置する方法を紹介しますね。

まずは、ブログ記事を書く「投稿」ではなく、「固定ページ」から新規作成します。

投稿画面自体は同じ構成ですのでいつも記事を書く状態と同じです。

目指す結果

投稿画面を最終的にこんな↑感じにすれば完成です。

Cocoonは無料テーマなのにマジで親切で、これ、一瞬でできるんですよね。本当にありがたい。

まず、空の本文エリアに「Cocoonレイアウト」の中から「2カラム」をぶち込みます。

するとこんな画面になる訳ですが、あとは上の完成図のようにショートコードを入れたら完成！

LEOLOGの設定（コピペ用）

<p style="text-align: center;">リスト上部のコメントなど</p>
<div class="column-wrap column-2">
<div class="column-left">
<h3>Weekly -週間-</h3>
<p>[popular_list days="7" rank="1" pv="1" count="10" type="large_thumb_on" cats="all"]</p>
</div>
<div class="column-right">
<h3>Monthly -月間-</h3>
<p>[popular_list days="30" rank="1" pv="1" count="10" type="large_thumb_on" cats="all"]</p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3>3 Months -3ヶ月-</h3>
<p>[popular_list days="90" rank="1" pv="1" count="10" type="default" cats="all"]</p>
</div>
<div class="column-right">
<h3>1 Year -1年-</h3>
<p>[popular_list days="365" rank="1" pv="1" count="10" type="default" cats="all"]</p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3>All-time -全期間-</h3>
<p>[popular_list days="all" rank="1" pv="1" count="20" type="default" cats="all"]</p>
</div>
<div class="column-right">
<h3>Today -今日-</h3>
<p>[popular_list days="1" rank="1" pv="1" count="20" type="default" cats="all"]</p>
</div>
</div>

ボクは瞬間的なアクセスを知りたいという理由から「今日」のリスト表示数を20にしています。合わせて全期間についてももう4年の歴史があるブログですからリストを長くしておこうということで同じく20にしています。

その辺は自分の好みで設定変更して使って下さい。

また、ボクはH3で見出しを作っていますが、ここら辺も分かる方は各自いじっていただいて大丈夫なポイントですね。

LEOLOGの最新版はちょっと変わりました

このブログの人気記事一覧ページをさらにデザインを変更しています。

今回紹介したカスタマイズよりさらに要素が多いのでここでの紹介は割愛させていただきますが、以下、両パターンをよかったら見比べて見て下さい！

旧デザインはこちら

最新デザインはこちら