拡大というより、トリミングではないですか。ヘッダー画像の選択で工夫しましょう。
맹조様
お返事ありがとうございます。
トリミングということですと、切り取られているということでしょうか。
カスタマイズのプレビュー画面で見ると、確かに端末ごとに見える範囲はPCよりは
小さくなっていてそれは構わないのですが、そうではなく実際の端末で見たときに
画像全体の中のほんの一部分のみ虫眼鏡で見たような状態になっているのです。
プレビュー画面の通り実際の端末でも表示ができれば何ら問題ないのですが・・
ヘッダー画像を小さくしたり他の画像に変えてみましたが変わらないようです。
説明がわかりづらければ申し訳ありません。もう少し調べてみます。
ロゴは max-width:200px; とカスタマイザのデフォルトのままのようですから、ロゴ画像自体を 200px 幅にしてアップロードしなおしてみませんか。
それがヘッダー画像を拡大してしまうという、挙動になっているかもしれません。
テーマOriaを試用してみたところ、同様症状は確認できませんでした。
http://wp.me/P75tPj-f
맹조様
ご親切にありがとうございます!!
ロゴの問題は考えていなかったので、幅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さんとかぶっちゃいました…あくまで参考程度ということで…
jdbb様
お返事が遅くなり申し訳ありません!
教えていただきありがとうございます。拡大の件解決いたしました・・!
iPhoneのsafari特有の現象だったのでしょうか。
大変助かりました、ありがとうございました!
x743様
ご丁寧にスタイルシートのお手本まで書いていただいて、ありがとうございます!
お陰様でそんなに詳しくない私でも解決することができました。
パララックスについても詳しくなかったのですが、スクロールしていくとヘッダー画像も動く動作のことですよね。確かになくなってしまったようですが、拡大されずに済むことのほうが嬉しいので、やむをえないかと思っております。
メディアクエリでの調整の仕方なども今後調べていきたいと思います。
大変ご親切なアドバイス、誠にありがとうございました。