Luxeritas用のWordPress Popular PostsのCSS

当サイトはアフィリエイト広告を利用しています

Luxeritasオリジナルの新着記事ウィジェットとWordPress Popular Postsのウィジェットの見た目をほぼ同じにするためのCSSです。

~~調整後の結果は、このページのサイドバーを見てもらえれば分かるかと思います。~~

テーマ変えちゃいました。すみません。

Contents

WordPress Popular Postsのウィジェットの変更箇所

まずは、メニューの「外観」＞「ウィジェット」からWordPress Popular Postsのウィジェットを追加してください。

投稿設定

「抜粋を表示」、「アイキャッチ画像を表示」にチェックを入れて保存ボタンを押してください。
※HTML マークアップ設定側のチェックと同時にチェックを入れてもOK

詳細設定用の欄が出てくるので、さらに設定を進めます。

「抜粋の長さ」を 55 から 45 に減らします。
アイキャッチ画像は「規定のサイズから選ぶ」で「thumb100 (100 x 100, hard crop)」を選んでください。

HTML マークアップ設定

「カスタム HTML マークアップを使う」にチェックを入れたら保存ボタンを押してください。
※投稿設定側のチェックと同時にチェックを入れてもOK

「投稿の前」と「投稿の HTML マークアップ」をそれぞれ下記のように変更します。

【投稿の前】
（BEFORE）

<ul class="wpp-list">

↓
（AFTER）

<ul id="thk-wpp" class="wpp-list">

【投稿の HTML マークアップ】
（BEFORE）

<li>{thumb} {title} <span class="wpp-meta post-stats">{stats}</span></li>

↓
（AFTER）

<li>{thumb} <p class="wpp-post-title">{title} {stats}</p><p>{summary}</p></li>

子テーマの style.css への追記内容

メニューの「Luxeritas」の「子テーマの編集」を開き、先頭にある「style.css」タブの編集画面の一番最後に下記のスタイルを貼り付けて、保存ボタンを押してください。

ul#thk-wpp  li {
padding: 15px 0;
border-bottom: 1px dotted #ccc;
line-height: 1.4;
}
#thk-wpp li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-style: none;
}
#thk-wpp img {
float: left;
max-width: 150px;
background: inherit;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba(255,255,255,1) inset;
margin: 0 10px 0 0;
padding: 1px;
width: 100px;
height: 100px;
}
#thk-wpp p {
margin: 0;
padding: 0;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.4
}
#thk-wpp p.wpp-post-title{
font-size: 14px;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.4;
padding: 0;
margin: 0 0 14px 0;
text-decoration: none;
}
#thk-wpp .wpp-excerpt{
margin: 0;
padding: 0;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.4;
}