2023.03.08 2023.04.19

JIN:Rの記事リストのアイキャッチ画像のサイズが統一されない問題について

TOMI

この記事について

WordPressテーマの「JIN:R」の記事リストのブロックを使用すると、表示されるアイキャッチ画像のサイズがバラバラになってしまう現象について解説します。

※2023/3/16【JIN:R】Ver1.0.9にて解決済

私ははcocoonを使用してブログを書いていたのですが、最近JIN:Rというwordpressテーマを購入したので、こちらに乗り換えてブログを書いています。

詳しいJIN:Rの使い方やご購入はこちらの「JIN:R 公式HP」をご覧ください。

JIN:R 公式HPへ

使いやすさとデザインは抜群で本当に満足しているのですが、一点困ったことがありました。

記事リストのブロックを使用して、記事の一覧を表示しようとすると

このように一番左のアイキャッチ画像のみ横長に表示されてしまい、本来は全て縦長画像を表示させようと思っています。
設定しているアイキャッチ画像のサイズは全て同じサイズです。

JIN:Rのバージョン

1.0.8

cromeのデベロッパーツールを使用して中身を確認すると、

一番左の横長表示のアイキャッチ画像

<img class="a--post-img-src" src="https://xxx.com/wp-content/uploads/2023/03/sin.jpg" alt="AAA" loading="lazy" width="357" height="200" srcset="https://xxx.com/wp-content/uploads/2023/03/sin_005_hyoushi_-320x180.jpg 320w,https://xxx.com/wp-content/uploads/2023/03/sin_005_hyoushi_-640x360.jpg 640w" sizes="(max-width:552px) 30vw,(max-width:781px) 35vw , (max-width:1131px) 30vw, 20vw">

左から２番目の縦長表示のアイキャッチ画像

<img class="a--post-img-src" src="https://xxx.com/wp-content/uploads/2023/02/00e24.jpg" alt="AAA" loading="lazy" width="357" height="200" srcset="" sizes="(max-width:552px) 30vw,(max-width:781px) 35vw , (max-width:1131px) 30vw, 20vw">

となっています。

どうやら「scrset」という属性が悪さをしているようです。

試しにデベロッパーツールで「scrset」属性の記述を削除してみると一番左のアイキャッチ画像が縦長表示されるようになりました。

「scrset」属性をなんとかすればうまくいくことがわかりました。

調べてみると「scrset」属性というのは画像のサイズを条件によって切り替えてくれるために設定するもので、解像度の高いディスプレイで表示させるときなどにサイズを切り替えてくれるようです。

特にこのサイズ設定をした覚えはないのですが、これは画像をアップするときに自動的に設定されるものらしく、ということは一番左がおかしいのではなく、右の３つのアイキャッチ画像がなぜかsrcsetの属性が設定されていない状態となっています。

思い返せば、一番左は「JIN:R」で作成した記事であり、右の三つは「cocoon」という別のテーマからインポートして作成した記事でした。
テーマ移行の際にうまく属性を引き渡せていない可能性があるかなと思います。

とりあえず、画像をアップしたときに自動的に追加されてしまうsrcset属性というものを無効にする方法を調べ、いろんなサイトで紹介されている方法を試したのですがどれもうまくいかなかったので、もうギブアップと思い、ダメ元でJIN:Rの開発者の「ひつじ」さんに問い合わせてみたところ、