YARPPで表示されるサムネイルが横長になって正方形で揃わない原因と対処方法WordPress(ワードプレス)の使い方は用途によって異なります。ホームページとして使うのか、ブログとして使うかの?WordPressの使い方について、サーバーの設定、テンプレート。プラグインの選び方などをまとめています。ブログYARPPで表示されるサムネイルが横長になって正方形で揃わない原因は、WordPressが自動的に作成しているサムネイルの中に正方形の画像がないことが原因です。対処方法の1つはプラグインを使って登録済みの画像に対して追加でサムネイル画像を作成することです。今後は別のプラグインを使うべきYARPPのサムネイル画像が横長で正方形でない事象yet-another-related-posts-plugin(YARPP)で、「表示設定」で”サムネイル”を選んでいる場合に、表示されるサムネイル画像が横長になって正方形で揃わない原因と対処方法についてご紹介します。これがうまく表示されていない場合の例です。左から4番目の画像だけ、横長になっています。srcset属性の箇所が異なるそしてこれがこの部分のHTMLです。(左から3番目と4番目の部分)赤枠で囲った部分、imgタグのsrcset属性が違うことが分かります。3番目の画像には120x120pxの画像がありますが、4番目には120x79pxしかありません。ここに列挙されているのは、WordPressが保存している画像です。(メディアにアップロードしたタイミングでオリジナルとは別にサイズを変えて自動的に作成される画像)imgタグのsrcset属性についてざっくりご説明します。(詳しく知りたい方は、以下のサイトなどをご参考にしてください。)参考サイト:https://laboradian.com/brief-desc-srcset-sizes-for-wp/srcset属性ですが、レスポンシブWebデザインで作られたサイトの場合は、画面の幅が変わった際に(メディアクエリーのブレークポイントで)、画像サイズを変更します。srcset属性には、その際に使うべき画像の候補が設定してあります。WordPressで自動的に作成されるサムネイル画像WordPressは、ページを表示する際に自動的にHTMLを生成しますが、imgタグにはsizes属性を追加して画像の候補を列挙します。この候補の画像は、すでに作成済みの画像です。この中に、正方形のサムネイルファイルが存在しないことがあり、その場合に代わりに他の横長の画像が表示されてしまうことがあるのですが、これが今回のYARPPのサムネイル画像に横長が画像が表示されてしまう問題となります。正方形の画像が保存されていれば(ベストは120x120pxサイズ)今回の問題は解決します。ところで、これらの画像候補が作成されるタイミングですが、、「メディア」でファイルをアップロードした際に自動的に作られます。いうサイズの画像が自動的に作られるかは、WordPressのシステム情報として設定済みなのですが、基本的には、管理画面の「設定ーメディア」で設定されている3種類が作られます。加えて、プラグインなどが自動的にこれら種類を増やすことがあり、YARPPプラグインをインストールすると120x120pxが追加されます。解決方法は登録済みの画像に正方形のサムネイルを追加する今回の問題は、列挙する画像候補の中に正方形の画像がないことですから、サムネイルが存在しない画像に対してサムネイルを追加で作成すればいいことになります。Thumbnails」を使うのがお手軽な方法です。このプラグインを使うと、メディアに登録済みの画像を一括で処理することもできますし、画像を個別に処理することもできます。Thumbnails”というリンクが使えるようになります。Thumbnails」という青いボタンをクリックすると画像が生成されます。(存在しないサムネイルの横に「×」マークが表示されています。)サムネイルを生成した後に、再度YARPPが表示する関連記事部分を表示すると、サムネイルが正方形で表示されているはずです。(※変わらない場合は、キャッシュが残っていることが原因の場合もありますので、強制再読み込み(スーパーリロード)してください。)今後は別のプラグインを使うべき以上、解決方法をご紹介していきましたが、YARPPは使い続けない方がいい問題があります。実は、ガイドライン違反でWordPressの公式サイトからはダウンロードできなくなっています。(2018年10月)いいプラグインだったので残念ですが、今後は他のプラグインを探して、早い段階で乗り換えるしかありません。こちらも参考になるかも:このページは最終更新日から1年が経過しています。情報が古い可能性がありますのでご注意願います。新しい情報があるかもしれませんのでこちらから検索してみてください。既存サイトをWordPressへ移行する方法HTMLで作成された既存サイト(ホームページ)をWordPress化する方法を動画にまとめました。移行に必要な手順を順を追って丁寧に解説した動画です。あなたの既存サイトをWordPressに移行したいとお考えでしたらご覧ください。こちらからご登録ください。1分以内にご覧いただくことができます。