WordPressのブログの人気記事のデザインをMediumっぽくしてみた

シェアする

  • このエントリーをはてなブックマークに追加

スマフォの上部に表示している「本日の人気記事」の部分を、

↓↓↓

スクリーンショット 2015-12-18 15.57.52

これっぽく表示してみた。

環境は
・WordPress
・Simplicity(子テーマ)です。

WordPress Popular Posts

人気記事の表示は「WordPress Popular Posts」というプラグインを使っています。
ウィジェットの設定で、HTML Markup settingsの部分で<ul class=”wpp-list”>の’ul’を’ol’に変更します。
すると人気記事が番号付きのリストになります。

最初それだけでは番号が出なかったんですが、自分の場合、CSSで
.wpp-list liのoverflow:hiddenを、inheritで上書きすると番号が表示されるようになりました。

タイトル「本日の人気記事」に上線

    display: inline-block;
    border-top: 1px solid rgba(0,0,0,0.44);
    padding-top: 16px;
    font-size: 14px;

で上線を表示。
スクリーンショット 2015-12-18 16.06.17

背景色を設定

普通に背景色を設定すると
スクリーンショット 2015-12-18 16.11.33
横に白い部分ができてしまうのでそれをmarginとpaddingで調整。

margin: 0 -10px;
padding: 20px 20px 1px 20px;

スクリーンショット 2015-12-18 16.11.40

リストの番号を円形に

これ別にしなくてもいいなとなったのでやらずに。

あとは、文字サイズ、縦幅、位置などを調整して完了。
スクリーンショット 2015-12-18 16.06.17