【Cocoonカスタマイズ】人気記事ランキングをおしゃれに！～追加CSS～

Sayu

こんにちは、CSS探検隊のSayuです☺

今回は、誰でも簡単にできるカスタマイズ

【人気記事ランキング編】をお届けします♪

人気記事ランキングとは、サイドバーなどに表示できるこれのこと▼

＼デフォルト／

Sayu

ランクの数字がアイキャッチの邪魔になってる💦
記事タイトルも詰まってて読みずらいな💦

と感じて、カスタマイズしたのがこちら▼

＼カスタマイズ後／

A子先生

丸い数字がおしゃれで
アイキャッチの邪魔にならないね💛
記事同士も詰まってないから見やすい！

意識した点がこちら▼

「余白」を取り入れてゆとりのあるデザインに
数字を丸くし、やわらかいイメージに

A子先生

ブログをおしゃれ & 見やすくするコツは
「よはく」だよ！

余白について気になる方はこちら▼

ほんとにCocoon⁈ おしゃれで見やすいブログデザインの作り方｜余白の大切さ

おしゃれで見やすいブログデザインには、余白が欠かせません。Cocoonでサイト型のようなデザインにするカスタマイズ方法をご紹介。効果的なアイキャッチの作り方も紹介しています。

それでは、カスタマイズ方法を詳しくご紹介していきます☺

Cocoon｜ランキングカスタマイズの手順
Cocoon人気記事ランキングのカスタマイズ～表示がうまくいかない時の対処法～
Cocoon人気記事ランキングのカスタマイズ～数字の色を変更したい場合～
- Cocoon人気記事ランキングの色を変更するCSS
Cocoon人気記事ランキングのおしゃれなカスタマイズ

Cocoon｜ランキングカスタマイズの手順

おまかな流れはこんな感じ▼

サイドバーに人気記事ランキングを追加する
CSSをコピペ & 貼り付ける
反映されているか確認する

カスタマイズの前に、

サイドバーに人気記事ランキングを表示させましょう。

A子先生

流れを1つずつ説明するよ！

① サイドバーにランキングを表示する

【カスタマイズの手順】

STEP 1
「外観」→「ウィジェット」を選択
STEP 2
「人気記事」を入れたい場所にドラッグ
A子先生
サイドバーじゃなくてもOK！
好きなところに表示させてね☺
STEP 3
右端の▼で表示の設定をする→「保存」をクリック

A子先生

これで、サイドバーにランキングが表示されるよ♪
つぎはカスタマイズしていこう！

② CSSを追加する

次に、CSSをコピー & 貼り付けします。

このコードのカスタマイズ内容は、、▼

数字を丸く & サイズを小さく
フォントをGoogleフォントに & サイズを小さく
数字の背景色を変更(４位と５位)
カード同士の間隔を広げる
アイキャッチとタイトルの間に余白を

追加CSSはこちら▼

/************************************
** 人気記事ランキング表示のカスタマイズ
************************************/
.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; /*カード間の余白を広げる*/
}

【CSSを追加する前の注意点】▼

バックアップを保存しておく
元のCSSコードをメモ帳などに保存しておく
当コードによるデザインの崩れや動作不良があっても、責任は負えませんのでご了承ください

バックアップの方法が分からない💦

という方は以下を参考にしてください。
初心者向けにわかりやすく解説されています☺▼

【Cocoonのバックアップ方法】
【Cocoon】設定のバックアップ保存と復元の手順｜WordPress

【Wordpressのバックアップ方法】
【WordPressのバックアップ】BackWPupの使い方を徹底解説！

A子先生

次に、CSS追加の手順を説明するよ♪

CSSを貼り付ける手順

①「外観」→「カスタマイズ」

②「追加CSS」を選択

③「コードを張り付ける」→「公開」！

A子先生

きちんと反映されているか確認していこう！

③ デザインを確認する

公開したら、ちゃんとデザインが反映されているか確認しましょう。

このようになっていればOK！！▼

A子先生

デザインが反映されない場合の対処法を説明していくよ！

Cocoon人気記事ランキングのカスタマイズ～表示がうまくいかない時の対処法～

CSS追加したけど、
見た目が想像と違う。。

というように、うまく反映されない場合があります。

例えば、数字がずれてしまうトラブルです▼

A子先生

ランキングの数字が真ん中じゃないね💦

こういう場合は、先ほどのCSSの赤い数字の部分を変更しましょう▼

width: 14px; /*丸のサイズを小さく*/
height: 14px; /*丸のサイズを小さく*/

元の数字は「14px」ですが、

数字がずれる場合は、あなたのサイトに合うサイズに変更してください。

Sayu

当サイトでは、
19pxに変更しています♪

Cocoon人気記事ランキングのカスタマイズ～数字の色を変更したい場合～

数字の背景色を変更したい！

あなたのサイトにあった色を使用したい場合は、

数字の背景色を変更できます▼

色を決めるポイントは、

「サイトカラー」を決めるということ！

当サイトではこの3色のサイトカラーで
全体のバランスをとっています▼

Sayu

サイトカラーを取り入れると、
統一感が出るよ♪

サイトカラーが決まらない💦

という方には、「3色だけでセンスのいい色」がおすすめ。
簡単にオシャレな配色が見つかります☺▼

リンク

Sayu

私は配色について自信がなかったのですが、
簡単にイメージ通りの色を決める事ができました！▼

「ベースカラー、アクセントカラー、サブカラー」を基本に、

3色でバランスのとれた配色を紹介してくれる１冊。

クール、ポップ、ナチュラルなど、

それぞれのイメージごとに合う色を教えてくれて、

あなたが作りたいサイトのイメージを実現することができます。

SNSで話題になり、気になって買ってみたのですが

デザイン初心者の私が本当に買ってよかったと思う

「お気に入りの本」になりました！

A子先生

CSSコードを紹介するよ！

Cocoon人気記事ランキングの色を変更するCSS

追加するCSSはこちら▼

/************************************
** 人気記事ランキング表示のカスタマイズ
************************************/
.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位の数字を上にし背景色を変更*/
background: #カラーコード;
line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上にし背景色を変更*/
background: #カラーコード;
line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上にし背景色を変更*/
background: #カラーコード;
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; /*カード間の余白を広げる*/
}
}