WP Popular Postsのデザイン調整

今回は人気記事の表示ができるプラグインWordPress Popular Postsについて。

こんなやつ。

cssで調整しないと見た目があまりよろしくないので画像サイズは80pxにして、以下のようなcssにしました。

style.css

.popular-posts{
    overflow:hidden;
    margin:0px 5px 5px 5px;
}
    .popular-posts ul{
        margin:0px;
        padding:0px;  

    }
    .popular-posts li{
        margin:0px 0px 5px 0px;
        padding:5px;
        min-height:80px;
        border-bottom:#42acff 1px solid;
    }
    .popular-posts li:hover{
    }
    .popular-posts a{
        color: #00f;
        text-decoration: none;
    }
    .popular-posts a:hover {
        color: #0f0;
        text-decoration: none;
    }

.wpp-thumbnail{
    float:left;
    width:80px;
}

.wpp-post-title{
    float:right;
    padding:0px 0px 0px 10px;
    width:188px;
    color:#00f;
    font-size:90%;
    overflow:hidden;
}
.wpp-views{
    padding:0px 0px 0px 10px;
    font-size:70%;
    color:#f00;
}

なおこの記事を書いているときに念のためと思って調べたらこのサイトを発見。

「HTML Markup settings(独自のHTMLマークアップを使う)」の設定をしていたらもうちょっと柔軟にカスタマイズできたかもと思った・・・