は人気記事を表示するプラグインです。
便利なので使っている方も多いのではないでしょうか。
Simplicity2の「人気記事」ウィジェットを使うと、WordPress Popular Postsで表示した記事のアイキャッチ画像の上に、ランキング順位を表示することができます。
今回はランキング順位の表示の仕方と、数字の背景色を変更する方法を説明します。
→Simplicity2の子テーマ
WordPress Popular Postsに順位を表示する方法（Simplicity2）
まずは順位を表示するところから説明します。既に表示している人は飛ばして下さい。
wordpress管理画面から「外観」→「ウィジェット」でウィジェットの設定画面を開いて下さい。
左側に表示されているウィジェットの中から「[S]人気記事」を選び、任意の位置に追加します。
「[S]人気記事」の設定を開き、「ランキング順位の表示」にチェックマークを入れます。
これで順位が表示されるようになります。
WordPress Popular Postsの順位に色を付ける方法
の画面を使って説明します。
Simplicityのデフォルトでは、WordPress Popular Postsの順位の色（正確には順位の背景色）に濃い灰色（#666）が指定されています。
ここではランキング全ての色と、特定の順位の色の変更の仕方を説明します。
ランキング順位の全ての色を変更する
CSSでランキング順位の背景色を変更します。
子テーマのスタイルシート (style.css）に以下のコードを追記して下さい。
/* WordPress Popular Posts 順位の背景色 */
.widget_popular_ranking ul li:before{
background-color:#8e8e8e;
}
「#8e8e8e」の箇所を変えると違う色になります。
僕は自分のサイトデザインに合わせて、デフォルトより少し明るい色にしています。
特定の順位の色を変更する
続いて、特定の順位の色を変更する方法です。
僕は1~3までの背景色を変更しています。
/* WordPress Popular Posts 1~3の背景色 */
.widget_popular_ranking ul li:nth-child(1):before{
background-color:#CFB53B;
}
.widget_popular_ranking ul li:nth-child(2):before{
background-color:#bbbbbb;
}
.widget_popular_ranking ul li:nth-child(3):before{
background-color:#C47222;
}
その他のアレンジ
その他のアレンジ例です。該当箇所にコピペして使って下さい。
１．背景色をなしにする（透明にする）。
background-color: transparent;
２．背景の角の丸みをなくす。
border-radius:0;
３．数字の色を変える。
color: #000000;
４．背景色の透明度を変更する。
opacity：0.5;
おまけ：アイキャッチ画像を非表示にする
これはメインブログの投稿タイトル上部分に表示している、カテゴリ別人気記事（表示中の記事と同カテゴリ内の人気記事）です。
最後にこれの設定方法について書いておきます。
先程と同じように、「[S]人気記事」ウィジェットを使います。以下のように設定して下さい。
ウィジェットの設定が済んだら、CSSでアイキャッチ画像を非表示にし、枠を付けます。
設置したウィジェットのIDを確認して下さい。
僕の場合は「popular_ranking-6」というIDが割り当てられていました。
ウィジェットのIDは、GoogleChromeのデベロッパーツールで確認することができます。
設置したウィジェットの上で右クリック→「検証」をクリックしてください。
そして表示されたIDを確認します。
あとは、IDを指定して、スタイルを書くだけです。
#popular_ranking-6 ul.wpp-list{
background-color:#eee;
padding:10px;
}
#popular_ranking-6 div.widget-over-article-title:before{
content:"\f024 ";
font-family: FontAwesome;
}
#popular_ranking-6 ul.wpp-list li:before {
position:static;
}
#popular_ranking-6.widget_popular_ranking ul li img{
display:none;
}
CSSでは、IDは「#」で表します。
IDと似たものに、class（クラス）という属性があります。classは「.」で表します。
この２つの違いは、「ユニーク（固有）かどうか」です。
IDは、ひとつのHTMLの中で一つの要素にしか使えません。
一方で、classはいくつもの要素に使うことができます。
なので、IDを指定することで、特定の要素のみにスタイルを適用させることができるのです。
逆に、サイト内の複数か所で同じスタイルを使いたいときなどは、classを使うと便利です。
Comments