カテゴリー別人気記事ランキングをサイドバーに載せる
-
お世話になります。
カテゴリーごとの回遊性を高めるために、WordPress popularpostsとWPP plus Widgetを使ってサイドバーにカテゴリー別の人気記事ランキングを載せたいと思っています。（今閲覧している記事の同カテゴリー人気記事を載せるという意味です）特に雑記ブログだとカテゴリーによって内容がバラバラなのでカテゴリー別人気記事を載せられると便利かなと思っての希望です。
ネットで検索して一応載せることはできたのですが、アイキャッチや記事タイトルのバランスが悪くて見栄えが最悪な出来に...アイキャッチ同士がくっついちゃいますし...
▼私のブログです
https://matsuko-minimum.info/unextmeritdemerit/もし見栄え等よくする方法があればご教授願います。
また、別テーマですが、こちらの記事を参照に、ウィジェット画面で簡単に設定できたら助かります。
https://oldno07.com/poripu/wordpress-popular-posts/
お手隙の際にご回答いただけるとありがたいです。
マニュアル確認済み
キャッシュクリア済み
WordPressのバージョン :
ご利用のサーバー名 :
PHPのバージョン :
OS :
ご利用のブラウザ :
該当サイトのURL : https://matsuko-minimum.info/unextmeritdemerit/
マニュアル確認済み
キャッシュクリア済み
WordPressのバージョン :
ご利用のサーバー名 :
PHPのバージョン :
OS :
ご利用のブラウザ :
該当サイトのURL : https://matsuko-minimum.info/category/エンタメ/
-
@マツコ さん
こんにちは！JIN運営チームのりょうたです。
WordPress popularpostsのカスタマイズに件ですが、本当に簡単でよければ
.wpp-list li{ margin: 0 10px 0 0; } @media (min-width: 768px){ .wpp-list li{ margin: 0 15px 0 0 ; } }この辺りで一応画像がくっついて見えることはなくなります。
もっとカスタマイズしたいということがあると当運営では対応致しかねます。。また、別テーマですが、こちらの記事を参照に、ウィジェット画面で簡単に設定できたら助かります。
https://oldno07.com/poripu/wordpress-popular-posts/上記に関してですが、これはWordPress popularpostsのプラグインを有効化した段階で実装される機能になりますので
有効化してウィジェットエリアが追加されているか確認してみてください。お手数お掛け致しますが、宜しくお願い致します。
-
ryota様、ご回答ありがとうございます。
一度ご回答いただいた内容で変更して、その後JINで同じカスタマイズをされているサイトを見つけたので、最終的にこちらの記事の内容を参考に以下のコードで設定しました。
https://teineini.net/20180607-jin-customize//-- 人気記事デザイン --/
ul.wpp-list li {
border-bottom: 1px dashed #79c06e;/記事間の点線と色/
position: relative;/相対位置/
}ul.wpp-list li img {/アイキャッチ画像/
margin: 10px 10px 10px 0px;/画像の余白/
padding: 3px;/画像の位置/
}ul.wpp-list li a.wpp-post-title {/記事タイトル/
display: block;/ブロック形式で表示/
font-size: 15px;/文字サイズ/
color: #877179;/文字色/
padding: 12px;/タイトル位置/
text-decoration: none;/タイトルの下線なし/
}ul.wpp-list li a.wpp-post-title:hover {
color: #4169e1;/ホバー時のタイトル色/
}ul.wpp-list li:before {/ランキングカウンター全体/
content: counter(wpp-count);/カウンターを表示/
display: block;/ブロック形式で表示/
position: absolute;/絶対位置/
font-size: 12px;/数字サイズ/
color: #fff;/数字の色/
background-color: #333;/背景色/
padding: 5px 10px;/縦と横の幅/
border-radius: 6px;/角の丸み/
top: 0;/右からの位置/
left: 0;/下からの位置/
opacity: 1;/透明度/
z-index: 5000;/重なりの順序/
}ul.wpp-list li {
counter-increment: wpp-count;/カウント数/
}
ul.wpp-list li:nth-child(1):before{/ランキング1/
background-color: #FBCC54;/背景色/
}
ul.wpp-list li:nth-child(2):before{/ランキング2/
background-color: #B7BFC1;/背景色/
}
ul.wpp-list li:nth-child(3):before{/ランキング3/
background-color: #D47B16;/背景色/
}
-
