サポート » 使い方全般 » 画像のサイズが端末で変わる

  • tj

    (@takashijfjkr)


    ブログで写真を入れています。

    配置は、「なし」
    サイズは、「フルサイズ」

    縦横の写真を長辺640pxで統一にしてupしいています。

    PCではすべて望む通り?のサイズで表示されます。
    ですが、
    タブレット(ipad)やスマートフォン(iphone)で表示するとなぜかその写真が小さくなります。
    (補足で、過去にはそのようなことはなかったような気もするのですが。一時ふと気付いた感じもします)

    これはレスポンシブルに勝手にやってくれているのかなと思ったのですが、なぜか自分がスキャンして取り込んだ画像は上記と同様の設定にしていてもサイズが変わりません、PC表示と同じように望むサイズのままです。

    もしそういうことができるのなら全部の写真・画像をPCと同じような小さくないサイズで表示したいのですが、その「サイズの変わらないスキャン画像」と「サイズが変わる写真画像」の違いを探してみたのですが何もわかりません。
    ちなみにスマートフォン(iphone)では、縦表示ですべて揃ってる見やすい問題ない表示。横表示にするとipadと同様に画像サイズに差が出ます。

    ちなみに同バージョンのwordpressで異なる2種類のテーマを使用していますが、両方とも同じ症状です。

    細かいコードのいじり方とか全くわからないものですが、もし何かお分かりになられる方がいましたらお教えいただけると嬉しいです。
    よろしくお願いいたします。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • モデレーター Okamoto Hidetaka

    (@hideokamoto)

    WordPressのバージョンは4.4または4.4.1ですか?

    tj

    (@takashijfjkr)

    失礼しました!

    最新の4.4.1です。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    WordPress4.4からコアに実装されたレスポンシブイメージの関係でしょうかね。
    http://parashuto.com/rriver/responsive-web/responsive-images-on-wordpress-4-4

    ここにある記事のようなコードは出ていますか?

    tj

    (@takashijfjkr)

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

    srcset sizesというコードのことでしょうか?
    ありませんですね。

    過去の記事でも大きく表示されていた画像も小さくなってしまった気がします。確か、以前は大きかったはず…だと思います。

    あとこれも曖昧で定かではないでのすが、ここ最近(2,3ヶ月でしょうか?)投稿の編集画面で画像を入れる時に、「メディアを追加」ボタンより操作して画像を入れたときのコードがやたら短くなった気もしていました(前までこんな短かったっけ?と)。

    全部曖昧な記憶情報ですみません。

    お使いのテーマなどは独自にいじったものでしょうか?それともダウンロードしてきたものでしょうか?

    アップロードする画像の大きさによって自動生成されるもののサイズのバリエーションが増えます。
    それを利用してレスポンシブイメージは実装されているので、そこら辺をいじれば良いかもです。

    もしくは、手っ取り早くレスポンシブイメージを無効化してしまうのも手かと。
    WordPress4.4でスマホで見た時に画像が荒くなるのを修正する方法 | OPENCAGE

    tj

    (@takashijfjkr)

    Toro 様
    こんにちは。
    連絡ありがとうございます。

    使っているテーマはダウンロードしたものです。
    いじる知識は全く持ち合わせていないところです。

    「無効化」・・・のページを見てみたら いじる 必要があるんですね(+_+)。
    いじるのは、わからなくちょっと怖いところでもありますね。

    今回記事を上げてみて、症状は変わらないのですが、今回はスキャンした画像も小さくなっていました。
    しかし、以前に上げた記事内のスキャンした画像は大きいままです。

    tj

    (@takashijfjkr)

    okamoto 様
    一つ前の投稿の最後の部分
    「今回記事を上げてみて、症状は変わらないのですが、今回はスキャンした画像も小さくなっていました。
    しかし、以前に上げた記事内のスキャンした画像は大きいままです。」
    そこで違いを見てみました。

    wordpressの「投稿の編集」「テキスト」ではコードに差は見られなかったのですが、そのページを「ブラウザからソース」で見てみたら違いました!(基本的なところがわかっていなくすみません)
    ipadでも希望のサイズで表示されている画像コードにはsrcset sizesが入っていません。望まないサイズに変更されているのはsrcset sizesコードが入っていました!

    これが原因だったのでしょうか!?

    もしこれが原因ならどのように対処すれば宜しいのでしょうか?

    お時間ございましたらご返答お待ちしております。
    いつもすみません、ありがとうございます。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    Responsive Image機能を無効化することで解決するのではないかと思います。
    以下のような無効化プラグインもありますので是非お試しください。
    https://wordpress.org/plugins/disable-responsive-images/

    tj

    (@takashijfjkr)

    ありがとうございます!

    素人的にはいつもの編集画面でそのsrcset sizesコードだけいじって消せればいいんですけどね。

    無効化…全体的に無効化されるということですよね恐らく。
    ちょっと怖いですが、プラグインの方、検討してみます。

    ありがとうございます!

    tj

    (@takashijfjkr)

    wordpressの「投稿の編集」の「テキスト」モードは簡略化?されているのか、「ページのソース」自体とは異なった表記がされているんですね。

    この「ページのソース」をいじれたら、srcsetとsizesを消せば一つ一つのページは解決するような気がします。
    いちいち全部修正はしてられませんが (+_+)(とりあえずの打開策として)。

    自分がupした各記事のソースをいじることはできないのでしょうか?

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    WP側で処理してるので、投稿画面からは触れませんね。

    tj

    (@takashijfjkr)

    okamoto様 Toro様
    ありがとうございました。

    わけのわからないところからここまで原因がわかっただけでも大きなものになりました。

    以後追求していきたいと思います。

    たくさんのご対応誠にありがとうございました。

    tj

    (@takashijfjkr)

    棚ぼたでサイズ問題は解決しました!

    サイズの問題は、引き続き苦戦していました。

    途中で別件の問題に気付きました。
    それは、
    「画像の劣化」

    PC(MacOSX)とiPhoneでは望む画質であったのですが、なぜかタブレット(ipadmini-retina)だけで画像が劣化していました。
    わけのわからないことだらけでしたが、ふと「Retina」というところにたどり着き、「WP Retina 2X」というプラグインを発見。
    取り入れてみたら、
    設定の問題かもしれませんが、推奨されている一般設定でいくとPCやiphoneほどの画像ほど鮮明ではないと思いますが、それに限りなく近いクリアな画像になりました。
    このプラグインで画像の劣化の問題はほぼ解決したと思われます!

    そこでなぜか棚ぼたが!
    過去のここの質問で取り上げていたレスポンシブ?デザインによるタブレットだけ画像サイズが不本意なサイズに勝手に小さくなる問題。

    これがその「WP Retina 2X」のプラグインを入れたことによって改善されました!!!

    その直前にwordpress4.4.2にしました、その時点でチェックは入れましたが問題は何も解決されてはいませんでした。
    なので「WP Retina 2X」のプラグインがなぜかサイズにも効果を発揮したのだと思います。

    ソースを見ると、srcset sizesというソースはまだ入っていましたが、サイズの問題は棚ぼたで解決できたかと思われます。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • トピック「画像のサイズが端末で変わる」には新たに返信することはできません。