simplisity2のレシポンシブ対応

> 完全レスポンシブ対応にはチェックいれている

こういう状態ならば、viewportにはdevice-widthが入っているはずなので、見てる端末の幅で表示されるはずなんです。それが機能していない場合は、device-widthが何かしらの原因で入っていないというのが考えられます。

一番思いつくのはキャッシュが残っておりそのキャッシュがPCの状態を記憶していると言うことですが、しかし完全レスポンシブであればそれすらもおかしいので、この原因も考えつつ、javascriptで何かしらエラーが出ているとか、読み込みできない何かがあるとかでしょうか。

> google speed で表示速度は今いくらだろう？

と書かれていることから、Googleのモバイルテストみたいのを行われたのだろうかと思いますけれども、そこでモバイルフレンドリーではないと判断されたなら、viewport以外に、何かしらのカスタマイズなどされた内容の中で、レスポンシブにされておらず、そのままの幅が表示されている可能性も無きにしも非ず。

子テーマを利用されている場合、親テーマを有効にして、再度テストを行ってみてはどうでしょうか？
それで問題ないならテーマ側ではなく、現在の内容によるものなので、レスポンシブになってない要素をレスポンシブにすれば解決できます。

例えば実機でみて画面からはみ出しているのであれば、どこかにレスポンシブになっていない要素が含まれている可能性もあります。それが何かはサイトを見せてもらえれば解決できるかも知れません。

>>わいひら様

すいません。
URLを貼らして頂きます
http://alva-design.net

>>Hidekichi様

>>子テーマを利用されている場合、親テーマを有効にして、再度テストを行ってみてはどうでしょうか？
それで問題ないならテーマ側ではなく、現在の内容によるものなので、レスポンシブになってない要素をレスポンシブにすれば解決できます。

子テーマを使って編集したいのですが。。

>>わいひら様

Autoptimizeは停止しました。

> 子テーマを利用されている場合、親テーマを有効にして、
> 再度テストを行ってみてはどうでしょうか？

これは親テーマ+プラグインでどうなるかを確認するためのものです。
ここで問題ないなら、プラグインではなく中身やカスタマイズの内容による影響が高いということです。

もし、親テーマ+プラグインで同じようになるならプラグインが問題です。

どこに問題があるかがレスをした時にはサイトアドレスがなかったので自身で確かめてもらう必要があったので。
普通は親・子どちらを利用してもレスポンシブになってます。

サイトを見せてもらいましたが、子テーマの中身が親テーマのように思いますが、これだとレスポンシブになったものをレスポンシブでない親テーマで上書きしているのと同じです。

親テーマstyle.css レスポンシブではない
responsive.css これでレスポンシブにしている
子テーマstyle.css(本来の子テーマ) 上記の内容を継承して必要なものを上書きすることでカスタマイズする

こういう役目があります。現在の内容としては親テーマまるごとコピーされているのかは定かではありませんが、

親テーマstyle.css
responsive.css
子テーマstyle.css (親テーマstyle.cssの内容)

こういうことになってるのでレスポンシブが一部解除されているのではなかろうかと思います。
修正方法として、現在の子テーマのスタイルされているcssはコピーしたりしてバックアップを取り、あたらに新しく公式の子テーマをダウンロードして適用・有効にします。

この段階で子テーマが有効になり親テーマのスタイルを継承して表示されます。

親テーマstyle.css
responsive.css
(…その他諸々のcssがあってこれらも継承しつつ…)
子テーマstyle.css (ここで必要な箇所のみ変更(色だとか文字サイズだとか))

こういう読み込みの構造になります。cssは基本的に後で読み込んだものが有効です(一部例外あり)。

バックアップをとっておいた内容で変更したい部分を子テーマに追記します。もし、サイズ等(幅とかが)が変わる場合は、必要に応じてメディアクエリを使用したり、子テーマmobile.cssに書いたりしてレスポンシブになるようにカスタマイズします。

>>Hidekichi様
使用している子テーマは、このサイトからダウンロードしたものです。
親テーマを有効にして、トライしてみた所解決いたしました。
という事は中身やカスタマイズの内容による影響が高いということなのですか？

原因としては、子テーマのstyle.cssに該当していた部分が、全部コピペというわけではないと思うんですが(全部見てないので定かではないということです)、親テーマの内容ぽかったので、それが原因かと思います。

child01

とかとなっていたcssです。

ほとんどの場合は問題ないと思うんですが、一部、本来レスポンシブになっているはずの部分が上書きされてレスポンス解除されると今回のようになったりします。

確実な情報ではなくあくまで想像ですが、

#mainはメディアクエリによって、画面幅がスマホサイズ付近になるとwidth: 100%になります。
しかし上記child01.cssでは、親テーマのままと考えると、そこにはwidth: 740px等が入っていて、スマホの画面幅よりも大きくなります。

#mainが原因というわけではないかも知れませんが、こういうことが起こりうるので、子テーマstyle.cssには、必要な部分のみ変更するという風にして下さい。

例えば、サイドバーの見出しを赤にするなら子テーマstyle.cssに

#sidebar h3 {
  color: #f00;
}

だけを子テーマにstyle.css書きます。モバイル時に青にしようとするなら、子テーマmobile.cssに

#sidebar h3 {
  color: #00f;
}

と書くか、子テーマstyle.cssに

@media screen and (max-width: 任意のサイズ) {
  #sidebar h3 {
    color: #00f;
  }
}

こう書けば、画面サイズが任意のサイズまでならサイドバーのh3は青になります。

子テーマのmobile.cssはおそらくstyle.cssよりも後で読み込まれます。またモバイル端末の時だけ読み込まれます。

cssは基本後から読み込んだセレクタのプロパティが表示されます。

.test {
  font-size: 14px;
  fontsize: 20px;
}

とあった場合は、.testのfont-sizeは20pxで出力されます。これらルールとファイルの読み込み順がわかればどういう時にどう書けばよいかが見えてくると思います。

追記
私はこのサイトからダウンロードした子テーマに、親テーマのstyle.cssのコード全コピーして張っていました。
理由としてサイドバーのカテゴリ枠等を変更していたからです。
今子テーマにして
@charset “UTF-8”;

/*!
Theme Name: Simplicity2 child02
Template: simplicity2
Version: 20151225
*/

/* Simplicity子テーマ用のスタイルを書く */
ここから下を消去。

ダウンロードした状態に戻すと、レスポンシブ対応しました。

子テーマを作成する際に親テーマのstyle.cssを張り付けるのは間違っているのでしょうか？

> 子テーマを作成する際に親テーマのstyle.cssを
> 張り付けるのは間違っているのでしょうか？

親テーマのstyle.cssを継承するというと難しく思われるかもしれませんが、子テーマstyle.cssを見てもらえればわかるように、最初は何も書いてありません。子テーマを有効にしているのにどうしてSimplicityのスタイルが表示されるのかというと親テーマのstyle.cssを流用しているからです。

前にもどこかのトピックで書きましたが、信長の野望 拡張パックだけを買っても信長の野望はできませんよね？
本体である信長の野望が必要なわけです。それが親テーマです。

機能のほとんどは親テーマに書いてあり、子テーマはその機能を継承して表示しています。

信長の野望 拡張パックで言うと本体の武将のデータを拡張パックのデータが上書きしていると言うことが言えます。子テーマもこのようなものです。拡張パックの武将データは自分で作れますよね？これは子テーマで言うカスタマイズの部分です。

その際に1からデータを作らないといけないかというと、例えば武田信玄のパラメーターの変更と言う感じでデータが作れたりします。

子テーマで言うと、親テーマスタイルが武田信玄の元々のメーカーが設定したパラメーターです。これを子テーマで、

武田信玄 {
  力: xxx;
  体力: xxx;
}

と考えると、武田信玄がhtmlのセレクタで、パラメーターがプロパティであるということはご理解頂けるでしょうか？

つまり、カスタマイズしたい箇所のセレクタを任意のプロパティに書き換えるだけ、それが子テーマstyle.cssです。親テーマのデータを子テーマstyle.cssに入れたら、それは親テーマを読み込んでいるのと同じです。異なることは、前レスにも書いたように、元となるcssを後から読み込むcssで上書きすることによってレスポンシブ等が機能しているわけですが、その「レスポンシブの機能」を「機能していないcssで上書き」したらやはり機能しないということです。

これらは、ファイルの読み込み順序に関係しています。

親テーマstyle.cssはレスポンシブではなくPCの表示をしています。
↓ その後で読み込まれるresponsive.css等で、親テーマのスタイルを上書きしてレスポンシブにしています。
↓ その他諸々のファイルも同様に上書きを繰り返しながら読み込まれます。
ここで子テーマのstyle.cssが読み込まれたとして、ここに親テーマのstyle.cssの内容があったら、これまで上書きしていたものが無くなる(元に戻る)ということです。

全部が全部というわけではありません。
子テーマstyle.cssが読み込まれる前に、width: 100%と画面幅になっていた部分が、子テーマstyle.cssで740pxとなったとしたら、スマホはだいたい縦向きで320px〜400px前後の幅しか無いのでやはりはみ出しますよね。

ここらが問題というわけです。

なので親テーマstyle.cssを子テーマに移し替える必要はなく、子テーマstyle.cssを有効にした時点で、子テーマstyle.cssには何もかかれてなくても、その先頭には親テーマstyle.css他子テーマstyle.cssが読み込まれるまでに読み込んだcssの内容があると言うことです。

つまり、親テーマstyle.cssを子テーマに書くのは、何かしらの意図があってそうしない限り間違いということです。

>>Hidekichi様
ご指摘ありがとうございます。
他に、聞きたい事籐はありますが、トピック違いなので過去の質問を調べてから立てさせて頂きます。
勉強させて頂きました。
ありがとうございました。