当「monk himself」でテーマを「THE THOR」に変更してから気になっていた点がありました。投稿記事トップのアイキャッチ画像の解像度が低いことです。
実は、ローカル環境で設定していた当初からその件には気が付いていました。しかし、解決策が見つからなかったので、そこは後回しにして正式オープンを優先しました。
今回、無事オープンしたのでジックリと問題解決に向けて取り組みました。
事例を検証
この事例で気が付いたのは、すべてのアイキャッチ画像の解像度が低いわけではなく解像度が低い画像との通常の解像度の画像があることです。
解像度が低い画像との通常の解像度の画像を見比べると、その違いがわかります。
解像度が低い画像になるのは縦幅が短い画像だけです。そして、縦幅が短い画像はいずれも左右が切れ拡大表示されるという現象を示しています。拡大されるので必然的に解像度が低くなると思われます。
私は以前から「WordPress」にアップする画像は横幅1,000pxに統一しています。
投稿記事トップのアイキャッチ画像の横幅は768px。なので、横幅を基準に1,000pxが768pxに縮小されるだけなら解像度が低くなるはずありません。そして、横幅が足りないわけではないので拡大される理由もありません。
そもそも、前テーマ「albatros」ではそのような事例は発生していません。何も加工せず素直に横幅1,000pxを縮小して768pxで表示すれば解決するはず。でも「THE THOR」はどこかで余計な仕様を加えているため、このような事例が発生すると考えられます。
その余計な加工はどこで行われているか、そして、それをキャンセルする方法があるのかを調べることにしました。
画像の横幅を768pxにする
まず、単純な確認方法としてアイキャッチ画像の横幅を1,000pxから768pxにした画像を作ってアップロードしてみました。横幅が基準ならこれで左右は切れないで表示されるはずです。
でも、ダメでした！
今まで通り、左右が切られ拡大表示しているので解像度の低い画像となっています。ということで「THE THOR」のアイキャッチ画像は横幅を基準として表示していないことがわかります。
この現象から考えられるのは、ある一定以上の縦幅がないと規定の縦幅まで拡大表示する? です。横幅なら縮小になるのですが、縦幅が基準なら拡大となるので解像度の不足になると結論付けました。
では、どのように対処したら解決するのでしょうか?
会員フォーラムに尋ねる
まず最初に頼ったのが「THE THOR」の会員フォーラムです。
初めての会員フォーラムの利用。事前に同様の質問がなかったかを確認したところ同じ質問がありました。しかし、「768pxの画像にする」との程度の回答で私が求める内容ではありませんでした。このため再度質問です。
しかし、前回と同様の回答しかありませんでした。そこで、別の具体的な解決策を求める内容を求めて質問を重ねました。
すると、質問の閉鎖を食らいました…
変な仕様を加えてしまっている「THE THOR」の仕様への不満と具体的な解決策を提示できない「THE THOR」のサポート力の不足を問題視したのがいけなかったらしいです。私は回答者へ攻撃的な言葉は発していないのに「回答者がかわいそう」と言うのもその理由となっていました。正直、「何それ?」です。
会員フォーラムはユーザー同士とは言いながら多少は「THE THOR」のサポート部門がフォローしていると思っていましたが、それもないようです。
レンタルサーバーで長いこと利用している「XREA」は当初ユーザーフォーラムでサポートしていました。でも、仕様や技術的な点では「XREA」サポート担当者が出てきて助言をしていました。それもあり的確な返答があり「XREA」のユーザーフォーラムは上手に回っていました。私も何度もユーザーフォーラムで助けられました。
私はその経験があるので「THE THOR」でも「XREA」レベルの会員フォーラムの充実を期待していたのですが買被りだったようです。
マニュアルも役に立たないし会員フォーラムでも満足な回答を得られない「THE THOR」。
その中で唯一幸いなことは、「THE THOR」を導入しているユーザーが多く、使い方などの情報発信してくれるブログが多いことです。これにより、マニュアルやユーザーフォーラムが役に立たなくても検索をすれば問題の解決にたどり着くことができます。
しかしこのサポート状況では、機能が豊富で魅力的ですが初心者には薦められないことがはっきりしました。
プラグインを探す
マニュアルもユーザー会員フォーラムも使えないので自力で解決するしかなくなりました。
そこでまずは解決につながるプラグインがないか探しました。「Auto Post Thumbnail」、「Regenerate Thumbnails」などそれらしき物が数個あったので試しましたが、いずれも問題解決には至りませんでした。
プラグインで解決したら簡単だったのですが、ダメだったので次の策を考えました。
ソースコードの修正
次に試したのはソースコードの修正です。
該当するソースコードあるいはCSSを見つけ、書き換えか追加することでの解決を目指しました。
本番環境で直接ソースコードの書き換えを行うのは危険すぎます。そこで、「Local by Flywheel」のローカル環境でテストすることとしました。ローカル環境なら何度、どんな重大なエラーが起こしても本番環境にはまったく問題ありません。テーマ変更の際、ローカル環境を作っておいて良かったと改めて思いました。
該当箇所のソースコードを見つけ「THE THOR」と「albatros」と比べました。
こちらが「THE THOR」。
<span class=”eyecatch__link”>
<img width=”768″ height=”452″ src=”*****/wp-content/themes/the-thor/img/dummy.gif” data-layzr=”*****/wp-content/uploads/2020/12/201206_01-768×452.png” class=”attachment-icatch768 size-icatch768 wp-post-image” alt=”「EaseUS Data Recovery Wizard for Mac」”/>
</span>
</div>
こちらが「albatros」。
<img width=”718″ height=”423″ src=”*****/wp-content/uploads/2020/12/201206_01-718×423.png” class=”attachment-single-thum size-single-thum wp-post-image” alt=”「EaseUS Data Recovery Wizard for Mac」” loading=”lazy” srcset=”*****/wp-content/uploads/2020/12/201206_01-718×423.png 718w, *****/wp-content/uploads/2020/12/201206_01-620×365.png 620w, *****/wp-content/uploads/2020/12/201206_01-300×177.png 300w, *****/wp-content/uploads/2020/12/201206_01-768×452.png 768w, *****/wp-content/uploads/2020/12/201206_01-375×221.png 375w, *****/wp-content/uploads/2020/12/201206_01.png 1000w” sizes=”(max-width: 718px) 100vw, 718px”/>
</figure>
アイキャッチ画像の該当CSSは「THE THOR」が「eyecatch__link」、「albatros」が「eyecatch」とわかりました。
次ぎに「eyecatch__link」の場所を探しました。検索に利用したのはテキストエディタ「Jedit Ω」の「マルチファイル検索」です。この「マルチファイル検索」は強力! フォルダー内のすべてのファイルを一遍に検索してくれます。Webサイトのファイルのように個数が多いのをひとつひとつやっていたら時間ばかりかかります。「マルチファイル検索」なら1回の検索で済むので便利です。
「Jedit Ω」の「マルチファイル検索」でリストアップした結果、該当ファイルは24個ありました。また、該当CSSの個所は138ヵ所です。該当個所はわかりましたが数が多すぎます。今回のアイキャッチ画像の修正に該当する個所が138ヵ所の内どれになるのかわかりません…
素人が手打ちで作ったWebサイトなら該当個所が数ヶ所で済むのでひとつづつ潰していっても対応可能ですが、「WordPress」のような複雑なファイル構成だと素人には手が出ません。
仕方がないのでソースコードから解決するのは諦め、別の方法を試すことにしました。
しかし、この経緯で今まで知らなかった情報を知ることができました。
それは「WordPress」の「メディア」の「新規追加」で画像をアップロードした場合「uploads」ファイルには元の画像サイズの他に768px、620px、375px、300pxが生成されることです。
そのような仕様になっているとは4年半「WordPress」を使ってきましたが知りませんでした。
ソースコードを見ると、投稿ページのアイキャッチ画像にはこの中から768pxを使うのが「WordPress」の標準仕様のようです。この768px画像をそのまま持ってくれば良いだけなのに何故「THE THOR」ではそのようにしないのだろう… と改めて思ってしまいました。
768px×463px画像にする
いろいろと解決方法を探しましたが結局見つからなかったので、アイキャッチ画像のサイズを「WordPress」の標準仕様の768px×463pxにしてアップロードすることにしました。ひと手間増えるので面倒ですが、解像度が低い画像をアイキャッチ画像にしたままにはできないのでしかたありません。
illustratorで768px×463pxのアートボードを作り、そこにアイキャッチにする画像を「配置」。この枠内で希望の大きさ、位置に調節してpng形式で「別名保存」をします。ただし、画像が横長の場合そのまま768px×463pxに配置すると上下に空白が出てしまうので、必然的にアイキャッチする画像を変更しなくてはならないケースもあります。
新たな画像を「WordPress」にアップロードし該当記事の「アイキャッチ画像」として指定。仕様通りの上下左右のサイズなので当然と言えば当然ですが正しく画像が表示されました。
手間はかかるもののこの方法なら表示に問題ないことが確認されました。
まとめ
以上のようにやっと解決!
アイキャッチ画像ひとつ対応するのにこんなに悪戦苦闘するとは思いませんでした。
正直、投稿ページのアイキャッチ画像なんて「WordPress」で仕様が決まっているのでテーマを変えても表示は同じだと思っていましたが、認識が甘かった！
今後テーマを変える時にはローカル環境でシッカリと対応する時間を取ることが必要と実感しました。
