SWELLの「画像表示サイズ」の設定について確認する

WordPressのブロックエディターには、挿入した画像サイズを変更する「画像サイズ」と「画像の寸法」の設定がありますが、SWELLテーマを使っていて「画像の表示サイズ」という項目もあったので、気になって調べました。

WordPress標準の「画像サイズ」と「画像の寸法」の設定場所とSWELL固有の「画像の表示サイズ」の位置関係は次の画像の通りです。

なお、WordPress標準の「画像サイズ」と「画像の寸法」を設定を変更する場合の効果については、次の記事で詳しく解説していますので、よろしかったら参照ください。

あわせて読みたい

【WordPress】ブロックエディターの「画像サイズ」設定と実際の画像ファイルの関係を解説 WordPressのブロックエディターでは、挿入した画像サイズを簡単に変更できます。それが「画像サイズ」の設定です。「大」や「中」など特定のサイズを選択できるので、ペ…

SWELL固有の「画像の表示サイズ」の機能

「画像の表示サイズ」では、プルダウンで次の項目のいずれかを選択することができます。

SWELLのマニュアルやフォーラムで調べてみても、「画像の表示サイズ」についての記載はありません。インターネットで調べてみても、ズバリ説明している記事もありませんでした。

仕方がないので、実際に変更してページがどのように変化するかを検証することにしてみました。結果は拍子抜けするものでした。引っ張っても栓無いことなので結論から申し上げます。

どうやら、編集画面で大きな画像が邪魔な場合に、画像を縮小表示させて全体を見やすくするためだけの機能のようです。

確かに、編集画面のほとんどを画像が占めていると、前後の見通しが悪くなるのは事実です。しかし、あくまでの編集中の画像を小さく表示させるだけの機能であって、画像の設定とはまったく無関係なので、画像の設定項目の中にあるのはまぎらわしいですね。

「画像の表示サイズ」の機能を確認する

結論は前述した通りですが、それをどのように確認したかを説明します。

確認方法は、他の画像の設定は変えずに「画像の表示サイズ」を「指定しない」に設定したときと「小さく表示」に設定したときで、公開されるページにどのような違いがあるか確認します（実際は編集画面の見た目以外は何も変化しないのですが）。確認する内容は次の2点です。

確認で使用する画像や環境は、前述のリンク記事と同じ環境で行います。「画像サイズ」の設定との違いを理解する上でも、ご一読をお勧めします。

リンク記事で説明していますが、<img>タグの確認をしやすくするために、出力される<img>タグがさまざまな属性を出力しないよう、SWELLでいくつかの機能を停止しています。

「指定しない」に設定した場合を確認する

最初に「画像サイズ」と「画像の寸法」を下記の通りに設定して、「画像の表示サイズ」は「指定しない」に設定した場合を確認します。

公開したページを確認すると、ブロックエディターで表示されていた画像と公開ページでの画像の見た目の大きさは変わりませんでした。

次に公開したページの<img>タグを確認します。

<img decoding="async" width="300" height="225" src="http://192.168.56.101/wp-content/uploads/2023/07/DSCF0339-300x225.jpg" alt="" class="wp-image-7">

「画像サイズ」で「中」を設定しているので、画像ファイルは中サイズ用の「DSCF0339-300×225.jpg」が使われていることがわかります。width属性とheight属性は「画像の寸法」で設定されている値になっていることもわかります。それ以外に特に変わった点は見受けられません。

「小さく表示」に設定した場合を確認する

次に「画像の表示サイズ」だけ「小さく表示」に変更した場合を同じように確認します。

「小さく表示」を選択すると、ブロックエディター（編集画面）上で画像は縮小して表示されます。このときの公開ページの画像サイズを目視で確認しても「指定しない」のときと大きさは変わりませんでした。

このときの公開したページの<img>タグは次の通りです。

<img decoding="async" width="300" height="225" src="http://192.168.56.101/wp-content/uploads/2023/07/DSCF0339-300x225.jpg" alt="" class="wp-image-7">

<img>タグは画像ファイル、width属性、height属性を含め「指定しない」のときと何も変わっていないことがわかります。

まとめ

このように「画像の表示サイズ」を変更しても、公開したページには何も変化がありません。あくまでも編集画面での表示サイズだけに影響します。

「画像の表示サイズ」は画像設定とは無関係なので、できれば他の場所へ移動してほしいと思う今日この頃です。いくつかの編集モードがあるので、この機能も編集モードの一つにした方がわかりやすかったと思います。