サポート » 使い方全般 » ヘッダー画像のスマホ・タブレット表示について

  • 初めまして。
    テーマOriaを使用して生花店のサイトを作っているのですが、
    ヘッダー画像(トップ画像)がPCで表示した場合は問題ないのですが、
    スマートフォンかタブレットで表示すると、拡大されてしまって何の画像か
    わからないほどになってしまいます。
    phpを調べたり、スタイルシートなども見てはみたのですが、原因がわかりません。
    横幅がはみ出ているということはないので、レスポンシブの問題ではないのかと思います。
    カスタマイズ画面の各端末のプレビューを見てみると拡大はされていないようです。
    URLを貼り付けておきます。
    http://jazflower.com

    初歩的な質問であれば申し訳ありません。
    お分かりになる方いらっしゃいましたら、ご教授お願い致します。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • 拡大というより、トリミングではないですか。ヘッダー画像の選択で工夫しましょう。

    トピック投稿者 jazflower

    (@jazflower)

    맹조様
    お返事ありがとうございます。
    トリミングということですと、切り取られているということでしょうか。
    カスタマイズのプレビュー画面で見ると、確かに端末ごとに見える範囲はPCよりは
    小さくなっていてそれは構わないのですが、そうではなく実際の端末で見たときに
    画像全体の中のほんの一部分のみ虫眼鏡で見たような状態になっているのです。
    プレビュー画面の通り実際の端末でも表示ができれば何ら問題ないのですが・・

    ヘッダー画像を小さくしたり他の画像に変えてみましたが変わらないようです。
    説明がわかりづらければ申し訳ありません。もう少し調べてみます。

    ロゴは max-width:200px; とカスタマイザのデフォルトのままのようですから、ロゴ画像自体を 200px 幅にしてアップロードしなおしてみませんか。
    それがヘッダー画像を拡大してしまうという、挙動になっているかもしれません。

    テーマOriaを試用してみたところ、同様症状は確認できませんでした。
    http://wp.me/P75tPj-f

    トピック投稿者 jazflower

    (@jazflower)

    맹조様

    ご親切にありがとうございます!!
    ロゴの問題は考えていなかったので、幅200pxで画像を作り直してアップロードしてみました。
    が、相変わらず拡大背景で・・・
    試用サイト拝見したところ、私のiPadでは青一色といった形で、私のサイトと同じくヘッダーが拡大しているように見受けられます。少なくともPCで見た時の綺麗な街の写真ではありませんでした。
    맹조様には同様症状はないとのことで、私のブラウザが悪いのかと(PCもiPhoneもiPadも
    Safariを使用しています)Google ChromeもDLして確認したのですが、
    私のサイトも試用サイトも共に同じ状況でした。
    環境のせいなのでしょうか・・・

    サイトを確認させていただきました。
    このテーマでヘッダ画像をしていしているところが
    background-attachment: fixed;
    background-size: cover;
    このようになっていたのですが、iphoneのsafariでは
    この辺りの挙動がおかしくなります。

    background fixed iphone
    あたりで検索すればいろいろと対処法は出てくると思いますが
    マークアップの仕方によっては面倒だったりした気がします。

    CSSの『background-size: cover;』と、『background-attachment: fixed;』が相性が悪く、そのような表示になっているんだと思います(拡大のされ方を見ると、ページ全体に対してbackground-sizeが効いている感じ?)。

    小テーマを作成して

    .site-header {
    	background-position: center top !important;
    	background-attachment: scroll;
    }

    などとスタイルを上書きすれば、一応表示はされるかと思います(パララックス的な動作はなくなってしまうので、メディアクエリなどで調整する必要はありそうです)。

    ————————
    リロードしておらず、jdbbさんとかぶっちゃいました…あくまで参考程度ということで…

    トピック投稿者 jazflower

    (@jazflower)

    jdbb様
    お返事が遅くなり申し訳ありません!
    教えていただきありがとうございます。拡大の件解決いたしました・・!
    iPhoneのsafari特有の現象だったのでしょうか。
    大変助かりました、ありがとうございました!

    x743様
    ご丁寧にスタイルシートのお手本まで書いていただいて、ありがとうございます!
    お陰様でそんなに詳しくない私でも解決することができました。
    パララックスについても詳しくなかったのですが、スクロールしていくとヘッダー画像も動く動作のことですよね。確かになくなってしまったようですが、拡大されずに済むことのほうが嬉しいので、やむをえないかと思っております。
    メディアクエリでの調整の仕方なども今後調べていきたいと思います。
    大変ご親切なアドバイス、誠にありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「ヘッダー画像のスマホ・タブレット表示について」には新たに返信することはできません。