【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!

その後、ウィジェットより、「【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';
}

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

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

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{
  max-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だと

このように、灰色のままです。