【続】iPhoneなどスマホで表示される際のヘッダー画面について

@media screen and (max-width: 30em)
  #h-top {
    background-position: 20% 0;
  }
}

ぐらいでどうですか？

それとついでですが、スマホの時、#bodyのmargin-topを無くすほうが良いかも知れませんね。

@media screen and (max-width: 30em)
  #body {
    margin-top: 0;
  }
  #main {
    border-radius: 0;
  }
}

とか。

うぅ、、、すみません。
今回はできなかったです。

スマホの画面を縦にした時に、
やはり右に偏ってしまっただけでした。

光が中央に集まるようにしたいのですが、
今いろいろいただいた比率を変えているのですが、
今のところ変わりません。。

どうしたらいいのでしょうか？

responsive.cssに書き込んだ内容が上書きしてるんだと思います。
前の時にどこに書かれたかにもよりますが、この前のレスで書いたbackground-positionの設定でうまく行くはずです。

また#bodyのmargin-topを見る限り、style.cssに書かれていると思うんですが、サイトを見せてもらう限り基本的な最終出力はスキンのフォルダのmobile.cssのようです。

なので、#bodyのmargin-top:15px;だったかは、まず子テーマstyle.cssに書き、PC及びどの端末でもそのようになる設定にします。
で、スキンのフォルダにあるmobile.cssで同じセレクタの場合に上書きするという設定をします。

仕組みを説明すると、cssは同じセレクタ、同じプロパティが複数あった場合、最後に読み込んだものを適用します。

仮に、

#test {
  font-size: 18px;
}

これが親テーマstyle.cssに書いてあるとしましょう。親テーマの最後に、

#test {
  font-size: 24px;
}

と追記した場合、親テーマには

#test {
  font-size: 18px;
}

//他略

#test {
  font-size: 24px;
}

このような状態にあるというのは理解してもらえますか？そうすると、#testに対するfont-sizeは最終の24pxとなるということです。
では、子テーマのstyle.cssに

#test {
  font-size: 18px;
  color: red;
}

このように書いた場合は、親テーマよりも後で子テーマは読み込まれるので、親テーマの24pxは上書きされ新たに赤色で表示されることになります。では、スキンで、

#test {
  font-size: 24px;
}

と書かれていたらどうなるでしょうか？スキンは1系の場合子テーマよりも後で読み込まれるので、最終的には、#terstには、

#test {
  font-size: 24px; //スキンで再三に渡る上書きをされたサイズ
  color: red; //子テーマのスタイルで他にないプロパティ
}

このように出力されることになるかと思います。これらが理解できていれば、どこに何を書くべきかを理解してもらえるはずです。
まず全体的なカスタマイズは、子テーマstyle.cssにされるのが良いでしょう。親テーマのスタイルを打ち消すスタイルも子テーマが良いかと思います。
更に、最終的にどうしても子テーマstyle.cssに書いても上書きできないものがあるとしたら、1系の場合スキンの各ファイルを調べます。
もし、スキンで上書きされるとマズイというプロパティは、子テーマで!important付きのスタイルにしても良いと思います。スタイルを管理される上で!importantをつけると、どうしても上書きできないと言う事がでてきますが自身で管理されているのなら問題ありません。

最も良いのは!importantを使用せず最終出力になるファイルをデベロッパーツール等でheadタグを見て、cssがどのように読まれているかを確認し、最終出力となるファイルにスタイルすれば良いかと思います。

今回の場合、PCでの一般的な表示では、

#body {
  margin-top: 15px;
}
#h-top {
  //打ち消す何かしらが必要ならそれら
  //背景画像に対するスタイル
  padding: 0 0 33...%;
}

としておき、スキンのmobile.cssで、

#h-top {
//打ち消す何かしらが必要ならそれら
//背景画像に対するスタイル
padding: 0 0 56.25%;
background-position: 20% 0;
}`

こう書けばメディアクエリを使わずとも、モバイル時にはこの設定がされるはずです。ただし、mobile.cssはsimplicityで、モバイルと判断された時のみ読み込むファイルなので上記になりますが、モバイル=スマホというわけではなく、タブレットもその対象になります。
よって、画面幅で表示を変えたい場合はメディアクエリを利用して、スキンのmobile.cssに書き込む必要があることも理解しておいて下さい。

もしSimplicity2を利用されている場合、子テーマstyle.cssで全てが上書きできるような設定になってるので、この全てではありません。しかし基本的にデベロッパーツールでheadタグを見ればどのように読み込まれているかはすぐにわかりますので、それを手がかりに最終的な出力をされているcssに書けば全てを上書きすることができます。

それでもできない場合はjQueryなどを駆使して、スタイルをキャンセルさせるかタグに直接style属性として書き込む他ないです。

なるほど、詳しくありがとうございます！
それでまずトライしてみますね！

Hidekichiさん、
すみません、いまだに四苦八苦してます。

今の状態は、

親テーマSimplicity1.9.3のstyle.cssは、

#body{
  margin-top:0px;
}
#main {省略
  border-radius: 0px;
省略
}

となっていて、
responsive.cssは、前回の設定を削除して元のままになっています。

そして子テーマのstyle.cssは、

#body{
  margin-top:15px;
}
#main {省略
  border-radius: 0px;
  省略
}
@media screen and (max-width: 30em)
#h-top {
  //打ち消す何かしらが必要ならそれら
  //背景画像に対するスタイル
  padding: 0 0 33...%;
}

となっていて、
mobile.cssは、

#h-top {
//打ち消す何かしらが必要ならそれら
//背景画像に対するスタイル
padding: 0 0 56.25%;
background-position: 20% 0;
}

となっています。

理解が悪くてすみません。どこを修正したらいいのでしょうか？

サイトを見た所、子テーマが見つかりませんが、利用されてませんでしたか？
子テーマを利用する・しないで、若干書き方が変わるかと思いますが、利用しない方向なら、スキンのcssに書けばよいのですけれど、ここらはどうでしょうか？

親テーマに依存したカスタマイズをすると、親テーマのアップデートでカスタマイズが失われます。Simplicityの開発は2系に移ったので、1系のアップデートはあるかないかは別として、何かしら問題が発覚した時にテーマの再インストールをした段階でカスタマイズが無くなったり。

なので基本的には子テーマの利用がある意味必須かと思うんです。functions.phpに何かしら書いたが失敗した、真っ白になった、半日費やしても直らない・・・そうだテーマを再インストールしよう!!なんて事はよくあることです。

ついでに2系にするというのもありですが、いろいろと再設定していかなくてはいけないので、ひとまず1系で上手く動作する所までは持っていったほうが良いです。

なので、ひとまずの流れとしては、
・子テーマの導入(zipダウンロードしてそのままzipをテーマ画面(の左上あたり)でアップロード)
・子テーマを有効
・ウィジェットの再設定(というか正しく動作しているか見直し含め)

ここまでするなら2系でも良いですが(笑)

・親テーマの利用しているスキンやstyle.css等に書き込んだものを子テーマにコピペ
・子テーマで正しく動作しているか確認
・スキン導入(有効化)

ここでサイトの状態がどうなっているかを確認するので、作業を進めて下さい。
すでに子テーマは導入してあって、現在子テーマが有効になっていないだけなら、有効にしてください。
また時間をおいてフォーラムには現れると思います。

すでに子テーマは導入していました。
ただ有効化していなかったので、しておきました。

そして、
・親テーマの利用しているスキンやstyle.css等に書き込んだものを子テーマにコピペ
・子テーマで正しく動作しているか確認
・スキン導入(有効化)

ここまではできたと思います。
もし足りないところがあればご指示ください。

よろしくお願いします。

ちなみに、親テーマのstyle.cssは子テーマに全てコピペしましたが、
親テーマのmobile.cssとresponsive.cssはまだ子テーマにコピペしていません。
もしする必要があれば言ってください。すぐにやります。

今は子テーマが有効になっています。
スキンも全て親テーマのをひとつひとつコピーしたので、動作自体は何も問題ありません。
親テーマで使っていたのと全く同じになっています。

基本的にはおっしゃっていただいていた通り、親テーマひとつで使っていました。その方が楽だと思っていたからです。
バックアップや消えた時のことはあまり考えておらず、毎回変更したところをメモしておいて、
どこかにコピーしておき、何かあった時は前の設定に戻すということを繰り返していました。

今はどちらでもいいと思っていますが、まずはHidekichiさんが推奨してくれた通りにやろうと思っています。
あとは、スマホで光が真ん中に表示されたら満足です。

ひとつ上の投稿の情報と合わせてよろしくお願いします。

まず、子テーマstyle.cssの

#h-top {
  min-width: 100px;
  //その他略
  //以下追加
  min-height: unset !important;
  height: 0;
  overflow: hidden;
  padding: 0 0 33.783783784%;
  background-position: left center;
  background-size: cover;
}

で、メディアクエリで、

@media screen and (max-width: 30em) {
  #h-top {
    padding: 0 0 56.25%;
    background-position: 15% 50%;
  }
}

ですかね。
background-positionを 15% 50%にしました。15%は左から50%は上からです。前回20%としましたが、センター過ぎるとタイトルやらと光が重なって読みにくいかなと思ったので。位置の微調整は15%あたりをイジって下さい。
左から何%の位置ということなので、20%にすると画像は左へずれていきます。少なくすれば右へという具合です。

またipadぐらいのサイズの場合、横が768pxなので、

@media screen and (max-width: 48em) {
  #h-top {
    padding: 0 0 43%; //画像サイズ
    background-position: 0 50%;
  }
}

ぐらいでしょうか。横向きでiphone5の時、「ようこそ〜」が入るぐらいにしてみました。

responsive.cssがメディアクエリで1110pxの時の情報を持っています。ここに該当するサイズの場合は、上記同様にして、paddingとbackground-positionを触るぐらいでよいかと思います。

基本子テーマstyle.cssで、#h-topの挙動が書いてあるので、各メディアクエリではこれらをイジって背景画像の位置調整という感じです。responsive.cssにこれらメディアクエリでの#h-topを書く場合は、一番最後に追記して下さい。

@media screen and (max-width: 69.375em) {
  #h-top {
    padding: 0 0 43%; //画像サイズ
    background-position: 0 50%;
  }
}

例えばこんな感じで。
1110pxのメディアクエリが上書きできない場合は、上記を最後に追記して、1110pxのメディアクエリ自体をコメントアウトしても良いかと思います。特に問題がない場合はresponsive.cssは触る必要はありません。

ipadなどのタブレット横向きの場合にどうなるかぐらいの話です。

僕だったら、

@media screen and (max-width: 69.375em) {
  #header-in, #navi-in, #body-in, #footer-in {
    width: 90%; 
  }
  #main {
    width: 100%;
  }
}

これぐらいにしときますかね。まぁここらは別件なのでまた問題があったらトピック立てて下さい。
メディアクエリとその使い方が分かればご自身でも解決できます。

※ だいたい想像も含めて書いてるので更に微調整がいるかも知れません。メディアクエリ等を実装した後に再度質問頂ければ、どのメディアクエリをいじれば良いかは調べられると思います。

Hidekichiさん、ありがとうございます！
できました！真ん中に光が綺麗に表示されました！感激です！

言われた通りにできたかわかりませんが、
このようにやってみました。

まず、子テーマのstyle.cssのヘッダー(header)にある下記をいじりました。

#h-top{
  min-height:100px;
  overflow:hidden;
  background-repeat: no-repeat;
  background-position: top left;
  position: relative;
}

上記は元々の表記ですが、これにHidekichiさんから教わった下記をあてこみました。

#h-top {
  min-width: 100px;
  //その他略
  //以下追加
  min-height: unset !important;
  height: 0;
  overflow: hidden;
  padding: 0 0 33.783783784%;
  background-position: left center;
  background-size: cover;
}

例えば、min-heightの欄は被っているので、Hidekichiさんのに書き換えたり、overflow:hiddenは全く同じ表記なので消したり、background-repeat: no-repeat;はそのまま残して、background-positionの欄はHidekichiさんのに書き換えました。position: relative;はそのまま残しました。そうするとこんな風になりました。

#h-top {
  min-width: 100px;
  min-height: unset !important;
  height: 0;
  overflow: hidden;
  padding: 0 0 33.783783784%;
　　　　background-repeat: no-repeat;
  background-position: top left;
　　　　position: relative;
  background-size: cover;
}

そして、子テーマのresponsive.cssの部分にHidekichiさんの下記を入れました。

@media screen and (max-width: 30em) {
  #h-top {
    padding: 0 0 56.25%;
    background-position: 15% 50%;
  }
}

それが今のスマホの画面です！PCでも問題なく表示されています！
本当にありがとうございます！感謝感謝です！

最後にひとつ質問があるのですが、その後にいただいたiPadサイズのための3つの設定ですが、
これらもまとめて子テーマのresponsive.cssの部分に入れた方がいいのでしょうか？
でもそれだとおそらく今のスマホの設定が変わってしまいますよね…？
少し気になったので、それだけ教えていただけますでしょうか？
よろしくお願いします。

多分子テーマのresponsive.cssの方がわかりやすいならそれで良いですが、僕なら子テーマstyle.cssに全部書いて、上書きするようなresponsive.cssの方をコメントアウトするかと思います。

親テーマのresponsive.cssがジャマなら子テーマのstyle.cssで(カウンター的に)消せますし。なぜそうするかは管理の問題だけです。あれもこれもファイルを開くとあの記述はどこだっけ？となったりして探すのが面倒くさいので。

僕の場合特殊ですが、親テーマのstyle.css他responsiveな部分もすべてコメントアウトして子テーマだけで動くようにしています。全部一から書いてるので大変ですが、親テーマの余計な読み込みを減らしているって感じです。
1万行ぐらいあるかも知れませんけれども、それぞれにパーツごとに分割してあるのでそんなに管理は大変ではなく、scssで書いて、最後に1つのcssにまとめて出力し、それを圧縮して子テーマstyle.cssに書いてあります。

ここらは管理をどうするかだけの話です。responsive.cssで問題なくわかるというならそれで良いと思います。結果的に、最後に読み込まれるプロパティが表示されるということですから、最後になるならどのファイルのどこに書いても良いです。

ipadについては、実際に今の状態のサイトをipadなりタブレットなりで見てみて、どのような表示になるかを確認してからでも良いです。タブレットのスタイルは難しいので、どのような表示にするかをよく考えて好きなようにデザインすれば良いと思います。

ポイントとしては、親テーマ及び、子テーマのstyle.cssは全体の共通なスタイルを書いておいて、それをメディアクエリでその画面幅の時にどうするかを書いていけば良いということです。

スタイルの方法はいろんなアプローチがあります。
例えば、Simplicityを少し改造してみた part16 jQueryでモバイル判別 bodyにmobile classを挿入ウチのサイトですが、こんな風にjQueryでモバイル判別して、bodyに.mobileと言うクラスをつけます。
そうすると、.mobile配下のそれぞのタグはモバイル用であるとすぐにわかります。つまり、

■PC用その他汎用

#list .entry {
  //なんちゃら
}

■mobile端末のみ

.mobile #list .entry {
  //なんちゃら
}

このようにクラス一つで振り分けられます。つまりmobile.cssを読み込むのと同じ意味合いです。mobile.cssは同じセレクタのプロパティをファイルを後から読むことで上書きしていますが、上記の場合、別に

.mobile #list .entry {
  //なんちゃら
}
#list .entry {
  //なんちゃら
}

このように書いてあっても#list .entryが.mobile #list .entryを上書きすることはありません。しかし限定的なものと汎用的なものがある場合は、汎用的なものを先に書くのが安全かと思います。

サンプル: 上書きのテストサンプル

結論を書くと、どこに何が書いてあろうと結果的に意図する表示になっているならそれはそれでokです。
よりシンプルに意図とする表示にさせるかとか、速さを求めるとかは、その後じっくり考えれば良いので。

ウチのサイトは無料のサーバーで、キャッシュが独自には設定してあると思いますが、基本プラグインなどで導入できません。サーバーの仕様によるものかと思いますが、それらもあってなるべくhttpリクエストは減らしたいという事から、子テーマにcssを集約してます。

css程度ではほぼ変わりませんが、サーバー的にgzipが使えたり、キャッシュも問題なくできるなら、simplicityのデフォルトでも問題ないはずです。なんせわいひらさんの寝ログもSimplicityを利用しててアクセス過多で503になったりしましたが、ウチラのサイトとはアクセスの桁が違うと思うので(笑)
普段は特に問題ありませんし。

simplicityでファイルがそれぞれに分けてあるのは、誰でもわかりやすく書けるようにしてあるからです。普段使用で慣れてきて、少しでも速くを考えた場合は、lib/scripts.php等を見なおして、cssを1つにまとめる作業をしても良いのではと思います。ただし、まとめるにはまとめられるだけの環境がまず必要なので、そこらは追々考えていくというのでよいかと思います。

本当に詳しくありがとうございます。
Hidekichiさんのサポートがなかったら、何もできませんでした。

本当はHidekichiさんの言っている通りに全てやりたいのですが、
理解ができてないところもあって、今のような形になりました。

でもHidekichiさんが、こうおっしゃってくださり、気持ちが楽になりました。
＞結論を書くと、どこに何が書いてあろうと結果的に意図する表示になっているならそれはそれでokです。

これからもよろしくお願いします。
このたびは本当にありがとうございました。