WordPressテーマ「ハミングバード」で「WordPress Popular Post」のデザインカスタマイズ

Wordpressテーマ「ハミングバード」で「Wordpress Popular Post」のデザインカスタマイズ

現在、このブログは、WordPressテーマ「ハミングバード」を使用しています。

ハミングバードは「誰が使っても簡単に美しいブログサイトを!」をコンセプトとして開発されたWordPress用テーマ。
ページにアクセスすると、タイトルや画像がアニメーションで現れてカッコイイんです!



その魅力について書いた記事はこちら。

誰が使っても簡単に美しいブログサイトWordpress有料テーマ「ハミングバード」を使ってます!

2017.02.26

今回、サイドバーによく読まれている投稿を表示させたいと思い、プラグイン「Wordpress Popular Post」をインストールしました。

ハミングバードは、Wordpress Popular Postにも対応しているとのことでした。ランキングの数字がサムネイルに表示されます。

Wordpress Popular Post デザインカスタマイズ前

正方形にトリミングされてしまうのもなんだか……。
サムネイルが大きすぎるとごちゃっとしてしまうし……。

サムネイルのサイズを、ハミングバードが搭載しているウィジェット「[画像付き]最新の投稿」と同じようなサイズで表示したいと思いました。

最近の投稿デザイン

こんな感じにしたい。
そんな気持ちがふつふつとわいたので、カスタマイズしてみました。100%同じにはなりませんが、似た感じにすることができます。

「Wordpress Popular Post」ウィジェット設定値とCSSをご紹介します。

目次

前提

2017年4月現在、
Wordpressのバージョン4.7.3
ハミングバードのバージョン1.2.5
Wordpress Popular Postのバージョン3.3.4

カスタマイズの際は、万が一の場合に備え、ファイルのバックアップをお取りください。
また、カスタマイズは子テーマのファイルで行うことを推奨。
カスタマイズに関しては、自己責任でお願いいたします。

「Wordpress Popular Post」ウィジェット設定値

サムネイル画像の表示とサイズ指定

Wordpress Popular Post ウィジェット設定

画像サイズ:幅360px 高さ230px

表示項目

Wordpress Popular Post ウィジェット設定

今回は、日付を表示させます。また、表示形式を選択。

独自のHTMLで表示

Wordpress Popular Post ウィジェット設定

 

[Use custom HTML Markup]にチェックを付け、独自のHTMLで表示できるようにします。

[Before / after Popular Posts:]は、デフォルト。

[Post HTML Markup:]を下記のHTMLに変更します。

変更したら、Wordpress Popular Postウィジェットの[保存]をクリックします。

プラグイン側の設定は、以上になります。

CSSテーマカラー用

CSSファイルに、下記のコードを入力します。

CSSカラー変更用

Wordpress Popular Post デザインカスタマイズ後ポイント

サムネイル上にあるランキング数字と背景色、「>」の色を変更したい場合は、下記のCSSを使用してください。

「!important;/* カラー */」の表記がある行のカラーコードを変更することで、色を変えることができます。

まとめ

Wordpress Popular Post デザインカスタマイズ後

これで、Wordpress Popular Postによる表示が、ハミングバードのテーマと統一されて良くなりました!

Wordpressテーマ「ハミングバード」で「Wordpress Popular Post」のデザインカスタマイズ




作品出品イベント情報
「THE LIBRARY 2017」

2017年8月15日 (火) ~8月26日 (土)に開かれるブックアート・手づくり本の展覧会に一文物語の手製本はん・ぶんこを出品します!ぜひ、遊びに来てください!




ABOUTこの記事をかいた人

2013年6月より毎日、一文だけで完結する一文物語を現在も作り続けて、作品数は1,400本を越える。映像系専門学校を卒業後、システムエンジニア、Webデザイン業を経て、中学生時代から物語を書いて暮らしたいという思いが忘れられず、実現すべく作家活動を行っている。長編ファンタジー小説を執筆中。また糸かがり手製本による製本および作品販売を行っている。