サイドバーの『人気記事ランキング』、このブログみたいなデザインにしたいんだけど… どうしたらいいのかな？？
今からコピペだけで簡単にカスタマイズできる方法を紹介するから、ぜひ試してみて。
わぁ、ホントに！？ありがとう〜
早速、やってみる♪
この記事はこんな人にオススメ
この記事を読めば、できること
下記画像（2枚目）のようなデザインに「人気記事ランキング」をカスタマイズできる！
ちなみにCocoonデフォルトのデザインはこんな具合で、
カスタマイズ後のデザインはこんな感じ。
形やサイズ、余白を調整し、柔らかくスッキリとした印象のデザインにしてみたよ。
今回は、見出しデザイン（Popular postsの部分）のカスタマイズは含まれていないのでご了承ください。
カスタマイズの大まかな流れ
簡単にまとめるとカスタマイズの手順は、3ステップ！
❶ 人気記事ランキングをサイドバーに表示する
❷ スタイルシートにコードを追加する
❸ デザインを確認する
さっそく❶の方法から順番に解説していきます。
1 人気記事ランキングをサイドバーに表示する
1. Cocoon管理画面の「外観」から「ウィジェット」を開く
2. 利用できるウィジェットの中から「〔C〕人気記事」を、サイドバーボックス内にドラッグ&ドロップで移動する
3. 表示の順番は、ドラッグ&ドロップで簡単に並べ替えができる
4. 右端の▼をクリックすると設定メニューが開く。表示方法をお好みで設定したら、右下の「Save」をクリックする
＊1 投稿IDの確認方法
1. 「投稿一覧」を開く
2. IDを確認したい記事のタイトルにマウスポインターをあてる
3. 画面下部にURLが表示される。「post=」の後の数字が投稿IDになる
ランキング表示にチェックを入れないと順位が表示されないので、
必ずチェックしてね！
5. 以上でウィジェット設定は完了なので、サイドバーに人気記事ランキングが表示されているかを確認する
2 スタイルシートにコードを追加する【コピペOK！】
ここからは、コードの追加方法を紹介していきます。
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; /*カード間の余白を広げる*/
}今回のカスタマイズ内容は、
となっています。
3. コピペ後、「ファイルを更新」をクリックしたらカスタマイズは終了
3 デザインを確認する
このように表示されていれば完成。
背景色や余白、字間などはお好みで調整してね！
こちらもオススメ
ポチップ
この本を一通りやったら、カスタマイズのスピードがめちゃめちゃ早くなったよ。
おわりに
HTML & CSS初心者のカスタマイズ奮闘を、せっかくなので記録として残しておきたいと思い記事を書きました。
プロから見たら綺麗なコードではないかもしれませんが、誰かの参考になったら嬉しいなと思います。
文章： yoko（ @_yoko51_）
Comment