YARPPで出力した記事のサムネイルの崩れを直す方法
公開:2019.09.20 更新:2020.05.09

こんにちは、らいどらです。

さて、このサイトは関連記事出力プラグインで人気のあるYARPPを先日から使い始めましたが、どうも一部の記事のサムネイルが崩れてしまっているようでした。

具体的にはサムネイルのサイズは合ってるんだけどなんか縦横比がぐちゃあ…….

サムネイルは、[横:縦 = 240px:135px] の物を使っているのですが、検証から出力されたコードを調べてみると、CSSでサイズを調整する前に、PHPコードでサムネイル画像が[120px×120px]に切り抜かれてから表示されているようです。

切り抜かれた後にCSSで無理矢理引き延ばしたような形になっていたので歪んだサムネイルになってしまっていたんですね。

サムネイル崩れの原因特定
今は直っているが……

こちらの画像は修正後の物ですが、修正前は赤丸の辺りの数値が120×120でした。

こうなると、YARPPプラグインファイルのコード自体を直すしかなさそうです。

やり方は、こちら( https://www.seojuku.com/blog/thumbnail-yarpp.html )の記事に詳しく乗っていました。

まず、FTPでプラグインファイルの[styles_thumbnails.css.php]からダウンロードして改修します。こっちのファイルはありがたいことに先頭の方に分かりやすく、$heightとか$widthとか書いてあるのでそこを編集してみます。

heightとwidthを変える

案外簡単だなあ~と思って直してみましたが、そうは問屋が卸さなかった。全然直りません。どうにもこっちはファイル名からして、大本の出力元では無かったみたいです。

次はもうひとつの候補[template_thumbnails.php]をいじってみます。

こちらの中身は…..?

うーん…….PHPに詳しくない人にとってはかなりきついですね…..。しかし上記サイトの情報を頼りになんとか辿り着きました!

サムネイル取得して出力~みたいな文が書いてあるところの [ $dimensions[‘size’] ] を 配列arrayで [ array(240,135) ] に書き換えます。

半信半疑でしたが結果的にこれで直りました!良かった……

いやあ~綺麗なサイズのサムネイルって…..良いですね!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。