ブログで稼ぐ 運営のコツ

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

無料wordpressテーマSimplicityで人気記事を表示したい!と考えているあなたへ。

 

サムネイル付きの人気記事一覧を作りたいのに、サムネイルに記事タイトルがかぶってしまったり、記事タイトルが大きすぎてレイアウトが崩れてしまう場合がありますよね。

 

この記事では僕がSimplicityテーマに人気記事を入れようとして上記のように表示が崩れてしまったときに行った対策を紹介します!

 

この記事が同じように困っている方の参考になれば幸いです!

 

それではいってみましょう!

 

※テーマの編集をする際には、失敗に備えて必ず事前にバックアップを取っておきましょう!そのあたりは自己責任でお願いします。

 

 

表示崩れはこんな感じ

 

まず前提として、僕は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;
}

 

 

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

 

 

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

 

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

 

まとめ

 

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

 

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

 

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

 

それでは。

-ブログで稼ぐ, 運営のコツ
-, ,

ブログで稼ぐ 運営のコツ

2020/5/27

2020年5月のGoogleのアルゴリズム コアアップデートを受けて思うこと

またアップデートの時期がやってきました。僕もかれこれ四年近くブログを書いているわけですが、コアアップデートというイベント(?)を注視し始めたのはここ一年くらいのことです。 なのであんまエラソーなことは言えませんが…。このアップデートを受けて僕が感じたことを書いていきたいと思います。有益な記事かどうかはわかりません。 目次当ブログも見事に被弾個人ブログの冷遇に対する不満SEOに依存することはリスクだらけそもそもブロガーもユーチューバーもアルゴリズムの奴隷稼ぎたいのであればそれなりのリスクヘッジが必要そう【追 ...

続きを読む

ブログで稼ぐ 運営のコツ

2020/5/5

ブログで稼ぐのと普通に働くのはどちらが難しいのか

ブログで稼ぐのと普通に働くのはどちらが難しいのか? こんな疑問を抱えている人へ、答えを提示する。 結論から言うと、人による。優秀な奴ならサラリーマンになるより稼げるし、並の人間なら多分普通に働く方が簡単だ。 本記事ではこの答えを深掘りしていく。 目次ブログで稼ぐのと普通に働く難易度が人による理由大多数の人にとってはブログで稼ぐ方が難しい理由ブログで稼ぐのは頭を使わないと無理だからブログで稼ぐのは時間がかかるからブログで稼ぐには自制心が必要だから普通に働く方が難しい要素もある普通に働くには人の指示に従う能力 ...

続きを読む

ブログで稼ぐ 運営のコツ

2020/4/23

ブログを始めたけど全然アクセスがない(5PV未満)ときの3つの対処法

ブログを書き始めたけど全然アクセスがない…!いつになったら読まれるようになるんだろう…? ブログを始めたばかりだと、こんな風に悩むことも多いと思いでしょう。 本記事では、ブログを4年以上書いていて現在では月間3万PVほどの僕が、ブログでアクセスがないときの対処法をお伝えしたいと思います。 今ではそれなりのアクセスをとれるようになってきた僕ですが、始めたばかりの頃は同じようなことで悩んでいたので気持ちはよくわかります。 いまアクセスがなくても全然大丈夫なので、安心してください。 目次ブログ開設後すぐはアクセ ...

続きを読む

ブログで稼ぐ 運営のコツ

2020/4/16

ブログで稼ぐために必要な記事の役割分担を解説

ブログで稼ぎたいけど、どういう記事を書けば稼げるのかわからない… とりあえず記事をたくさん書いてみたけどイマイチ稼げない!どうしたらいいの? こんな疑問に答えます。 結論から言うと、ブログで上手にマネタイズをしたかったら「記事の役割分担」を学ぶ必要があります。 本記事を書いている僕はブログ歴3年半、月間PV数は3万PVほどです。 記事の役割分担の考え方は滅茶苦茶大切なのですが、このことを理解できたのはここ1年くらいとごく最近のこと。 このことを理解すれば僕よりも格段に速くブログの収益化を進めることができる ...

続きを読む

コラム ブログで稼ぐ 運営のコツ

2020/4/12

ブログで稼ぐための記事の書き方の基本を伝授

ブログで稼げるようになりたいけど、記事の書き方がよくわからない… そんな方に向けて、ブログ歴3年半で現在3万PVほどのブログを運営している僕が記事の基本的な書き方を解説します。 この記事を読むことで ブログ記事を書く上で大切な考え方ブログ記事構成の型 を知ることができます。 ブログで稼ぐためには最も基本となる記事の書き方を知り、稼ぐための一歩を踏み出しましょう。 なお、記事の構成は 前半:記事設計の基本的な考え方後半:基本的な3つの型の記事の書き方 という構成になっております。 目次記事設計の基本的な考え ...

続きを読む

コラム ブログで稼ぐ 運営のコツ

2020/5/22

ブログで稼ぐなら順位変動チェックツールが必須である理由

ブログで稼ぎたいけど、なかなかアクセスが伸びないのは何故だろう。 ブログで稼ぐためにこれだけは外せないツールってなにかあるのかな? こんな疑問に答えます。 目次順位変動チェックツールとは順位変動チェックツールでできることブログで稼ぐのになぜ検索順位チェックツールが必須なのかGoogleサーチコンソールではダメなのか?一括でチェックができない自動取得ができない順位変動チェックツールの存在を知らず稼げなかった3年半まとめ→稼ぎたいなら検索順位チェックツールは必須 順位変動チェックツールとは 順位変動チェックツ ...

続きを読む

ブログで稼ぐ 運営のコツ

2020/5/22

ブログで稼ぐ方法を超丁寧に徹底解説|簡単じゃない

[chat face="daigakusei_man-1.png" name="大学生" align="left" border="gray" bg="none"] ブログで稼げるって聞いて少しやってみたいと思うけど、仕組みも知らない。どうやったらいいんだろう? [/chat] こんな疑問に超絶丁寧に答えます。 この記事を読むことで下記のメリットがあります。 ブログで稼ぐ仕組みがわかるブログで稼ぐためにやるべきことがわかるブログで稼ぐコツがわかるブログで稼ぐにあたっての疑問が解消される 最終的には、ブログ ...

続きを読む

コラム ブログで稼ぐ 運営のコツ

2020/5/22

フリック入力のほうが速かった僕が2週間でブラインドタッチを習得した練習方法

ブラインドタッチできるようになりたいけど、どうやったらできるようになるんだろう…? そんな方に向けて、4万字超の卒論をフリック入力と音声入力だけで書ききった僕が2週間でブラインドタッチを習得した方法をシェアしたいと思います。 非常に簡単かつシンプルな方法なのでぜひ実践してみてください。 目次2週間でブラインドタッチを習得した方法ブラインドタッチを習得する具体的なステップキーボードを見てはいけない理由ブラインドタッチを習得するのが難しい最大の理由ブラインドタッチできるようになって良かったこと打てば打つほどタ ...

続きを読む

ブログで稼ぐ 運営のコツ

2020/5/22

3万PVブロガーの作業環境はこんな感じ

誰にも紹介してくれなんて言われてないけど、紹介したいので、僕のブログ制作環境を紹介していきたいと思います← これからブロガーになりたい方はこれを見ると捗るかもしれません。 目次よくわからんWindowsPCASUSのモニター父親からもらったキーボード父親からもらったマウスtp-linkのWi-Fi子機EOS5D2Sony RX100 アクションカム SJ8PRO sdカードリーダー iPhone7ブロガーなら作業環境にはこだわるべし よくわからんWindowsPC まず僕がメインで使っているパソコンが、A ...

続きを読む

ブログで稼ぐ 運営のコツ

2019/12/16

【ブロガー必見】文字入力を3倍速くする方法

皆さん音声入力って使っていますか? 僕が最近音声入力を使うことにはまっています。 あまり日常的に使っている人を見ない音声入力ですが最近「音声入力ってマジですごいのでは?」と思うようになってきたので、皆さんにも音声能力の凄いところを伝えていきたいと思います。 それではいってみましょう。 目次 音声入力の凄い所 入力がめちゃめちゃ早い 結構しっかり変換してくれる 入力するのがめちゃくちゃラク 音声入力のちょっと微妙なところ 変換が完璧ではない 文章が喋り口調でながったらしくなる 静かで人がいないところでないと ...

続きを読む

関連記事

ブログで稼ぐ 運営のコツ

【ブログ収益】 初心者大学生でも月1000円稼げたのでコツとか紹介します!【WordPress】

ついについについについに!!僕のブログの収益が月1000円を超えました!!!   なんと長かったことか…僕がこれまでブログに注いだ時間など考えたくもありません。そのくらい長い期間をへてようや ...

ブログで稼ぐ 運営のコツ

忍耐力と孤独耐性に自信がない人はブログじゃ稼げないからやめたほうが良い

ブログで稼ぎたいと思っている人に知っておいてほしいのですが、ブログで稼ぐのは並大抵のことではありません。 ブログやアフィリエイトは孤独と自分との戦いです。誰にも注目されなくても黙々と作業し続ける鉄のメ ...

ブログで稼ぐ 運営のコツ

独自ドメインでワードプレスが必須なのはブログを本気で資産にしたい人だけ

ブログを資産にするためにはワードプレスをつかって独自ドメインで運営するべきということは各所で言われていますが、正直ブログで稼ぐ気のない人はそこまで独自ドメインやレンタルサーバー、ワードプレスにこだわる ...

ブログで稼ぐ 運営のコツ

【アドセンス】審査が終わらない!8ヶ月経ってキャンセル→再審査で通過した話

アドセンスの審査が全く終わらねえ…という悩みを抱えている方に向けて、再審査の結果8ヶ月かけてアドセンスを通した僕がやったことを説明していきます。 目次 僕がアドセンス審査に通った方法 アドセンス審査を ...

ブログで稼ぐ 運営のコツ

スポーツ系のブログがマジで稼げない理由を説明する

スポーツ系のブログで稼ぎたいと思っていませんか? しかし、残念ながらスポーツ系のブログは全然稼げません。スポーツ系のブログを2年くらい運営し続けた僕が、なぜ稼げないのかを経験に基づいて伝えていきます。 ...

ブログで稼ぐ 運営のコツ

アマゾンアソシエイトで売上を伸ばして稼ぎたいならまとめ記事をかけ

ブログで稼ぎたい人は高単価の広告を探してそれに対応する記事を書きまくれということはブログで儲けたかったら広告を貼って記事を大量生産しないと何も始まりませんという記事で書きました。 しかし、初心者のブロ ...

ブログで稼ぐ 運営のコツ

ブログ初心者は記事のクオリティなど気にせずゴミ記事を垂れ流し続けるべき理由

ブログ始めたばかりだけどアクセスが集まらない人はとにかくゴミ記事でも良いので垂れ流し続けましょう。 ただし以下の条件は満たす必要があります。 伝えたいことをはっきりさせる 3000文字以上書く 稼ぎた ...

ブログで稼ぐ 運営のコツ

4回投げ出した僕が教える、ブログに挫折しそう/した時の対処法

ブログが続かない、挫折しそう→そんなことは当たり前。 過去に4回ブログを投げ出し、今では月間5万PVくらいまでブログを伸ばせた僕が、挫折への対処法を教えます。 https://skcnat.info/ ...

ブログで稼ぐ ブログ関連の書籍

「ブログは半年頑張れば稼ぐことができるのか」に対する4年目ブロガーの回答

ブログで稼ぎたい!けどどのくらい頑張れば成果が出るのかよくわからない! そんなブログ初心者に向けて、3年半以上ブログを書き続けている僕が回答していきます。 ブログで頑張り続けているけど成果が出るのか不 ...

ブログで稼ぐ 運営のコツ

ブログで稼ぎたいなら雑記ブログは特化ブログに分けることをすすめる理由

あなたはブログでお金を稼ぎたいと思っていますか? もしそうなら、ブログは雑記ブログより特化ブログのほうが良いかもしれません。   この記事では、お金を稼ぎたいのなら雑記ブログから特化ブログに ...

  • この記事を書いた人
  • 最新記事
とおる

とおる

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

© 2020 Torulog