解決済み
Question

画像の拡大表示

  • s sheila counts
  • 画像を設置した際、「クリックで拡大」としてライトボックスで拡大表示ができます。
    ただ設置した画像の横幅や高さを指定すると、拡大表示をしても指定した大きさと同じ状態が表示されてしまいます。

    記事上の画像では横幅や高さを入れて少し小さく表示して、クリックしたら元画像のサイズで表示されるようにするにはどうすればよいでしょうか。

    • WP 6.7.1
    • PHP 8.3.x
    • JIN:R 1.4.0
    • ロリポップ
    • GoogleChrome
    • Windows11
    2026/03/17 19:52
  • tsu_

    お世話になっております。

    >> 画像の横幅や高さを指定すると、拡大表示をしても指定した大きさと同じ状態が表示されてしまいます

    こちらの環境下で検証すると同様の症状が再現できず、拡大表示される状態なのですが、拡大表示されないのはPCとスマホどちらでしょうか?

    また、お手数おかけいたしますが、
    ・編集画面の画像サイズ入力箇所のスクリーンショット
    ・実際のサイトのURL(非公開設定も可能です)
    をご共有いただけますと幸いです。

    ご確認よろしくお願い申し上げます。

    2026/03/18 23:34
  • s
    sheila counts

    親スレッドにURLと画像のURLを記載しました。
    画像の設定はファイルを添付しております。
    PC、SPどちらの環境も同じ状態です。
    よろしくお願いいたします。

    2026/03/19 20:40
  • s
    sheila counts

    サイズもそうですが、アスペクト比も設定したままになる状態が正しい挙動でしょうか。記事上ではフルワイドとしておりますが、元画像は正方形よりの画像です。
    拡大時は正方形で元のサイズで表示されるのが理想ではありますが・・
    よろしくお願いいたします。

    2026/03/19 20:47
  • tsu_

    URLと画像のご共有ありがとうございます。

    まず、「アスペクト比も設定したままになる状態が正しい挙動でしょうか。」についてですが、アスペクト比を16:9にした状態で、拡大時に16:9になるのは正しい挙動です。

    拡大されない件につきましては、原因切り分けのため、以下をご確認いただけますでしょうか。

    ①WP Fastest Cache を停止
    ②WP Fastest Cache のキャッシュ削除
    ③その状態で、画像クリック時の拡大表示の挙動が改善するか確認

    あわせて、可能でしたら プラグインをすべて停止した状態でも同様に症状が出るかもご確認いただけますと幸いです。

    お手数をおかけしますが、ご確認のほどよろしくお願いいたします。

    2026/03/20 22:52
  • s
    sheila counts

    アスペクト比の件かしこまりました。
    またキャッシュプラグイン、また全プラグインを停止しましたが挙動に変更はありませんでした。(参考までにインストールしているプラグインのキャプチャを添付します)
    現状キャッシュのプラグインだけを無効化しておきました。
    tsu_様の方では提示しましたURLを閲覧いただくといかがでしょうか。

    また関係ないかもしれませんが画像周りで1点だけ共有です。
    「sample.jpg」というファイルをアップロードして記事を公開後、「sample.jp」をライブラリから完全削除し、改めて別の「sample.jp」をアップロードしても古い方の画像が表示されるという現象はインストール初期から発生しています。
    画像周りのキャッシュが、ロリポップ側の設定等で残っている可能性などはありそうでしょうか。

    お手数おかけいたしますがご確認のほどよろしくお願いいたします。

    2026/03/21 13:01
  • tsu_

    スクリーンショットありがとうございます。

    画像クリック時に少しカクついたり、一瞬小さくなるような挙動が見られましたので、JavaScript / CSSの干渉が起きている可能性がありそうです。

    念のため確認ですが、全プラグイン停止後に、WP Fastest Cache やサーバー側のキャッシュ削除も行ったうえで、同じ挙動になるかはご確認いただいておりますでしょうか。

    もし未確認でしたら、お手数ですが、改めて以下の順でご確認をお願いいたします。

    ①全プラグイン停止
    ②WP Fastest Cache / サーバー側キャッシュ削除
    ③その状態で、画像クリック時の拡大表示の挙動を再確認

    あわせて、全プラグイン停止時に wpLingua も停止対象に含めていたかもお知らせいただけますと幸いです。
    (英語サイト側では少し挙動が異なるので、念のため確認させてください)

    また、「sample.jpg」の件ですが、WordPressではよく起こる症状の1つなので、別のファイル名でアップロードされることをお勧めいたします。

    お手数をおかけいたしますが、ご確認よろしくお願い申し上げます。

    2026/03/22 22:41
  • s
    sheila counts

    ご回答ありがとうございました。
    ①全プラグイン停止
    ②WP Fastest Cacheを停止前に全キャッシュ削除して停止
     ※ロリポップライトプランのためサーバーキャッシュ機能なし
    上記を試しましたが変化なしでした。
    念のため一度もアクセスしていないedgeで確認しました。

    なおファイル名の件ですが「sample.jpg」はあくまで例となります。
    実際はthum_yyddmm.jpg といった日付ごとに生成したファイルですが、修正した内容を上書きすると修正前のファイルが残るという状態です。

    お手数おかけいたしますがご確認のほどよろし宇お願いいたします。

    2026/03/22 22:59
  • s
    sheila counts

    調べてみたらライトプランでも「ロリポップ!アクセラレータ」があったのでキャッシュ削除後に機能自体をオフにして確認しましたが変化はないようでした。。
    よろしくお願いいたします。

    2026/03/22 23:03
  • tsu_

    検証いただき、ありがとうございます。

    この記事のいくつかの画像でのみ不具合が発生していることを考慮しますと、
    ・不具合が起きている箇所の画像の要因
    ・その画像に対する設定の要因
    のどちらかを疑うのが自然かと思います。

    こちらでもサイズの検証はしているのですが、試しに1枚目の画像サイズ幅を500→300などにして変化があるか確認いただけますでしょうか?

    2026/03/23 22:28
  • s
    sheila counts

    ご回答ありがとうございます。
    親記事のURLを検証用記事のURLに変更しました。

    サイズをいくつか変更したものを並べた記事を作成しました。
    いずれも変わらずでした。。
    ご確認のほどよろしくお願いいたします。

    2026/03/24 09:15
  • s
    sheila counts

    補足となります。
    画像の件ですが、特定の記事のみの画像ではなく、その他の記事もすべて同様になっています。(画像をクリックで拡大表示する箇所はすべて同じ症状)
    よろしくお願いいたします。

    2026/03/24 10:19
  • tsu_

    細かくご検証いただき、感謝申し上げます。

    こちらでも条件を変えながら検証を続けたところ、画像のサイズ指定と配置指定を同時に行った場合に、同様の現象が再現することを確認いたしました。

    ご迷惑おかけしてしまい申し訳ありません。

    (追加CSSなどを使用しない)今すぐの回避策としては、
    ・25:50:25の3カラムの中央に画像を設置
    ・画像サイズの指定する場合は配置指定を使用しない
    といったものになりますが、いずれもご希望される形にはならず、大変申し訳ございません。

    引き続き検証を進め、原因が特定できましたら、次回以降のアップデートで対応させていただければと思います。

    ご不便をおかけし恐縮ですが、ご確認の程よろしくお願い申し上げます。

    2026/03/24 23:19
  • s
    sheila counts

    調査ありがとうございました。
    追加CSSで対策が可能であればご教授いただけると助かります

    次回以降のアップデートお待ちしております。
    どうぞよろしくお願いいたします。

    2026/03/25 16:16
  • tsu_

    ご連絡ありがとうございます。

    いくつか方法はあると思いますが、
    画像ブロックの追加CSSに以下のコードを記入して変化があるかご確認いただけますでしょうか。

    .wp-block-image .jinr-add-class-container figure img {
    width: 400px;
    }

    ※画像ごとにサイズを変えたい場合は、もう少し細かい対応が必要になります

    お手数おかけしますが、ご確認よろしくお願いいたします。

    2026/03/25 23:14
  • s
    sheila counts

    ご回答ありがとうございました。
    1.画像のwidth指定を削除する
    2.いただいたcssを設定する

    上記を対応したら正常に動作しました。
    ※1を削除することで、拡大後の画像サイズが指定なしと同様となる
    ※2は拡大前の記事上での見え方のサイズ(記事上では500pxとしました)

    アップデートまではこちらの方法で対応したいと思います。
    ご検証ありがとうございました。

    2026/03/26 10:07
CLOSE