スマホだけCSSやカスタマイズが反映されない

PR 2017/11/28

このトピックには6件の返信、2人の参加者があり、最後にゆうじにより8年、 9ヶ月前に更新されました。

6件の返信スレッドを表示中

投稿者

投稿
- 2017年11月27日 9:39 AM #57229
  
  ゆうじ
  ゲスト
  
  対象のURL：ttps://carmuse.jp
  
  1ヶ月前くらいから、子テーマのCSS編集をおこなった際、
  PCは変更箇所が正確に表示されるが、スマホではうまく反映されないという現象が起こっています。
  
  例：見出し2の頭の縦線が消えてフォントが大きくなってしまう。見出し3のボーダーの色を変えてもスマホでは反映されない。など。
  
  また、カスタマイザーで完全レスポンシブをオンにしたりオフにしても反映されません。
  いろいろ調べてみたのですが知識に乏しいため、何が原因なのか、そして解決策をご教示いただきたいです。
  
  ＜利用状況&試したこと＞
  ・もともと完全レスポンシブで利用
  ・ブラウザキャッシュの削除（スマホ側でも削除したり、他の人のスマホで試してもダメ）
  ・シークレットウィンドウを利用しても変わらず
  ・キャッシュ系プラグイン、サーバーのキャッシュプラグイン、htaccessへのキャッシュ系記述は利用していない。
  ・テーマ・子テーマの再インストールをしたが変わらず。
  ・mobile.cssとresponsive.cssには記述していない。（しかし一度モバイルの見出しデザインを変えようとコードを記述したが、思ったデザインにならなかったので全て削除したことがある。このときのデザイン（先ほどお伝えした、見出し2の頭につく縦線が表示されない。見出しの文字が大きくなる。など）がそのまま消えず残ってしまってるが、これが関係あるのか？）
  
  よろしくお願い致します。
- 2017年11月27日 2:27 PM #57233
  かうたっく
  ゲスト
  見出し2の頭の縦線が消えてフォントが大きくなってしまう。
  
  子テーマに以下の記載があります。
```
.article h2 {
	border-left: 4px solid #227E9C;
	margin: 40px -29px 20px;
	padding: 10px 17px;
	font-size: 24px;
}
```
  h2の縦線が消えるのは、marginの左右に-29pxとなっているからで。css の14行目marginを丸々消すか、必要であればmargin: 40px -29px 20px 0;と指定すれば表示されますよ。
  
  fontが大きくなるのもfont-size: 24px;と指定があるからです。
  
  PCはこのままで、これらスマホのみで表示を変更させたい場合は、
```
@media screen and (max-width: 639px) {
	.article h2 {
		margin: 40px -29px 20px 0;
		font-size: 20px;
	}
}
```
  コレをh2の下に追記すると反映されると思います。
  
  見出し3のボーダーの色を変えてもスマホでは反映されない
  
  親テーマを見るとborder-bottom:5px solid #e7e7e7;と指定があり、子テーマではborder-bottom: 2px solid #eee;となってますよ。それを例えばh2タグと同じ色ブルーにする場合#eeeを#227E9Cに変更したら反映されるはずですが…。。
  
  CSSはキチンと反映されている気がします。1度試していただけますか。
- 2017年11月27日 4:05 PM #57242
  
  ゆうじ
  ゲスト
  
  h2の縦線が消えるのは、marginの左右に-29pxとなっているからで。css の14行目marginを丸々消すか、必要であればmargin: 40px -29px 20px 0;と指定すれば表示されますよ。
  
  fontが大きくなるのもfont-size: 24px;と指定があるからです。
  
  marginはSimplicityのデフォルト値です。変更していません。この本来の数値でスマホでもh2の縦線は通常に反映されるはずです。
  フォントサイズはデフォルトが26pxのところ、24pxにむしろ小さくしています。
  
  親テーマを見るとborder-bottom:5px solid #e7e7e7;と指定があり、子テーマではborder-bottom: 2px solid #eee;となってますよ。それを例えばh2タグと同じ色ブルーにする場合#eeeを#227E9Cに変更したら反映されるはずですが…。。
  
  ややこしくてすみません。子テーマでは見出し3（h3）を「border-bottom: 2px solid #eee;」にわざとしています。パソコンでは#eeeで反映されるが、スマホで見るとその前に設定していた#227E9Cのままになっていることを確認・テストするためです。スマホでみると本来PCと同じグレーになるはずの見出し3の横線がブルーになっていませんでしょうか？
  
  今回の質問は、CSSの値をどうこうするということではなく、PCでは正しく反映されているCSSが、スマホでは反映されないという点なんです。
  みなさま引き続きよろしくお願いいたします。
- 2017年11月27日 4:50 PM #57247
  
  かうたっく
  ゲスト
  
  #57233にあるCSSを試されましたか？？？
  
  試して反映されない場合は、ブラウザのキャッシュを削除してから、ページをご確認ください。
  
  またスマホのブラウザのキャッシュも削除して確認してください。
  
  初めに確認した時点では既に#cccでしたが・・・
- 2017年11月27日 8:14 PM #57253
  
  わいひら
  キーマスター
  
  marginはSimplicityのデフォルト値です。変更していません。この本来の数値でスマホでもh2の縦線は通常に反映されるはずです。
  
  それでは通常で反映されません。
  かうたっくさんも書かれているように、Simplicityデフォルトだとスマホでは、マイナスマージンが打ち消してあるのに、子テーマでマイナスマージンを再設定しているからだと思います。
  子テーマのstyle.cssとかで改めてマイナスマージンを設定する必要はないのではないでしょうか。
  試しに、デベロッパーツールなどを用いて、マイナスマージンの設定を無効にしてみてください。
  
  モバイルでも子テーマのstyle.cssは反映されていると思います。
  CSSで書かれた命令通りに表示されていると思います。
  ただ、間違った書き方をしているから、現状ではそのように表示されているというだけだと思います（見出しのマージン設定部分は）。
  とりあえず、まずは見出しマージン部分を修正してみてください。
  他の部分の表示におかしな部分があれば、とりあえずその修正が終わってからということで。
  一つ一つやっていかないと、ややこしいので。
- 2017年11月27日 9:18 PM #57256
  
  かうたっく
  ゲスト
  
  Simplicityデフォルトだとスマホでは、マイナスマージンが打ち消してあるのに、子テーマでマイナスマージンを再設定しているからだと思います。
  子テーマのstyle.cssとかで改めてマイナスマージンを設定する必要はないのではないでしょうか。
  
  なるほどです。読み込み順によって表示がおかしくなるケースは体験した事があります。
  ただSimplicityでも他のテーマでも、子テーマの優先順位は親テーマを上書きするようなっています。
  テーマ作成したわいひらさんがおっしゃっているので、間違いないかと思われます＾＾
  
  テーマ作成すらしていない私が口を出したから混乱されたり、あなたは誰？となった部分はあるのかなと。
  質問者さんも回答側の素性がわからない為、色々警戒されたのかもしれません・・・。
  
  その点に関して、、、失礼しました…
- 2017年11月28日 3:01 PM #57267
  
  ゆうじ
  ゲスト
  
  Simplicityデフォルトだとスマホでは、マイナスマージンが打ち消してあるのに、子テーマでマイナスマージンを再設定しているからだと思います。
  
  そういうことだったんですね。基本的なところが分かってませんでした＞＜
  無事、スマホでも希望通りに反映させることができました。
  わいひらさん、かうたっくさんありがとうございました。
投稿者

投稿