WordPress Popular Postsを「thumb320」にしてカスタマイズする方法~サムネイルとタイトルを重ねて表示させる~

シェアボタンを押して情報を共有しましょう。

スクリーンショット_041016_113723_PM

どうも、こんにちは!最近眠気が酷いハシオです。こんなに眠いと「ナルコレプシー」なのか疑っちゃいますね。

まぁ、ナルコレプシーは大袈裟でしょう。きっと運動不足なんだと思います(笑)そんなときは眠気覚ましのドリンクを飲んで目をしゃっきりさせましょう!

眠いと作業に集中できないし、仕事が捗らないので非効率ですよね。そういう時は諦めずにカフェインを摂取しましょう。コーヒーなども眠気覚ましの効果があるので眠くてしょうがない人は是非飲んでみてください。

さぁて!今回はワードプレスのプラグイン「WordPress Popular Posts」のサムネイルをカスタマイズする記事を書いていきたいと思います!

最初に、僕のカスタマイズした「WordPress Popular Posts」をご覧ください。

スクリーンショット_041116_023413_AM

こんな感じでサムネイルと記事のタイトルが重なったデザインとなっています。サムネイルを大きく見せることによって、ユーザーの回遊率をあげることができます。回遊率はSEO的な観点から見ても重要な要素の一部なのでデザインするという作業はとても大事ですね。

とにかく、サムネイルが大きいので記事が目立ちます。文字だけの記事だといまいち興味が湧きません。ですが、これだけ画像が大きいと気になりやすく記事もクリックしてもらいやすくなりますね。それに、多くの人が見ている記事だったら余計に見たくなります。

アクセスカウンターなどを一緒に表示させておくと、より効果が高まります。僕はシンプルに表示させたかったので、ナンバリングとタイトルしか付けていません。これは好みの問題でもあるので各人で表示させる要素を指定しましょう。

それでは、そろそろやり方の説明をしていきたいと思います。レッツゴー!

2016/06/02 20:05 追記

Simplicityのテーマをお使いの方はこちらの記事をお読みください。

Simplicityにある人気記事と新着記事のウィジェットをカスタマイズしてみよう!

スポンサーリンク
レクタングル(大)広告

サムネイル表示を変える

もうこの記事を見ているという事は「WordPress Popular Posts」をインストールしていてカスタマイズするという人だけですので、インストール方法は割愛させて頂きますね。

では、ウィジェットに追加した「WordPress Popular Posts」がありますね。その中に「Posts settings」という項目があるのでそこまでスクロールさせましょう。

WS000114_041116_042038_AM

「Display post thumbnail」にチェックを入れましょう。そして「Use predefined size」「thumb320(320 x 180, hard crop)」にしてください。

スクリーンショット_041116_042609_AM

すると、このように画像が大きく表示され、その下にタイトルが表示されます。これがなにもカスタマイズしていない状態です。ここからCSSに手を加えていきます。それではいってみましょう!

CSSでカスタマイズする

カスタマイズしていない状態だといまいちカッコよくないですよね。見た目という要素は回遊率に大きく影響するのでデザインを工夫することが大事です。この320×180というサイズじゃなきゃ駄目ということではないので大きさは自由に設定しましょう。

ではCSSのコードを貼り付けていきますね。

まず、これが「WordPress Popular Posts」をカスタマイズする基本地点となります。このコードを入れておかないと、あとあとレイアウトがぐちゃぐちゃになってしまうので絶対に記入してください。

続いてこれが記事のタイトル部分になります。ここまで記入することができたらこのように表示されます。

スクリーンショット_041116_044713_AM

これでようやくサムネイルとタイトルが合体しましたね、だんだんとカッコよくなってきました。ですが、これではタイトル文字の色が黒くて見づらいです。とてもこのままじゃ使えません。それに回遊率が下がりそうです(笑)なので次は、文字の色を指定してあげましょう。

先頭にある「color: #fff;」という部分で文字の色を白に指定しました。これを白以外で指定したい場合はこちらのカラーコード表を見て好きな色を選んでみましょう。そして、どのように変わったのかをご覧ください。

スクリーンショット_041116_045418_AM

おお!なんというカッコいいデザインになったのでしょうか!これは痺れますね!いかにもなデザインです。フォントのサイズも少し小さくしてスマートにしました。できる人って感じがします!(笑)

これで一通りのデザインは終わりです。スマホから見てもカッコよく表示されています。しかし、横向きにすると中途半端なサイズになってしまうのでそれが気になる人はデザインを元に戻しましょう。基本的に縦向きに使う人が多いと思われるのであまり気にしません。

それでは次に番外編の記事にナンバリングする方法を書いていきたいと思います。

記事にナンバリングを付ける

上の方に番号付きの画像がありましたよね、それがナンバリングと言います。本来は番号を順番に付けていくという作業はJavaScriptやPHPなどのプログラミングでやるのですが、CSSでもできてしまうので今回は実際にCSSでナンバリングをしていきましょう。CSSも便利になったものです。

では、CSSのコードを貼り付けます。

結構長いコードですね。セレクタの「.wpp-list li::before」という疑似要素が土台です。そして順番に番号を付けるナンバリングコードがこの2つの要素「content: counter(wpp-ranking, decimal);」「counter-increment: wpp-ranking;」になります。

前者の「content: counter(wpp-ranking, decimal);」がカウンターを作ってくれて、後者の「counter-increment: wpp-ranking;」が順番に1を足していきます。このように裏では連携プレーによって番号付けがされているんですね。

「position: absolute;」が「position: relative;」を起点としているので「top」や「bottom」プロパティで位置を調整してみましょう。前述したように、このrelativeプロパティがないとレイアウトがぐちゃぐちゃになってしまいます。それではコードを貼り付けてどうなったのか確認してみましょう。

スクリーンショット_041116_055822_AM

どうでしょうか、このように番号が1から順に表示されていれば成功です。黄色い背景に枠を黒くしてみました。黄色いと派手ですよね、結構目につきます。なので黄色にしてみました。黄色が気に食わない人は「background: rgba(255, 243, 0,0.9);」ここのコードを好きな色に変えましょう。

まとめ

いかがだったでしょうか、これは飽くまでカスタマイズ方法の一部です。他にもデザインのやり方はたくさんあります。このデザインにこだわる必要はありませんが、参考程度になると思い記事を書いてみました。

全く同じデザインにしたいという人はそのままコードをコピーして貼り付けるだけでOKです。しかし、そこから自分好みのデザインに変えていったほうが味がでて面白いですよ

CSSがよくわからなかった人は基礎を学んでコードを読めるようにしたほうがいいですね。ブログやホームページを運営するにあたって絶対に必要な知識なのでCSSはおさえておきましょう。

それでは、そろそろ「WordPress Popular Posts」のカスタマイズ記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアボタンを押して情報を共有しましょう。

フォローする