2023.04.16
2024.07.15

WordPressテーマ Muum アイキャッチ画像の最適サイズは？

IT関連

当ページのリンクには広告が含まれています

スタイリッシュなデザインと多様な用途・業界向けに設計されたWordPressテーマで人気のTCD。その中でも比較的新しくブログに人気のテーマMuumですが、他テーマからの移行作業の中で対応を迫られるものがいくつか存在します。その中でも記事のアイキャッチ（サムネイル）の見栄えが大きく損なわれてしまうケースは対応必須かと思います。この記事ではこのケースの原因と解決法を探ります。

1 アイキャッチ画像が損なわれる原因について
2 Muumアイキャッチ画像の最適サイズについて
3 記事一覧のサムネイル画像の表示範囲について
4 まとめ

アイキャッチ画像が損なわれる原因について

アイキャッチ画像の横幅（width）が関係あるように見えます。設定していたアイキャッチ画像の横幅がMuumで規定されている横幅に満たない場合、画像を規定の横幅になる倍率で拡大してから規定の縦幅になるように画像の縦を端折る処理が内部で動いている…と私は推測しています。元のアイキャッチ画像が縦長だった場合にひどくボケたアイキャッチ画像が生成され、横長だった場合はそれほどでもなかったことからそう推測しました。
そうなると突き止めるべくはMuumで規定されているアイキャッチ画像のサイズとなります。これが分かればアイキャッチを全てそのサイズで作り直せば解決できます。

Muumアイキャッチ画像の最適サイズについて

ここで最初に結論を書いておきます。Muumアイキャッチの推奨画像サイズは横幅740px 縦幅485px です。当初は情報がなくマニュアルを見てもわかりませんでした。ので、自分でいくつか検証をしてこの数値を突き止めたのですが、なんのことはない。エディターをブロックからクラシックに変更してみたら、編集画面右端の設定箇所アイキャッチ画像項目にしっかり明示されていました。

結構な時間を費やして横幅740px 縦幅485pxを割り出したのですが、クラシックエディターに変更一発でこんなにも簡単に出てくるんですね。ブロックエディター使用時でもこの情報は明示してほしかった。

https://yuugikyo-rerise.net/wp-content/uploads/2023/02/gamer_face_1_80px.gif

君さぁ…それさぁ…

早く言ってよぉ～ん！！

https://yuugikyo-rerise.net/wp-content/uploads/2023/02/ailian01_face_1_80px.gif

by 松〇豊

記事一覧のサムネイル画像の表示範囲について

記事一覧で表示されるアイキャッチのサムネイル画像。こちらはアイキャッチ画像よりも多少狭い範囲を表示しています。そこでアイキャッチのサムネイル画像の実表示サイズを割り出そうと試みてみました…が、これはどうやら環境によって見え方が異なりそうだな、と私は判断しました。

私がこう感じたのは、ブラウザの表示倍率を変えてみたらサムネイルで見える範囲が変わることに気が付いたことです。倍率を変えるとサムネイルの表示際が結構変わるのです。下図は私のブラウザ環境（Windows10、Chrome var.111）で倍率を変えてみた記事一覧のアイキャッチ画像の一部です。倍率100%時では紫の縁が縦横に表示できていますが、倍率を変えると縁の線の見え方が変わります（もっとも倍率175%でサイト閲覧、はなかなかないでしょうが）。