【Cocoon】コピペOK!初心者向け『人気記事ランキング』のカスタマイズ

Cocoon カスタマイズ 初心者 人気記事ランキング
キップム
キップム

サイドバーの『人気記事ランキング』、このブログみたいなデザインにしたいんだけど… どうしたらいいのかな??

yoko
yoko

今からコピペだけで簡単にカスタマイズできる方法を紹介するから、ぜひ試してみて。

キップム
キップム

わぁ、ホントに!?ありがとう〜
早速、やってみる♪

スポンサーリンク

この記事はこんな人にオススメ

  • 「人気記事ランキング」をおしゃれにカスタマイズしたい人
  • Cocoonユーザー

この記事を読めば、できること

下記画像(2枚目)のようなデザインに「人気記事ランキング」をカスタマイズできる!

ちなみにCocoonデフォルトのデザインはこんな具合で、

Cocoon「人気記事ランキング」デフォルトのデザイン

カスタマイズ後のデザインはこんな感じ。

Cocoon「人気記事ランキング」カスタマイズ後のデザイン
yoko
yoko

形やサイズ、余白を調整し、柔らかくスッキリとした印象のデザインにしてみたよ。

*今回は、見出しデザイン(Popular postsの部分)のカスタマイズは含まれていないのでご了承を。

カスタマイズの大まかな流れ

簡単にまとめるとカスタマイズの手順は、3ステップ!

人気記事ランキングをサイドバーに表示する
スタイルシートにコードを追加する
デザインを確認する

さっそくの方法から順番に解説していきたいと思う。

1 人気記事ランキングをサイドバーに表示する

1. Cocoon管理画面の「外観」から「ウィジェット」を開く

2. 利用できるウィジェットの中から「〔C〕人気記事」を、サイドバーボックス内にドラッグ&ドロップで移動する

3. 表示の順番は、ドラッグ&ドロップで簡単に並べ替えができる

4. 右端の▼をクリックすると設定メニューが開く。表示方法をお好みで設定したら、右下の「Save」をクリックする

人気記事ウィジェットの設定メニュー
– 設定できる項目 –
  • 表示モード 
  • 言葉どおり、表示モードが選べる
  • 人気記事のタイトル 
  • ここで指定したタイトルがランキングの上部に表示される
  • 表示数
    人気記事を上位何記事、表示させるかを設定できる
    あまり多いとサイドバーの場所をとってしまうので、5件程度がおすすめ
  • 表示タイプ
  • 表示する投稿タイプを5種類から選ぶことができる
  • 写真マークをクリックすると表示イメージを確認できる

    集計期間
    集計対象期間を設定できる
    ブログを始めたばかりなら全期間、最新の人気記事を表示させたい場合は
    期間を短く指定するなど使い分ける
    とよさそう
  • ランキング表示・PV表示・タイトルを太字にする・矢印表示
  • 表示させたい場合は、□にチェックを入れる
  • 除外投稿ID
    人気記事として表示したくない記事があれば、投稿ID(*1)を入力する
  • 除外カテゴリーID
  • 人気記事として表示したくないカテゴリーがあれば、□にチェックを入れる
  • 表示設定
  • ウィジェットの表示を制御できる 
  • 詳しい設定方法はCocoon公式サイトのコチラの記事へ

*1 投稿IDの確認方法

1. 「投稿一覧」を開く
2. IDを確認したい記事のタイトルにマウスポインターをあてる
3. 画面下部にURLが表示される。「post=」の後の数字が投稿IDになる

投稿IDの確認方法
キップム
キップム

ランキング表示にチェックを入れないと順位が表示されないので、
必ずチェックしてね!

5. 以上でウィジェット設定は完了なので、サイドバーに人気記事ランキングが表示されているかを確認する

2 スタイルシートにコードを追加する【コピペOK!】

スタイルシートに入力する前の注意点!
  • 編集前にスタイルシートのバックアップを必ず取る

  • 編集するテーマが「CocoonChild」になっていることを確認する

  • 「@charset”UTF-8”;」から始まる部分(最初から入力されている内容)は消さずに下に追記していく

  • 当ページによるデザイン崩れなど、動作不良があっても責任を取ることはできないのでご了承を

ここからは、コードの追加方法を紹介していきたいと思う。

1. 「外観」から「テーマエディター」を選択

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

コードを貼り付けるスタイルシート

コードはこちら。

/************************************
** 人気記事ランキング表示のカスタマイズ
************************************/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
	 border-radius: 50%; /*丸にする*/
	 top: -4px;  /*丸の位置上に*/
	 left: -4px;  /*丸の位置左に*/
	 width: 14px;  /*丸のサイズを小さく*/
	 height: 14px;  /*丸のサイズを小さく*/
	 font-family: 'Lato', sans-serif;  /*数字をグーグルフォントに変更*/
	 font-size: 12px;  /*数字のフォントサイズを小さく*/
}

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {/*1位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上に*/
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {/*4位の数字を上にし背景色変更*/
	background: #d0d0d1;
	line-height: 14px;
}

.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {/*5位の数字を上にし背景色変更*/
        background: #d0d0d1;
	line-height: 14px;
}

.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
        padding: 0.2em 0 0 0.8em !important;  /*タイトル周りの余白を調整*/
	letter-spacing: 0.8px;  /*字間を広げる*/
}

.sidebar a.popular-entry-card-link.a-wrap{/*miniブログカード*/
        margin-bottom: 8px;  /*カード間の余白を広げる*/
}

今回のカスタマイズ内容は、

  • 順位(数字)を囲っている四角を丸に変更
  • 丸を左斜め上に移動し、少しサイズを小さめに
  • 数字のフォントをグーグルフォントに変更し、サイズを小さく
  • 数字の位置を調整
  • 4位と5位の背景色を変更

  • タイトルの字間や余白を調整
  • カード間の余白を広げる

となっている。

3. コピペ後、「ファイルを更新」をクリックしたらカスタマイズは終了

コードを貼り付けたスタイルシート

3 デザインを確認する

このように表示されていれば完成。

Cocoon「人気記事ランキング」カスタマイズ後のデザイン
キップム
キップム

背景色や余白、字間などはお好みで調整してね!

こちらもオススメ

yoko
yoko

この本を一通りやったら、カスタマイズのスピードがめちゃめちゃ早くなったよ。

おわりに

HTML & CSS初心者のカスタマイズ奮闘を、せっかくなので記録として残しておきたいと思い記事を書いた。

プロから見たら綺麗なコードではないかもしれないけれど、誰かの参考になったら嬉しいなと思う。

文章: yoko( @_yoko51_

Comment