テーマを「SANGO」に変更しました。

【STINGER5カスタマイズ】人気記事ランキングのデザインを変更してみた

どうも、(@nekonotesou)です。

人気記事ランキングの設定の仕方は以下の記事を参考にしてください。

参考WordPress Popular Postsでカテゴリ別の人気記事ランキングを表示する方法

ここからは、参考記事と同様のカスタマイズ済であることを前提に、説明していきます。

今回は、ランキング1位、2位、3位のデザインを変更する方法です。

ランキングの背景の色を変更する

style.cssに、以下のコードを追加します。

ランキング1位から順に、金、銀、銅のカラーコードに変更する場合。

ランキング1位の”number1″に「#FFD700」

ランキング2位の”number2″に「#C0C0C0」

ランキング3位の”number3″に「#C47222」

#popular-post ul li.number1:before {
    background-color : #FFD700 ;
}

#popular-post ul li.number2:before {
    background-color : #C0C0C0 ;
}

#popular-post ul li.number3:before {
    background-color : #C47222 ;
}

wordpress-popular-posts-change-design-01

1位〜3位までのランキングの背景色を変更できました。

うーん、これだとあまり目立たないか?4位以降のランキングの色は抑えめの色の方が良さそうです。

 

アイコンフォントの「Font Awesome」を使用してみる

Font Awesome

#popular-post ul li.number1:before {
content: "\f091";
font-family: FontAwesome;
font-size: 48px;
color: #FFD700;
top: 20px;
}

#popular-post ul li.number2:before {
content: "\f091";
font-family: FontAwesome;
font-size: 48px;
color : #C0C0C0 ;
top: 20px;
}

#popular-post ul li.number3:before {
content: "\f091";
font-family: FontAwesome;
font-size: 48px;
color : #C47222 ;
top: 20px;
}

wordpress-popular-posts-change-design-02

ダッサ!!

却下です。

この状態からデザインを良くする、技術もセンスもないので不採用。

コメントを残す