ヘッダー部分の画像について

>ヘッダー部分の画像のみがスマホで見ると、レスポンシブルに対応しません。

この部分がどういう挙動を望まれているのかいまいちわかりにくい点なのですが、わいひらさんの「寝ログ」には、

#header {
  height: 150px;
  background-image: url("images/top.jpg");
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 100% auto;
}

こう設定されてあり、background-size: 100% auto;があるので、画面横幅いっぱいに広がって縦は自動で比率を保つようになっているのではないかと思われます。

1.6.3だったか1.6.4には、カスタマイザーで

モバイルヘッダー背景画像
画面幅いっぱいに広がるモバイルヘッダー画像を設定します。（※画像の高さは高めに設定しておいてください）

と言うのもありますので、テーマのアップデートもひとつの手だろうと思います(すでにされているかも知れませんが)。

現状どうなっているのかと、どのような挙動にしたいのかの具体例をあげて頂けると助かります。

有難うございます。

説明不足で申し訳ございません。

スマホで見た場合にヘッダの画像のみが
大きいままで画像の左側が少し表示された状態になっています。
この画像をスマホ仕様にしたいのですが

URL
http://ryuryu.pw/wd/

お手数おかけしますがよろしくお願い致します。

今、サイトを見せて頂きました。
autoptimizeが効いているので、ソースも見ましたが、どうやらモバイル系(responsive関係)のスタイルが読み込まれていないようです。

子テーマに、

@media screen and (max-width: 440px){
  /*その他諸々*/
}

などとして、モバイル用のスタイルを設定する必要がありそうです。
あるいは、narrow.cssやmobile.css等関係ありそうなものを@import url(“CSSのアドレス”)等として読み込む必要があるかも知れません。

もしかすると、独自にスタイルシートを設定されているのかも知れませんが、autoptimizeで1つにまとまった時にデフォルトのスタイルシートが有効になっていて設定されているレスポンシブ系のスタイルが打ち消されているのかも知れません。
autoptimizeを一旦停止されたらヘッダでどのようにスタイルシートが読み込まれているのかを調べることができますので、それでまず必要なスタイルが読み込まれているかの確認をされたほうが良さそうです。

iphone5あたりのサイズで見てみると、#body-in, #navi-in, #footer-inが共に1070pxのPCのサイズになっています。これはmobile.cssが読み込まれていたらwidth:100%になるはずなので、少なくともmobile.cssは読み込まれていません。

hidekichiさま

ご回答有難うございます。

おはずかしいのですが
初心者の為理解できておりません。

とりあえずautoptimizeを停止してみたのですが
かわらずといった状況です。

@media screen and (max-width: 440px){
/*その他諸々*/
}
教えていただいたコードは子テーマのどのシート（mobile.css？responsive.css？）
に入力してみればよろしいでしょうか？

お手数おかけしますがよろしくお願い致します。

>とりあえずautoptimizeを停止してみたのですが
>かわらずといった状況です

autoptimaizeは、cssを1つにまとめたりしてキャッシュすることでページの高速化等をするものですが、それが適用されている場合は、どこにどのタイミングで何が読み込まれているのかがサイトを見るだけではわかりません。
なので、しばしautoptimizeを停止して頂いて、サイトの構成がどうなっているのかを確かめる必要がありそうです。

本来であれば、header.phpに書いてある内容が読み込まれて、モバイル関係のcss等が読み込まれるはずなのですが、昨日までは#main等にメディアクエリの情報が出てませんでした(現在は読み込まれているようです)。
ただし、headerの画像に対しては、background-size: 100% 100px;等が入っていないので、はみ出したままの常態かと思います。

最新のSimplicityでは、カスタマイザーにモバイル用の画像設定ができるような項目があったと思うので、それを適用するのもひとつの方法かと思います。

>教えていただいたコードは子テーマのどのシート（mobile.css？responsive.css？）
>に入力してみればよろしいでしょうか？

@media … というのは、メディアクエリと言いまして、その画面幅の時どのようなスタイルを適用するかと言う感じのものです。これは、子テーマstyle.cssに書いても良いですし、本来であればmobile.cssやnarrow.cssに記載があるのでそれをいじっても良いのですけれども、親テーマをいじるとアップデートで上書きされてせっかくのカスタマイズが無くなってしまいますので、たいていは子テーマに自分なりのカスタマイズを記載していきます。

使い方は例えば、スマホで画面幅が440pxまでのもので見る時、header h1(#site-title)の色を変更して、赤い下線を引く場合は、

@media screen and (max-width: 440px){
  #site-title {
    color: #f00;
    border-bottom: 1px solid #f00;
  }
}

こんな感じに書きます。@media screen and (max-width: 440px){…}で囲まれた中は、「画面幅が440pxまでの時」と言うような意味合いになります。メディアクエリ ブレイクポイント等で調べてみて下さい。

ご回答有難うございます。

まずは画像を変更を検討してみます。

それでまたダメでしたらご相談させて下さい・

有難うごいました。