カスタマイズでモバイルのメニューの色が変更できない & PCでモバイル表示にしてもうまく表示されない

> カスタマイズの色設定のところで、メニューボタンの
> 色や背景色を変えても、スマホで確認すると
> デフォルト設定のままになり、変更ができません。

カスタマイザーを使わず子テーマstyle.css等に記載した場合はどうなりますか？
変更した内容の書き方がわからないと言う場合は、その旨を書いてもらえたら回答します。

カスタマイザーで変更しようが子テーマで書こうが同じことですが、どちらも反映しないならキャッシュかと。他に原因がある場合もありますが。

> 自分のスマートフォンでサイトを開いたときは、
> モバイル表示になるのですが、…

Simplicityは完全レスポンシブoffの場合シームレスにレスポンシブ表示ができません。
理由は、他のトピックでも書きましたが、ロード(もしくはリロード)によってはじめてmobile.cssやis_mobile()関数が動作したりするので、読み込み(再読み込み)の初期化が行われないと動作しない部分があるのです。
is_mobile()関数はブラウザのユーザーエージェントで条件分岐しています。

完全レスポンシブoff
・mobile.cssが利用可
・is_mobile()でuser agentにより振り分け可

完全レスポンシブon
・mobile.css利用不可
・is_mobile()利用不可(再読み込みがないため。したら使えますが)

一番の違いは(リ)ロードが必須かどうかです。
offの場合初回がスマホでみて、「超能力で」スマホ画面がPCサイズに拡大できたとして表示されるのは大きなスマホ画面かタブレット表示かと思います。
一定の画面サイズでリロードすることで、そのサイズに合う表示をロードして表示します。

スマホから見た場合、onでもoffでも必ずロード(初期化)があるのでスマホ表示になりますが、PCからスマホ画面に画面を小さくしたような場合は、リサイズで画面を小さくしているだけでロード(リロード)がないため、offのmobile.css等が読み込まれないと理解しておけばよいかと思います。

jQuery等で、画面サイズのリサイズを検知して、mobile.css等を読み込むこともできると思いますが、mobile.cssはstyle.cssを上書きするために後で読み込まれるファイルだけの話なので、メディアクエリが書けるならmobile.cssは本来必要なく、style.cssで全てを完結できます。

Simplicityでは全てのcssをstyle.cssにまとめることもできますし、本来はそうするべきです。httpリクエストは減らすべきなので。しかし、誰でもが数千〜何万行もあるようなcssを管理できるわけでもないので、できるだけ細分化してそれぞれのスタイルをファイルごとの管理としているだけです。

そこで、is_mobile()によってそれがスマホかどうか、あるいはモバイル端末かどうかを判断し、cssのメディアクエリで画面サイズを見て、その時々の表示を最適化しようというのが完全レスポンシブoffであり、細かくアレヤコレヤと操作できない人がSimplicityを使う時に、PCの時はstyle.css、モバイルの時はmobile.cssとわかりやすく管理できるようにするためにあるような感じです。
これは逆にわいひらさんもPHPで処理の最適化ができるので楽な部分なのかもしれません。

リロード無しでアレヤコレヤをサーバーサイドから読み込んだり更新したりするためには、ajaxやREST apiを利用したり、phpだけでなくjavascript等のその他の知識も必要になります。まぁ全部表示しておいてメディアクエリで表示のon・offを切り替えればよいだけなんですけどね。
ただ、それをするとSEO的にどうとかいろいろとあったりするわけです。

hidekichi さん
お返事ありがとうございます。

html、cssの知識が浅いもので、子テーマstyle.cssにどのように書けばよいのか、あまりよくわかっていません。
よろしければ、どう書けばよいのか、教えていただければと思います。

レスポンシブ表示について、完全レスポンシブのon offによるものだったのですね。特に不具合があったのではないですが、少し疑問が晴れなかったため、そのことを知ることができてすっきりしました。また完全レスポンシブのon offについては、自分で色々と調べながら、設定をいじってみようと思います。詳しい説明をありがとうございます。

何をどう変更しようとされたのかがわからないとアレですが、カスタマイザーからできることだとすると、背景色を変えるとして、

body {
  background-color: #d8e1fc;
}

まずこう書くと、body背景が薄いブルーになります。例えば#mainに背景色がある場合はその部分はその色で表示されるため全体がこの薄いブルーと言うわけではありません。

で、次にスマホの時はどうするかといいますと、

@media screen and (max-width: 48em) {
  body {
    background-color: #fcd8d8;
  }
}

こんな感じで書きます。この場合、画面の最大幅が48em(768px)までの画面の端末なら、bodyの背景色が薄い赤になります。768pxはiPhone6plusの横向きより少し大きいぐらいのサイズです。
大体の所、縦向きだけを考慮するのであれば30em(480px)ぐらいでよいですが、見てる人が必ず縦向きとも限らないので48emで指定しています。ここでemを使ってますが、pxで指定しても構いません。

ちなみに上記で青と赤に色を分けたのは、デフォルトの色とはまるで違う色を指定することでキャッシュが効いているのかどうかを確認するためです。本来なら、背景色は白で構いませんし、特に指定しなくてもたいていは白です。
また#mainの背景が白が入っている場合があるので、違う色を選んだだけの理由です。

これらは、子テーマstyle.cssに

/*背景色変更*/
body {
  background-color: #d8e1fc;
}

@media screen and (max-width: 48em) {
  body {
    background-color: #fcd8d8;
  }
}

みたいな感じで追記します。もしタブレットでも確認したいのであれば、

/*背景色変更*/
body {
  background-color: #d8e1fc;
}

@media screen and (max-width: 48em) {
  body {
    background-color: #fcd8d8;
  }
}
@media screen and (min-width: 48em) and (max-width: 64em){
  body {
    background-color: #defcd8;
  }
}

このようにしてメディアクエリのブレイクポイントを追記します。タブレットは(48em〜64em)768px〜1024pxで指定してみました。

が、このメディアクエリの他にもSimplicityはいろいろとメディアクエリが入っていますので、場合によってはこれらのメディアクエリを別のSimplicityの設定のメディアクエリが上書きする場合もあります。

タブレットもスマホも場合によっては#mainが幅いっぱいになることがあるのでbodyの背景色は見にくいかもしれませんがまぁそこらはなんとか見えるかと思います。

cssは特殊な場合を除いて後から書いた同じセレクタの同じプロパティが有効になります。

.text {
  font-size: 20px;
}
.text {
  font-size: 18px;
}

このように書いてアレば、.textの文字サイズは18pxです。ひとつのセレクタに同じプロパティを2つ適用したらその平均になるとかそんなことはありません。なので、これらを利用してcssは、

ブラウザのデフォルトスタイルをSimplicityの親テーマstyle.cssが上書きし、またそれを他のcssが上書きし、子テーマのstyle.cssが上書きしてと言う感じで最終出力を得ています。
子テーマのstyle.css9lm
子テーマstyle.cssよりも後で読み込まれるスタイルがあった場合、それが同じセレクタの同じプロパティの場合、そちらが優先されてしまうことに注意してください。

またキャッシュが効いているかどうか等の確認は、ブラウザ(firefox, chrome等)のプラベートウィンドウ、シークレットウィンドウなどでキャッシュさせないようにして確認することをおすすめします。
更にXSERVERとかでmod_spageSpeedが有効になっていたり、プラグインでキャッシュを導入していたり、あるいはautoptimizeのようなcssやjavascriptをひとまとめにしてしまうようなものを利用されている場合は必ず停止して、カスタマイズの状態の確認ができた後に有効にするようにしてください。

これらは、「初めての方は必ずお読みください」のなかにも色々書かれています。

で、style.cssにスタイルを追加した後、表示を確認してみて色が変更されている場合はキャッシュは効いていませんから本来ならばカスタマイザーの設定も反映されるはずです。

カスタマイザーの設定は、headタグの中のstyleタグに書き出されたりします。これらは、子テーマstyle.cssよりも後で読み込まれるので、子テーマstyle.cssでは上書きできないかもしれません。
デベロッパーツールで、headタグを確認して、これら邪魔をしているスタイルはないかどうかの確認もしておいたほうが良いかもしれません。

また、カスタマイザーで変更した色が適用されず、子テーマstyle.cssで希望の色になるのであれば、それはそれで問題ありません。本来はそうするべきです。

hidekichi さん
ご丁寧な説明をありがとうございます。
色などは自分で調べて、また色々といじってみようと思います。

html、cssの知識があったほうがカスタマイズの幅も広がりますし、また勉強していこうと思います。
本当にありがとうございました。