WordPressテーマ「Stinger3」とプラグイン「WordPress Related Posts」でチェック画像の表示が重なる件

こんばんは、ぶんちょうです。

以前から地味に且つ確実に気になっていた件、自己解決しましたので方法を掲載します。

素朴な問題過ぎるのかしてネット上で探せませんでしたが、結構同じ症状のブログをよく見かけます。お困りの方は是非参考になさって下さい。

課題

WordPressでプラグイン「WordPress Related Posts」を入れたが、「関連記事」というタイトルがチェックマーク画像と重なって表示されてしまう。

ちなみにテーマは「Stinger3」です。

症状

・パソコンブラウザ画面において「関連記事」というタイトルがチェックマーク画像と重なって表示されてしまう。なんかいやだ。

対応策

まず、「WordPress Related Posts」が使っている「ｈ３タグ」のあたり、スタイルシートが原因なのは明白ですが、どこにあるのやらさっぱり。

ソースを見ると以下のように「related_post_title」というクラスを編集すれば良さそうですがなかなか見つかりません。

少なくともテーマの管理画面にはなさそうです。。。

解決方法

CSSファイルのありか

Chromeのデベロッパーツールでちくちくして、見つけました。

www.●●●.jp/wp/wp-content/plugins/wordpress-23-related-posts-plugin/static/themes

をFTPソフトで開いて「vertical-m.css」を編集します。※Wordpressの管理画面からはたどり着けません。

編集内容

おそらく冒頭にある「padding〜」を行削除します。これだけです。

importantと注釈がありますが今のところ問題は起きていません。もちろんモバイル側にも影響はありません。

まとめ

「Stinger3」に限らず、デザイン的によくあるパターンですので別のテーマをお使いの方も使える手だと思います。

今回はプラグイン側を編集したので「WordPress Related Posts」がバージョンアップした際にはまた治さなければならないかもしれませんが（子テーマ作ればいいんかいな？）、ともあれ分かってしまえば簡単なことですのでどうぞお試し下さい。

また、ついでに言うようで大変恐縮ですが、「Stinger3」という素晴らしいテーマをご提供下さり、作者様には大変感謝しております。ソースがきれいなので私のような若輩者も頑張れます。これからもどうぞよろしくお願いします。

最後までご覧頂きありがとうございます。ほかにもワードプレス関連記事や都内お出かけ情報などもありますので是非ご覧下さい。