List category postsで行間変更、罫線を追加してみる

　WordPressの便利なプラグイン「List category posts」使ってみた。記事一覧作成するのに非常に便利なプラグインで、このブログの記事一覧もこのプラグイン使って作成しています。

　「List category posts」は割と有名なプラグインでいろいろなサイトで使い方を解説しているので導入にはそれほど困らなかったのですが、フォント、行間や罫線など、好みの出る内容を変更するような解説があまりなかったので備忘録を兼ねて解説したいと思います。

　「List category posts」をデフォルトのまま使用（サムネイルの位置だけ先頭に変更してます）すると

▼こんな感じです。
[catlist name=html-css thumbnail=yes thumbnail_size=40,40 numberposts=5 excludeposts=this template=default]

行間は詰まった状態で、サムネイル画像もくっついてしまってます。リストの「・」も表示されてます。

　どうしてもこの状態を変えたくていろいろ調べたのですが、私の知識でわかるようなサイトは無く、お得意のブラウザ「検証」機能でいろいろ弄ってもてもダメでした。

　にわか仕込みではどうしようもないかなぁと思いつつ、「List category posts」のdefault.phpのファイルを眺めていたら

▼こんな記述がありました。

//Add 'starting' tag. Here, I'm using an unordered list (ul) as an example:
$lcp_display_output .= '<ul class="lcp_catlist">';

　class名が定義してあるみたいです。もしかしてスタイルシートから記述飛ばすだけなのかと思って試してみたらなんと簡単にできました。

▼使用しているスタイルシートにこれを追加。

ul.lcp_catlist li {
list-style:none;
border-bottom: 1px solid #CCCCCC;
padding-top: 10px;
padding-bottom: 50px;
}

ul.lcp_catlist li img {
 float: left;
 margin-right: 30px;
}

リストの「・」消して、罫線追加して行間開けてます。

　HTML/CSSが詳しい方には簡単かもしれませんが、私にはこれができるまで半日ほどかかりしました。