WordPressのプラグイン「Yet Another Related Post Plugin」を使えば、閲覧されている記事に「関連する記事」を自動で表示してくれるようになるので、大変便利なんだけど「表示方法」が若干・・・気になります。そこで、簡単にCSSを修正して見栄えを整えてみました。
YARPPのサムネイルが気に入らない
正直言って、YARPPはインストールと設置が本当に簡単なWordPressのプラグインなので、あまり文句などは言いたくはないんだけど、関連記事をサムネイル表示すると、なんともダサい感じになっちゃうんです。
画像は正方形になっちゃうし、写真の比率も無理やり収めるようになったりで・・・なんだがいびつ。
さらに、記事のタイトルは不自然なところで切れてしまっています。
（当サイトで表示されている一例です）
「それなら、表示方法を文字だけにすればよいのでは？」という意見もあるかと思いますが、せっかく写真付のサムネイルを表示してくれるんですから、これを活かした形でCSSをカスタマイズして見た目を整えたほうが良いですよね。
しかも、全てのCSSを修正するのではなく「部分的」にちょっとしたカスタマイズで・・・。
ってことで参考にさせてもらったのが、以下の記事です。
WPのプラグイン「YARPP」を5分でカスタマイズ。より見やすい関連記事表示に！ | エアロプレイン
めちゃめちゃわかりやすく書いてありますので、こちらを参考にされたほうが早いと思います（笑）
ということで、上記サイトを参考にYARPPをカスタマイズ！これで見栄えが良くなるなぁ・・・と思っていたら、落とし穴が！僕のサイトのサムネイルには縦長のサムネイルも使っているので、バランスが崩れてしまったのです。
僕の管理している他のサイトは、これだけでもキレイにカスタマイズが出来たので十分でしたが・・・うーん。もうちょっと調整が必要なようです。※後日まとめてＵＰします。
YARPPのH3部分もカスタマイズ
また、サムネイルの部分のカスタマイズが終わりましたら次は、H3の部分です。
YARPPを昔から使っていたユーザーは知っていると思いますが、新しいバージョンになってからH3タグのバランスが異常に悪くなりました。僕は「まぁいっか・・・」と思ってしまうレベルではあったんですが、せっかくなのでここも修正してみたいと思います。
修正方法は、プラグインの編集にて「YARPP」を探して、「yet-another-related-posts-plugin/style/related.css」内に記載してあるH3の部分を修正するだけです。
特に「padding」の部分の修正が必要となります。よかったらやってみてください。
※CSSの修正をされる際には必ずバックアップを取ってから行うようにしてください。修正に関してエラーやトラブルが生じても当方では一切責任を負いません。
備忘録
とりあえず、修正方法などはわかったけど、YARPPの表示をちゃんとした形にするまでには、もう少し調査が必要。
先にデザインイメージを作ってから修正をかけたほうが早いと思いますので、また今度の記事ではとりあえず完成！といえるところまで持っていきたいと思います。
wakoでした。
コメントを残す