子テーマの完全レスポンシブ表示を有効にすると不具合

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 子テーマの完全レスポンシブ表示を有効にすると不具合

  • このトピックには2件の返信、1人の参加者があり、最後にりんにより10年、 3ヶ月前に更新されました。
2件の返信スレッドを表示中
  • 投稿者
    投稿
    • #41073
      りん
      ゲスト

      お世話になっております。

      貴Simplicity2と子テーマをインストールし、wordpressにてカスタマイズ中です。

      その際以下の操作の解決法が分からず、質問させて頂ければと思います。

      1.子テーマのカスタマイズ画面から、『完全レスポンシブ表示を有効』にチェックマークを入れると、各投稿画面のタイトル下に、『スポンサーリンク』という文字と広告・カテゴリーのリンクなどが両方表示されてしまい、スクロールしないと本文が存在しないように見えてしまいます。

      2.このレスポンシブ表示を有効にせずに、モバイルでも問題なく閲覧できるような設定があれば教えてください。

      3.親テーマ、子テーマのアンインストール法があれば教えてください。テーマの詳細ページを見ても、他のテーマのように画面右下に『削除』のボタンがありませんでした。

      よろしくお願いします。

    • #41080
      Hidekichi
      ゲスト

      「完全レスポンシブ表示を有効」はPCからモバイルまで、例えばブラウザの画面サイズを変更してもシームレスにリサイズが行われるような設定で、無効にした場合は各ブレイクポイント毎に(というわけでもなさそうですが)リロードをすることよってその時のレスポンシブ表示をするようなものです。

      例えばviewportというのがあります。これはその画面がどのようなサイズで表示されるかなどをhtmlのheadタグに書いておきその数値等に従って表示を変えるというようなものですが、完全レスポンシブオンはこれがwidth: device-widthという端末の幅になっています。

      リサイズを行いその画面幅の時に常に端末の画面幅を基準に表示をします。本来はこれがgoogleやhtml界隈では推奨されている指定です。が、そうするとGoogleのアドセンスなどはPCの時に横に2つ並んでますよね?

      スマホの時に1つになったりする時に、その親のサイズが変わったとしてもGoogleの広告を取得しているスクリプトはそのまま同じものを表示してますからスマホ用の広告サイズのものを再取得できません。
      もう少し簡単に言うと、横長バナー広告があったとして、PCでは問題なく表示されますが、スマホになったらせめて縦長かレクタングルになって欲しいじゃないですか?そういう場合は、Googleのスクリプトが検知して再取得してくれたらいいんですけれどもそういうのが上手くできなかったりします。

      設定で再取得させるような何かしらを書けばできそうな気はしますが、それらも正しく表示するためにはどうすればよいかというと、再度それらスクリプトを読みこめばよいわけです。
      再度読みこむというのはブラウザのリロードです。そもそもPC画面を狭くしてスマホ画面を確認すると言うことは開発している人以外はまぁありません(PC表示で同じ内容が表示されているので)し、スマホでは画面幅の限界があるのでPCのようには表示できません。

      なら、その都度ページを読み込んだ時にviewportをその端末に合わせてつければいいじゃんというようなものが完全レスポンシブオフです。この場合、PCとモバイルでviewportのwidth等の内容がかわります。

      広告も入れない(対応してないといういう理由などで)、PCからもスマホの表示が見れる方が良い、スマホまで行かなくてもタブレットサイズぐらいでブラウザの幅を狭めて見たいという場合ももちろんあります。その時にいちいちリロードが面倒くさいのでリサイズで変化したほうが良いはずです。

      他にも、ブラウザを表示している端末は様々なサイズがあるので、管理者が想定しているサイズ以外で見られることがあります。そんな時でもdevice-widthにしておけば、その端末に合うサイズで表示されるのですが、中にはタブレットでサイドバーが出したいという、設定の裏というか「いや折角ブレイクポイントで表示が変わるようにしてるのにわざわざ縮小表示?」と言うのを要求するケースもあります。

      この時に、viewportを任意の数値にしておけば端末にあったサイズではなく、そのページサイズが端末の方に合わせられるため縮小して表示されます。

      本来の世間で言うレスポンシブは完全レスポンシブONですが、様々な要因で再読み込みが必要なのは完全レスポンシブOFFです。どちらを選んでも、モバイル端末で表示されるようにSimplicityではなっています。

      そもそもスマホでしか見ない場合、そこにはスマホしか無いんですからリサイズは行われません。が、モバイル端末には縦横があるでしょう?
      ブレイクポイント(表示切り替えのポイント)が上手く設定できてない場合(あるいは意図としてそうしてある場合を除いて)、縦横で表示が変わったりすることがあります。特にタブレットとか。
      また意図的に縦向き横向きでデザインを変えることもできます。

      ipadを縦で見た時の横幅は768pxだったと思いますが、横だと1024pxだったと思うのでPCのサイズまであとわずかなんですよ。Simplicityは横1070pxで全部が表示されますが、おそらくipad横向きなどでモバイル判定されないようにもう少し大きくブレイクポイントがとってあったと思います。

      こういった縦横にもその画面サイズに納まるようにするのがviewportのdevice-width指定です。数値で入れるとその数値で表示されるためページが縮小されるのは前に書いた通り。

      長くなりましたが、
      > 各投稿画面のタイトル下に、『スポンサーリンク』という
      > 文字と広告・カテゴリーのリンクなどが両方表示されてしまい、
      > スクロールしないと本文が存在しないように見えてしまいます。

      これは完全レスポンシブではそうなると思います。レスポンシブ化できないというかするためにはもっと工夫がいるからです。でそれをするにはGoogleの規約に沿った形でしないといけませんから何でもかんでもやることはできません。

      なので、レスポンシブ化する場合には、多分グレーゾーンかと思いますが、スマホ用の広告を用意しておいて非表示にしておき、スマホのサイズになったらそれを表示する。で、PC側を非表示にするとか、スクリプトでそれらの整合性をあわせるとかが必要になります。

      完全レスポンシブをoffにしておけばリロードが発生しますからその都度その画面にあったサイズの広告を表示しますのでちゃんと表示できるようになります。

      ここからも2の質問と合わせて、完全レスポンシブをoffにしておけばまぁ問題ないと思います。おそらく表示がおかしくなったとしてもどこかリンクを踏んでページにリロードが発生すればちゃんと表示されると思います。

      こういったリサイズ問題はGoogleも対応するとか言ってたと思うんですが、前に実験した時はされていませんでした。まぁ広告代を払う方ですから、広告表示がダメなら入れなければいいじゃんのスタイルなんでしょう(笑)
      確かに入れる入れ無いは管理者の都合ですから。

      あと、Googleの広告はメディアクエリが利用できます。その画面サイズの時にどう表示するかは設定できるんです。これらを利用したら完全レスポンシブでもまぁイケる可能性はあります。

      他にももっと色々とどうした方が良いかのベストプラクティスがあるかと思いますが、例えばとりてみ、でいこうか。このようなサイトを参考にされると良いかと思います。

      これらで表示を変更する場合、Simplicityではおそらくここらを想定して完全レスポンシブオンが作られてないかも知れないので、広告の表示エリアのレスポンシブ化は自身で行う必要が出てくるかも知れません。

      ここまで長々と書いたものを簡単にまとめると次のようなことです。
      他の要素がレスポンシブに対応していても、広告エリアがそれに対応していない場合、また広告自体をレスポンシブ化したとしても、完全レスポンシブオンですべてを上手くやる場合は何かしらひと工夫が必要。

      と言うようなことです。ここらはGoogle謹製の説明もあったと思います。

      3の質問で、Simplicityのテーマを削除するためには別のテーマを有効にして、それからテーマ画面でSimplicityを選択すると削除の項目が表示されます。これは今利用しているテーマが有効の間は削除できないという極当たり前の仕様です。

    • #41106
      りん
      ゲスト

      完全レスポンシブ対応の仕組みや、その他のリサイズについての詳細を解説していただき、ありがとうございました。
      平坦な言葉で書いて下さったとは思うのですが、私はこの分野に詳しくない為なかなか難しかったです。

      全ての点についてのご解答、ありがとうございました!

2件の返信スレッドを表示中
  • トピック「子テーマの完全レスポンシブ表示を有効にすると不具合」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)