カテゴリ一覧から記事を探す

【SANGO】ブログの回遊率を改善!カテゴリ別人気記事&デザイン変更

【SANGO】ブログの回遊率を改善!カテゴリ別人気記事&デザイン変更

読者の悩み

  • 回遊率をもっと上げたい!
  • 人気記事ランキングのデザインを変えたい
  • カテゴリ別人気記事ランキングにしたい

今回の記事では、上記の悩みを解決するために、人気記事ランキングをカテゴリー別にして、デザインも変える方法を紹介します!

ランキングの数字を付けてスクロール可能なデザインを目指すよ!

カテゴリー別人気記事

1.カテゴリー別人気記事の作成方法

まず、カテゴリー別人気記事ランキングの作り方から。

やり方がSANGOとSANGO+PORIPUで違ってきます。

SANGOのみなら、ちょっと難しいので記事クリック率が劇的に上がる!SANGOの関連記事カスタマイズを見て実装して、デザインだけ参考にしていただければと思います。

今回は、SANGO+PORIPUの場合でしっかり説明していきます。

PORIPUの機能には、既にカテゴリー別人気記事ランキングを作るウィジェットが搭載されています。素晴らしい。

それを使用するには、WordPress Popular Postsというプラグインを有効化します。

STEP.1
プラグイン画面へ
WordPressのサイドバーより、プラグイン→新規追加
STEP.2
プラグインを検索
検索窓に「WordPress Popular Posts」を入力
STEP.3
インストール
今すぐインストールをクリック
STEP.4
有効化
有効化をクリックして、以下の画面になればOK!WordPress Popular Posts有効化

その後、ウィジェットより、「【PORIPU】カテゴリ別人気記事」を入れ込みたい場所に入れ込みます!

タイトルは「同じカテゴリーの人気記事」とでもしておきましょう。

これで、カテゴリー別人気記事の部分は完成です。

2.人気記事ランキングにランキングの番号をつける

人気記事ランキングの左上にランキングの番号をつけるために、CSSに追加していきます。

編集する箇所
外観
テーマエディター
style.css
CSS
/*人気記事にランキングを付ける*/
.my_popular_posts .my-widget li a:before {
  background: #ffb36b;
  width: 25px;
  height: 25px;
  line-height: 25px;
  display: block;
  margin-right: -15px;
  position: relative;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  z-index: 1;
}

.my_popular_posts .my-widget li:nth-child(1) a:before {
  content: '1';
}

.my_popular_posts .my-widget li:nth-child(2) a:before {
  content: '2';
}

.my_popular_posts .my-widget li:nth-child(3) a:before {
  content: '3';
}

.my_popular_posts .my-widget li:nth-child(4) a:before {
  content: '4';
}

.my_popular_posts .my-widget li:nth-child(5) a:before {
  content: '5';
}

私はアイキャッチ画像を横長にしているのですが、ざっと調べたところ、正方形の場合でもうまくいくはずです。

人気記事数が5でない場合

また、人気記事の表示数を6以上にした場合は、例に習って以下のCSSを追加してください。

CSS
.my_popular_posts .my-widget li:nth-child(6) a:before {
  content: '6';
}

.my_popular_posts .my-widget li:nth-child(7) a:before {
  content: '7';
}
.
.
.

逆に5記事も表示してない場合は、その順位の部分は消してもOKです。

順位ごとに色を変える方法

1位はこの色で、2位はこの色で・・・というのがしたい場合は、以下のように直してください。

CSS
.my_popular_posts .my-widget li:nth-child(1) a:before {
  content: '1';
  background-color: #ddd;/*1位の色はこれに*/
}

これを2,3・・・と続けるだけです。

1,2,3位を同じ色にして、4位以下を灰色などの別の色にしているサイトをよく見かけます。

3.追尾サイドバーが全部見えるようにする

人気記事ランキングを追尾サイドバーに入れている人も多いはずです。

人気記事ランキングでなくとも、以下の画像のように、一番下まで見えない・・・なんてことになっているかもしれません。

追尾サイドバーが全部見えるようにする

5位より下になにかあるのでは・・・と思っても、一番下までガンガンスクロールしていかなければ見ることができません。これはめんどくさい!

これをスクロール可能にすることで、一番下までスクロールせずとも見れるようにします。

CSS
/*人気記事をスクロールできるように*/
.my_popular_posts ul{
  height: 70vh;
  overflow-y: scroll;
}

これでスクロール可能にします。

高さはheight: 70vh;で、PCの画面の高さの70%という意味です。
変になる可能性もあるので、各自で調整していただければと思います。

4.スクロールバーのデザインを変更する

最後に、スクロールバーのデザインを変更します。

今のままでは灰色で味気ないので・・・。

以下のCSSを追記で完了です!

CSS
.my_popular_posts ul::-webkit-scrollbar{
  width:10px;
}

.my_popular_posts ul::-webkit-scrollbar-thumb{
  background-image: repeating-linear-gradient(-45deg, #fedbf1, #fedbf1 4px, #F8BBD0 4px, #F8BBD0 8px);
  border-radius: 0px;
}

.my_popular_posts ul::-webkit-scrollbar-track{
  background: #fff;
  border-radius: 0px;
  box-shadow: inset 0 0 1px #F8BBD0;
}

このままでは色がピンクなので、background-image: repeating-linear-gradient(-45deg, #fedbf1, #fedbf1 4px, #F8BBD0 4px, #F8BBD0 8px);の部分をデザインに合うように変えてください。

ちなみに、Chromeでしっかりと動作しますが、一部のブラウザでは動作しません。

例えばfirefoxだと
firefoxでのスクロールバー
このように、灰色のままです。

ここは諦めるしかないですね・・・。

とはいえ、ここのデザイン1つで大きく変わるわけでもないでしょうし、きちんと機能は保たれているので大丈夫でしょう!

5.まとめ

回遊率を上げるために「現在のカテゴリーの人気記事ランキング」にして、デザインを変更する方法を解説しました。

カテゴリーページへのPVも若干増えてきましたので、このようなランキングの需要は確実にあるはずです。

皆さんもぜひやってみてください!