【Cocoon】人気記事ランキングの設定方法とカスタマイズ

こんにちは、yuji（@yujiblog）です。
このブログでは、WordPressとアフィリエイトのノウハウを解説しています。

ブログ初心者なりに、サイドバーに表示する人気記事ランキングをおしゃれにデザインしたいです。

以上のような、ブログデザインについての要望にお答えします。

このブログではWordPressテーマのCocoonを使っていますが、サイドバーの人気記事ランキングは以下のようなデザインにしています。

このように人気記事は読者が興味を持ちやすく、クリックしてくれる確率が高いです。

この記事では、以上のようなCocoonの人気記事ランキングを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。

※ブログ収益化を目指している方には、WordPress有料テーマの利用をおすすめしています。詳しくは以下の記事をご覧ください。
》おすすめWordPressテーマ15選

【2024年】おすすめWordPressテーマ15選【初心者向けランキング】

目次をチェック

人気記事ランキングの設定方法
「カスタマイズが上手くいかない…」と感じる方へ
- 多くの人に読まれる記事を書こう
- アフィリエイト神ツールを使いこなそう

人気記事ランキングの設定方法

Cocoonの全体的な基本設定がまだの方は、以下の記事をご覧ください。
》Cocoonの使い方とおすすめ初期設定

ウィジェット設定

まずはブログに「[C]人気記事」を表示します。

１．WordPressメニューの「外観」から「ウィジェット」を開きます。

２．左側に並んでいる一覧の中から「[C]人気記事」を選択し、「サイドバー」にチェックを入れて「ウィジェットを追加」をクリックします。

※「ウィジェット管理画面が違う…」という方は以下で操作画面を設定してください。
》WordPress5.8以降でウィジェット画面をもとに戻す方法

３．「タイトル」で実際に表示させたい表記（例：Popularなど）を入力します。

タイトルの例

表示モード
：カテゴリ別人気記事（投稿・カテゴリで表示）
人気記事のタイトル
：Popularなど
表示数（半角数字）
：5
表示タイプ
：デフォルト
集計期間
：全期間

４．続いて「除外投稿ID」「除外カテゴリーID」の設定で、表示しないカテゴリーを選択します。

５．次に「表示設定」をクリックすると新しい入力欄が出てくるので、以下のように設定します。

表示設定

ウィジェットの表示
：チェック・入力したページで表示
カテゴリータブ
：すべてのカテゴリーを選択
ページタブ
：投稿のみ選択

その他の項目は、必要に応じて自由に変更しましょう。以上のように設定できたら「保存」をクリックしてください。

６．最後に、サイドバーの枠の中で「[C]人気記事」をドラッグして好きな順番に配置します。

７．サイドバーのコンテンツが整いました。これでウィジェット設定は完了です。

８．これでサイドバーに人気記事ランキングが表示されるようになりました。

スタイルシートにコードをコピペする

１．「外観」から「テーマファイルエディター」に進み「Cocoon Child: スタイルシート (style.css)」を開きます。

２．スタイルシートに以下のコードをコピペしてください。

スタイルシートに入力するときの注意点

編集前に必ずスタイルシートのバックアップを取る
編集するテーマが「CocoonChild」になっていることを確かめる
「@charset “UTF-8”;」から始まる部分（最初から入力されている内容すべて）は消さずに下に追記していく

/************************************
****　サイドバーブログカード
************************************/
.sidebar a.popular-entry-card-link.a-wrap{
margin:0;
padding:0;
}
.sidebar figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb{
margin:.5em 0em .5em .2em;
}
.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{
padding:.5em .5em .5em .8em;
text-align: justify;
line-height:1.3;
}
.sidebar .popular-entry-cards.widget-entry-cards.no-icon.cf {
margin-bottom: 0;
}

※以上のコードに、サイドバーのカスタマイズ記事で紹介しているコードを組み合わせて完成です。
》サイドバーのカスタマイズはこちら

３．コピペができたら「ファイルを更新」をクリックします。