モバイル表示において、ある固定ページだけ左によって右に余白ができてしまう

わいひら様　早々のご回答ありがとうございます。

スマホのモバイルメニューからプロフィールタブをクリックし、開いたページがスマホ画面の３分の２ぐらいの幅になっており、３分の１のが余白になっています。他のページはスマホ画面いっぱいに表示され良好なのですが。
もしかすると本文上にアマゾンのくるくるウィジェットを貼り付けている影響でしょうか。

モバイル時の背景画像ですがスタイルシートで画像をモバイルの時だけ表示しないような設定は可能でしょうか。

お忙しい所、申し訳ございませんがよろしくご指導お願い致します。

※ 古いブラウザは、どうなるのか知りませんがたいていイケるんじゃなかろうかと思います。

自分のサイトは面倒と言うのもあり、あまり凝ったことをやってないので人のことを言える感じではないんですけども、ひとまずヘッダ画像は、モバイルの時にどう見えるかを決めます。
例えばiPhone5sの場合、横幅が320pxなので、320pxの時、どれぐらいの高さにするかを考えます。
仮に、50pxだったとしましょう。

で、320pxの横幅と50pxの縦幅の画像を作ります…と思ったら間違いで、その比率を考えます。
50 / 320 = 0.15625で横幅がいくつであっても、横幅 * 0.15625とすれば同じ比率になります。

仮に画面幅が568pxになったとしましょう。つまり、iPhoneを横向けたと言うことです。
すると、568 * 0.15625 で 88.75px、つまり、568px : 88.75pxは比率的に320px : 50pxの画像と同じことになります。

まぁちょっとモバイルで縦50pxは小さすぎますかね(笑)

これを何故しているかというと、レスポンシブにするにあたって、ある画面サイズの画像をいくつか用意し、メディアクエリで画面サイズを変えると言うことも考えられるのですが、どうしてもピッタリとフィットしないので引き伸ばす必要が出てきます。そうすると、画像が横伸びになったり、縦伸びになったりしてしまう事もあったりするのではないでしょうか？(そうさせない方法もあります)

なので、必要なものはある程度の大きな画面でも耐えられるぐらいの高画質ながら、モバイルの通信環境でも耐えられるぐらいのファイルサイズをもった画像で、モバイル時にこのサイズにしたいと言うサイズ設計がいるのです。tinypingなどのサイトを利用されてオプティマイズ(画像最適化)をされると良いかと思います。

もしこれらが決定されたら、上の計算を使ってcssはこう書けます。

header {
  background-image: url("画像へのパス");
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: cover;
  height: 0px;
  padding: 0px 0px 15.625%;
  overflow: hidden;
  width: 100%; /*これはいるかどうかは不明、多分無くても行けそう*/
}

0.15625の比率を出しましたが、cssでも扱える%に直すために、上記cssでは100をかけて15.625にしてあります。

上記例をふまえて、X: 320px , Y: 100px の画像を用意した場合なら、100 / 320 = 0.3125 * 100 = 31.25% ← こうなるわけです。
cssではheaderの高さを0にして、paddingによって高さを稼ぎます。paddingは、3つのパラメーターの場合、

padding: 上パディング 左右パディング 下パディング;

と言う設定になりますから、

padding: 0 0 31.25%とすると、高さはないのですが、横幅に対して31.25%の高さを確保することができます。横幅に対して の 縦% ← これが横幅がいくつになっても縦の比率は自動的に計算される、つまりレスポンシブに画像がその比率を保ちながら横幅に対して変化すると言うことになります。

しかし 1点 問題があります。画面幅、1070pxのPCの様な端末でサイトを見た際に、31.25%で計算すると、画像自体は正しい元々の比率を保って表示されるのですが、高さが334.375pxになります。もっと広い画面幅で見ればやはり高さはそれにあわせて高くなるので1980pxの画面幅で見たら618.75pxにまでなってしまいます。

そうなると、あまりにも大きすぎますから、その時は泣く泣く上下を切り取る感じに、あるいは下を切り取る感じで

@media screen and (min-width: 1024px ){
header {
background-position: 50% 50%; /*画像は中心揃え*/
padding: 0 0 7.8125%;
}
}

こうすれば、1980pxの時に154.6875pxの縦幅を持ったヘッダになります(1280pxの時100px計算)。
どうしても画像上下を切り取るとダメだと言う場合は、
background-position: 50% x%;として、横はセンター揃えで縦を任意の数値にして上下移動もできますので画像のどこを表示させたいかを調節することもできます。xが0%で上揃え、100%で下揃えです。

で、次に考えないといけないのが中に入っているタイトルのサイズやその位置です。これもシームレスに変更するのであれば、%やem,rem等の相対値(pxは絶対値)で設定し直す必要もあります。まぁここらは調整次第とデザインによって異なるので、色々チャレンジしてみて下さい。

画像によっては1980pxの時は縦揃え100%にしておいて顔を隠し、ブラウザの幅が狭くなっていったら次第に顔を表示するというようなギミックも仕込めます(笑)

サンプル例: レスポンシブヘッダ
javascriptを使ってないので、javascriptの画面に色々説明してたりもします。
サンプルはいじれるはずなので、サイズを色々変えたりして試してみて下さい。

参考資料: これらはうちのサイトですがSimplicityを少し改造してみた 番外編 part13 画像のアスペクト比を16:9にする & その他 で利用したテクニックの応用です。

まぁしかし、ここまでしなくても、ブレイクポイント(画面の表示が変わる所)で、画像サイズを用意したら良いとは思うんですけどね。

cssのtransition: .3s ease;あたりを#headerに仕込んでおけば、良い感じでアニメーションして切り替わるかも知れませんし(←試してない(笑)

ひとつのアイデアとして参考までに。

プロフィールの部分は普通に表示されていたんですけど、何が問題かわからなかったので、フォーラムの利用上の注意みたいなわいひらさんが立ててあるトピックに、画像のアップロードできるサイトが書いてあると思うので、できたら画像を貼り付けてもらって問題点を指摘してもらえると助かります。

☓ tinyping
◯ tinypng

Hidekichi様　ありがとうございます。

詳しい説明有難うございます。私にはハードルが高そうですが勉強しながら確認していきたいと思います。

http://netakiri.net/uploader/src/up0147.png

プロフィールの画像をアップしてみました。よろしくお願い致します。(T_T)

わいひら様

本当ですね。

私はギャラクシーnote3を使用しています。
先程その画像をアップしましたのでご確認お願い致します。

追記　アンドロイドです。

追記　間違えました。　地球のアイコンなのでInternet Explorer ですかね。どこで確認していいのか分からず・・・・(T_T)

わいひら様

色々とありがとうございます。
今出先でゆっくり作業が出来ない為、ご報告が遅くなるかも知れませんがやってみます。
あと、ウィジェットは入れずにテストした方がいいでしょうか。

わいひら様　

Chromeブラウザで確認しました。正常に表示されました。
しかし、指で画面を触る(スワイプ?)と小さくもなります。他の投稿記事はならないのですが・・・

わいひら様

度々すみません。
逆にアンドロイドブラウザで表示後、指で画面いっぱいにする事もできます。

固定ページと投稿ページの違いとかありますか。

アマゾンのバナーがとてもとても怪しいです(笑)
一度外してどう見えるか確かめられてはどうでしょうか？

これ段落(Pタグ)で入ってますけれども、広告用のウィジェットで入れたらどうなりますかね？

わいひら様、Hidekichi様

こんばんは。ご連絡遅くなりました。
Hidekichさんのおっしゃったとおり、原因はウィジェットにあるようです。
ウィジェットがないものは、ちゃんと表示されました。
Hidekichiさんのおっしゃってた広告用のウィジェットに入れテストページのみ表示してみた所、スマホでは表示がやはり変でした。原因はウィジェットにあるようですが、このアマゾンのウィジェットはPCでは表示させておきたいものなので困りました。
皆さん、お忙しいのに色々と一緒に考えて頂きありがとうございました。
このウィジェットの件は、削除するかどうかもう少し考えてみます(+_+)
画像の件は、Hidekichiさんのご回答をじっくり読んで私の実力では無理っぽいですが頑張ってみます。

確かPC用の広告ウィジェットと、モバイル用の広告ウィジェットは使い分けができたと思うので、サイト検索をフル活用して記事を探していただくと設定方法が見つかると思います。
simplicity公式で出てこない場合は、寝ログにあったりするかもしれません。

って言ってる間に、見つけたりしました(笑)
http://wp-simplicity.com/ads-widget-settings/
たぶん、これかと思います。

他にもフォーラムでトピックが立っていたりすると思うので、色々と参考までに。

Hidekich様　おはようございます。
PC、モバイル用広告用ウィジェット早速使ってみました。
アマゾンアソシエイトを確認したところモバイル用のリンクがあったのでそれを使用したら、androidスマホも正常に表示されました。
くるくるウィジェットを使いたかったのですが・・・　PCのみだったんですね。勉強不足ですみません。
色々調べたりしているつもりなのですがすぐに忘れてしまい同じことをまた調べたり時間ばかりかかる今日この頃です・・・歳のせいでしょうか(笑)いい訳ですが・・・　息子がその歳でパソコンの前にいる姿が異様だと(笑)お二方には貴重な時間を使っていただき感謝!!です。