STINGER3 :人気記事表示をNEW ENTRY表示デザインに合わせる方法

STINGER3 :人気記事表示をNEW ENTRY表示デザインに合わせる方法

2014年5月18日

WordPressテーマSTINGER3のカスタマイズに関する投稿が続いています。

先日、ヘッダー部分に広告表示しようと思い立ちstyle.cssをごにょごにょしていたら、まったく思い通りにできなかった上に、検索フォーム部分の表示までおかしくなってしまいました。

そこで、親テーマであるSTINGER3関連ファイルをすべてオリジナルのものに入れ替えました。表示は元通りにもどりましたが、削除していたNEW ENTRYというサイドバーの表示も復活。

でも、プラグインwordpress-popular-postsを使って表示していたものとデザイン的な統一性がなくなってしまいました。

というわけで、今回はお題は、プラグインwordpress-popular-postsを使った人気記事表示を、下図のようにSTINGER3オリジナルデザインに合わせる方法です。

STINGER3_:人気記事表示をNEW_ENTRY表示デザインに合わせる方法

その方法は、クロワナさんのブログ『黒色ワナビーの住処』にある次の記事に具体的に紹介されています。

Stinger3のサイドバーに人気記事一覧を違和感なく追加する方法

この記事にしたがってHTMLをカスタマイズすると、サイドバーの表示が統一感のあるものに変わります。

僕は、背景の色づかいが気になったので、style.cssのtopnewsに関する記述の一部を変更してみました。また、プラグインwordpress-popular-postsで表示されるサムネイルの位置とNEW ENTRYのサムネイルの位置がそろっていなかったので、プラグイン編集でwordpress-popular-posts/style/wpp.cssを次のように変更してみました。

スポンサーリンク

変更前

[css]
/* thumbnail styles */
.wpp-thumbnail {
display:inline;
float:left;
margin:0PX 5px 5px 5px;
border:none;
}

[/css]

変更後

[css]
/* thumbnail styles */
.wpp-thumbnail {
display:inline;
float:left;
margin:0PX 5px 5px 0px;
border:none;
}
[/css]