無料wordpressテーマSimplicityで人気記事を表示したい！と考えているあなたへ。
サムネイル付きの人気記事一覧を作りたいのに、サムネイルに記事タイトルがかぶってしまったり、記事タイトルが大きすぎてレイアウトが崩れてしまう場合がありますよね。
この記事では僕がSimplicityテーマに人気記事を入れようとして上記のように表示が崩れてしまったときに行った対策を紹介します！
この記事が同じように困っている方の参考になれば幸いです！
それではいってみましょう！
[toc]
表示崩れはこんな感じ
まず前提として、僕はSimplicityに人気記事一覧を導入するにあたってこの記事を参考にさせていただきました。ありがたや。
https://www.google.co.jp/amp/s/4mirai.com/css-customize-wordpress-popular-posts%3famp=1
この記事にあるようなプラグインやcssを導入した上で発生したレイアウト崩れは以下の通り。
記事タイトルが大きすぎてレイアウトがおかしなことになってしまっています。
このままでは嫌なので色々な方法を試しました。そして最終的にはテーマの編集→style.cssをいじってどうにかすることができましたのでその方法を解説します。
#main ul.wpp-list li a.wpp-post-title {
position: absolute;
font-size: 24px;
font-weight: bold;
padding: 12px;
text-decoration: none;
color: #333;
line-height: 28px;
}
先程のサイトを参照すると、人気記事一覧の記事タイトルの部分のコードはこのようになっているはずです。このpost-titleの
- font-size
- position
を変更します。
font-sizeはお好みのサイズに変えましょう。このブログではとりあえず記事本文が16pxなので、それに合わせて16pxにしました。
そして、positionはabsoluteとなっていると思いますが、これをrelativeにします。これによって記事タイトルが画像をよけてくれるようになり、サムネイル画像の上に文字が表示されるのを防ぐことができます！
#main ul.wpp-list li a.wpp-post-title {
position: relative;
font-size: 16px;
font-weight: bold;
padding: 12px;
text-decoration: none;
color: #333;
line-height: 28px;
}
↑以上の変更を施したコードはこんな感じです。
人気記事一覧のデザインも、それっぽく改善しました！嬉しい！
原因がわかる方がいたら教えてほしいです。
まとめ
人気記事一覧を入れることによってサイト内の回遊率アップや滞在時間向上を図ることができるので、みなさんもぜひやってみてはいかがでしょうか！
テーマのカスタマイズは、プログラミングの知識のない初心者にとっては大変かと思いますが、僕のようなズブの素人でもなんとかできました。今ではカスタマイズをするにもインターネット上にたくさん先人たちのアドバイスが転がっていますから、それらを参考にどんどんやってみると面白いですよ！
最後まで読んで下さりありがとうございました！
それでは。
