ブログで小遣い稼ぎ

SimplicityでWordPress popular postsのサムネ付き人気記事一覧が表示崩れしたので対策を記す!

無料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;
}

 

 

↑以上の変更を施したコードはこんな感じです。

 

 

人気記事一覧のデザインも、それっぽく改善しました!嬉しい!

 

※このカスタマイズを行う際、ウィジェットエリアの本文記事下に人気記事を入れたところ表示が崩れてしまったのですが、サイドバーに設置した人気記事はレイアウトが崩れることはありませんでした。なので本文記事下以外の場所ならば人気記事一覧の表示は崩れないのかもしれません。
原因がわかる方がいたら教えてほしいです。

 

まとめ

 

人気記事一覧を入れることによってサイト内の回遊率アップや滞在時間向上を図ることができるので、みなさんもぜひやってみてはいかがでしょうか!

 

テーマのカスタマイズは、プログラミングの知識のない初心者にとっては大変かと思いますが、僕のようなズブの素人でもなんとかできました。今ではカスタマイズをするにもインターネット上にたくさん先人たちのアドバイスが転がっていますから、それらを参考にどんどんやってみると面白いですよ!

 

最後まで読んで下さりありがとうございました!

 

それでは。

ABOUT ME
アバター
とおる
大学生。好きなことはテニス、文章書くこと、ダンスミュージック、嫌いなものは忘れ物、銀杏、絡まりやすいもの。 大学一年の夏休み、ひたすら自分の時間を提供して怒鳴られこき使われるバイトと暇を持て余す自分に嫌気が差しこのブログを始めました。 コメントとかもらえると嬉しいです。
趣味ブログで月間3万PVを達成

マジで大した収益もないしブログについてエラソーに語れる程の実績もありませんが、一応2年半ブログを続けてやっと月間3万PV到達したので僭越ながら有料noteにまとめました。価格は100円です。

ブログ3万PV/月達成に2年かかった僕が、無理なくアクセスを稼ぐ現実的な方法を教える|note.mu

こういうやり方をすれば誰でも3万PVいけるだろうなという方法論を、1年間ブログを続けて30PVくらいだった初心者の頃の自分に向けて書きました。

すぐに結果が出るようなノウハウじゃないし、僕自身なかなかアクセスが増えず悩み続けていたので、「これさえ見ればすぐブログが伸びる」という情報を求めてる人には向いてません。

「大変な作業をいとわない、現実的な方法でもいいからアクセスを伸ばせれば」という方向けです。

他にもこんな記事があるよ

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です