動作不良　404ページ

このトピックには8件の返信、1人の参加者があり、最後に足立健史により9年、 7ヶ月前に更新されました。

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

投稿者

投稿
- 2017年1月30日 1:06 PM #49824
  
  足立健史
  ゲスト
  
  Simplicityでも404ページの画像をレスポンシブ表示する方法をご教示いただけませんでしょうか。
- 2017年1月30日 1:25 PM #49826
  
  Hidekichi
  ゲスト
  
  ページ内のimgはmax-width:100%というのが入っているのでレスポンシブだと思いますが、そうはならないという状況でしょうか？
  
  そうなっていない404のサンプルページのアドレスを貼ってもらえると助かります。
  
  想像で答えれば、完全レスポンシブがoffの状態でPCからブラウザをリサイズした時に、#mainが画面幅に追従しないということなのかなぁとも思うんですが、ここらを含めてどういう状況でそうなっているかも書いてもらえると助かります。
  
  上記の通りならviewportの問題かなぁとも思うんですけどね。
- 2017年1月30日 1:27 PM #49827
  
  Hidekichi
  ゲスト
  
  ちなみに、うちのサイトの404ですが、リサイズしても追従するかと思います。
  
  完全レスポンシブは見てませんがたぶんonになっていると思います。
- 2017年1月30日 1:53 PM #49828
  
  足立健史
  ゲスト
  
  お返事ありがとうございます。
  
  https://wp-simplicity.com/?p=404
  
  こちらのページの画像は、リサイズしても追従しないようですが、分かりますでしょうか。
- 2017年1月30日 2:50 PM #49830
  
  足立健史
  ゲスト
  
  申し訳ありません。
  https://wp-simplicity.com/?p=404
  は、モバイル（Xperia）では、レスポンシブ表示されています。
  PC（win7 Chrome）では追従しないようですが。
  
  弊社webでは、モバイルCでも追従しません。
  https://nnn.or.jp/?p=404　
  これは、カスタマイズしていますので、当方責任と理解しています。
- 2017年1月30日 4:27 PM #49832
  Hidekichi
  ゲスト
  simplicity公式は完全レスポンシブがoffです。よってviewportは1280pxで固定されています。
  そのため、タブレットサイズ以下になると画面は小さくなると横スクロールが発生します。横スクロールが発生するということは#mainのサイズは一定でそれ以上小さくならないためその中にあるimgは変化がありません。
  
  imgは#mainの幅に追従します。
  
  逆を言うとタブレット以下はスマホサイズであってスマホで読み込んだら完全レスポンシブがoffの場合、is_mobileが動作してviewportが画面幅に追従するようになり、mobile.cssが効いて正しく表示されるかと思います。
  仕様変更があったのかタブレットサイズ以下になっても完全レスポンシブoffでmobile.cssが読み込まれないようです。以前は読み込まれていたような気もしますが仕様としては現在のほうが正しいように思います。
  
  現状完全レスポンシブがoffで質問のようにならないというのはある意味仕様かと思います。
  ここらはわいひらさんがレスをくれるでしょう。
  
  完全レスポンシブがonならviewportのサイズはwidth=device-widthとなって、いかなる画面サイズでも合うようになります。もちろんメディアクエリ等でcssを調整する必要もありますが、これはその画面サイズの時に各要素をどうするかというものなので、好きなようにできます。
  
  完全レスポンシブがoffの場合はmobile.cssなどが使えませんが大きなリサイズを考慮しない限り特に問題はないのではなかろうかと思います。子テーマstyle.cssにメディアクエリをかけばmobile.cssを使わなくても同様のことができますので。
  
  他の解決方法としては、javascriptやjQueryで色々書き換えるという方法もあります。viewport自体を書き換えるということもできますが、基本viewportはwidth=device-widthで端末の画面に合わせておくべきだと僕は思います。
  simplicityの場合、タブレットでもPC同様サイドバーを表示体という要望があって1280pxと幅を確保しているわけですが、これらもviewportはwidth=device-widthでほぼイケるはずです。
  
  考え方としては、viewportはwidth=device-widthとしておき、画面サイズの変更によって、例えばbodyタグに、
  
  <body class="mobile tablet add_sidebar">などというクラスがつくようにすれば、
```
.mobile #main {
  width: 100%;
}

.mobile.tablet.add_sidebar #body-in {
  width: 1280px;
}
.mobile.tablet.add_sidebar #main {
  width: 768px;
}
.mobile.tablet.add_sidebar #sidebar {
  width: 300px;
}
```
  と言うようなこともできるからです。上記とはやや違いますが、
  
  サンプル: jQueryでメディアクエリの代替えをする | codepen
  上記のフルページビューこれをchromeの携帯エミュレーターで確認してみてください。ipadあたりならサイドバーが表示されているかと思います。
  
  このようなjQueryとcssを書けば完全レスポンシブでも任意の設定が可能です。このサンプルを見ただけだとわかりにくいですが、デベロッパーツールでbodyタグ(#bodyではない)を見てみてください。
  画面幅が1024px以下の時、タブレットでサイドバーを入れる場合(js欄先頭部分のenableTbletSidebarがtrueの時)、768〜1024pxの間の画面サイズならサイドバーを出します。768より小さい場合はサイドバーを非表示にします。
  タブレットでサイドバーを入れない場合は通常通りです。
  
  これらは画面サイズによって、bodyタグにクラスを追加して実現しています。codepenではviewportを設定しなければwidth=device-widthなので、完全レスポンシブonと同義かと思います。完全レスポンシブがonの場合、自ずと画面幅に追従するかと思うので、このスクリプトが必要な人というのは、完全レスポンシブonでタブレット時にサイドバーを入れたいという人ですが、言いたいこととしてはwidth=device-widthでたいていしたいことはできるということです。
  
  本来であれば、完全レスポンシブonの時、
```
@media screen and (max-width: 768px) {
  #header-in,
  #footer-in,
  #body-in {
    width: 100%;
  }
  #navi-in {
    display: none;
  }

  #main {
    width: 100%;
  }
}
```
  みたいなことを書く感じになるかと思います。完全レスポンシブがoffでも上記のようなスタイルを書けばおそらく行けると思います。但しこれだけでは不足していたり既存のメディアクエリとの衝突で、上手く動作しない場合もありますので、かなり慎重に作業を進めてください。
  
  最悪、responsive-pc.cssとかを完全に読み込まないようにして1からメディアクエリを組み立てても良いですがかなり面倒かと思います。なるべく既存のスタイルを上書きして動作するようにテストを重ねる必要があるでしょうか。
  
  #mainが追従しないということにあたってまずは、その画面サイズの時のメディアクエリがあるかどうかの確認をし、なければ子テーマstyle.css(もしくはmobile.cssに)書くという方向ですが、Simplicityは中間サイズと言うか案外面倒なサイズも設定があるため、それらをどうしたいかによって書き方は色々あります。
  
  理屈としてはその画面サイズの時、#body-inなり#mainなりをいくつに設定するかだけです。完全レスポンシブがoffの場合はmobile.cssが利用できますが、mobile.cssの読み込みにリロードが必要なため子テーマstyle.cssに書く必要があります。
  注意点は、子テーマstyle.cssをmobile.cssが上書きするということでしょうか。mobile.cssに存在しないメディアクエリがあった場合、あるいはmobile.cssでそれらを上書きができなかった場合、問題が発生する可能性があるということです。
  
  完全レスポンシブがonの場合はmobile.cssが利用できないため、子テーマstyle.cssにメディアクエリを設定する必要があります。親テーマのstyle.cssを子テーマstyle.cssが上書きするため、子テーマstyle.cssに新規のメディアクエリを書けばそれで対応できるだろうと思います。逆にmobile.cssで設定されているメディアクエリは子テーマstyle.cssに移す必要があります。
  
  間違いやバッティングが少ないのは完全レスポンシブonにしてスタイルを追記していくということですがタブレット以下の設定は全て書き直す必要がある可能性があります。
  
  とまぁ、今どのような環境で利用されているかがわからないとここまで色々と説明を書く必要があるので、ご自身の利用環境は必ず書いてください。長文になればなるほどわかりにくくなります。
  どういう環境で利用していて、どうしたいかは問題となるサイトのアドレスを書いてもらえれば本来おおまかにはわかりますが、Simplicity公式の設定とご自身の設定が必ずしも同じというわけではないかと思います。ここらは僕らはわからない部分なので、再現して確かめるというのもできませんからほぼ想像です(笑)
  
  復唱になりますが、「#mainのサイズが#body-inに追従しないならさせればよい、つまり設定(スタイル)がないなら書けば良いということになり、不足分のメディアクエリを書けばおそらくは対応できるようになるかと思います。」言いたいことはこれだけなんですけどね(笑)
  
  jQueryのサンプルはやっつけで書いてあるのであくまで参考までに。完全レスポンシブonでも、タブレットでサイドバーを出したり色々はできるという例なだけです。
- 2017年1月30日 4:38 PM #49833
  Hidekichi
  ゲスト
  おっとレスしている間に、投稿していただいたようで。
  
  問題としては、画像のmax-width: 100%が消されているというのにありそうです。子テーマstyle.cssにでも、
```
.error404 #main img {
  max-width: 100%;
}
```
  あたりを追加してみてください。
- 2017年1月30日 4:42 PM #49834
  Hidekichi
  ゲスト
```
.error404 .not-found {
  max-width: 100%;
}
```
  こちらの方がスマートですかね。
  .not-foundが別の画像や要素に使われていないのであれば、
```
.not-found {
  max-width: 100%;
}
```
  これだけでも行けそうです。
- 2017年1月30日 5:18 PM #49835
  足立健史
  ゲスト
  ありがとうございます。
```
.error404 .not-found {
  max-width: 100%;
}
```
  で解決いたしました。
  
  レスにご説明いただきました内容は、詳細、勉強させていただきます。
投稿者

投稿