※本記事は広告・プロモーションを含みます

YARPP(Yet Another Related Post Plugin)の表示をカスタマイズ。

YARPP
<SPONSORED LINK>


WordPressのプラグイン「Yet Another Related Post Plugin」を使えば、閲覧されている記事に「関連する記事」を自動で表示してくれるようになるので、大変便利なんだけど「表示方法」が若干・・・気になります。そこで、簡単にCSSを修正して見栄えを整えてみました。

YARPPのサムネイルが気に入らない

YARPP

正直言って、YARPPはインストールと設置が本当に簡単なWordPressのプラグインなので、あまり文句などは言いたくはないんだけど、関連記事をサムネイル表示すると、なんともダサい感じになっちゃうんです。

画像は正方形になっちゃうし、写真の比率も無理やり収めるようになったりで・・・なんだがいびつ。

さらに、記事のタイトルは不自然なところで切れてしまっています。

YARPPの表示

(当サイトで表示されている一例です)

「それなら、表示方法を文字だけにすればよいのでは?」という意見もあるかと思いますが、せっかく写真付のサムネイルを表示してくれるんですから、これを活かした形でCSSをカスタマイズして見た目を整えたほうが良いですよね。

しかも、全てのCSSを修正するのではなく「部分的」にちょっとしたカスタマイズで・・・。

ってことで参考にさせてもらったのが、以下の記事です。

WPのプラグイン「YARPP」を5分でカスタマイズ。より見やすい関連記事表示に! | エアロプレイン

めちゃめちゃわかりやすく書いてありますので、こちらを参考にされたほうが早いと思います(笑)

ということで、上記サイトを参考にYARPPをカスタマイズ!これで見栄えが良くなるなぁ・・・と思っていたら、落とし穴が!僕のサイトのサムネイルには縦長のサムネイルも使っているので、バランスが崩れてしまったのです。

僕の管理している他のサイトは、これだけでもキレイにカスタマイズが出来たので十分でしたが・・・うーん。もうちょっと調整が必要なようです。※後日まとめてUPします。

 

YARPPのH3部分もカスタマイズ

また、サムネイルの部分のカスタマイズが終わりましたら次は、H3の部分です。

YARPPを昔から使っていたユーザーは知っていると思いますが、新しいバージョンになってからH3タグのバランスが異常に悪くなりました。僕は「まぁいっか・・・」と思ってしまうレベルではあったんですが、せっかくなのでここも修正してみたいと思います。

修正方法は、プラグインの編集にて「YARPP」を探して、「yet-another-related-posts-plugin/style/related.css」内に記載してあるH3の部分を修正するだけです。

特に「padding」の部分の修正が必要となります。よかったらやってみてください。

※CSSの修正をされる際には必ずバックアップを取ってから行うようにしてください。修正に関してエラーやトラブルが生じても当方では一切責任を負いません。

 

備忘録

とりあえず、修正方法などはわかったけど、YARPPの表示をちゃんとした形にするまでには、もう少し調査が必要。

先にデザインイメージを作ってから修正をかけたほうが早いと思いますので、また今度の記事ではとりあえず完成!といえるところまで持っていきたいと思います。

wakoでした。

 

 

 

<SPONSORED LINK>


YARPP
MONO SELECTION
私が「お気に入り」として使っている、もしくは使ったことがある「モノやサービス」を「MONOセレクト」として厳選して紹介中!

まずはこちらの記事をご覧になってみてください!

コメントを残す

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

ABOUTこの記事をかいた人

ブログを活用した集客を得意としているクリエイターです。名古屋とスタバとサッカーとイラストを愛してます。ガジェット系の記事を中心に、見てくれた人が「欲しい」と思うもの、役に立つものを記事にしてアップ中。日本ダイエット健康協会認定のダイエット検定1級の資格を持っていますので、痩せる系の記事も必見ですよ。