完全レスポンシブデザインについて

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 完全レスポンシブデザインについて

このトピックには9件の返信が含まれ、2人の参加者がいます。2 年、 3 ヶ月前 k さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #44392

    Simplicity2の子テーマを使用していますが
    完全レスポンシブデザインをONにするか迷っています。
    アドセンス広告は記事の中に、上中下1個ずつをセンターに合わせて
    任意の場所に直接貼り付けています。
    この場合、完全レスポンシブデザインをONにしても何か不具合が生じなければ
    そのようにした方がいいのでしょうか。

  • #44397

    hidekichi

    完全レスポンシブをonにした時に、有効な状態は

    相手がどんな端末で見ているかわからない
    └→サイズを気にする必要がない
    リサイズに対応することができる
    子テーマstyle.cssで全てをまかなえる
    ├→httpレスポンスを少しでも減らせる
    └→mobile.cssやis_mobile()を必要としない

    デメリットは、これらをした時に問題が出る可能性があると言う感じでしょうか。現在ウチのサイトではonにしていますが、広告以外は特に問題なくイケてると思います。
    cssはSimplicityの親テーマの修正版みたいなものを適用していますがほぼデフォルトなのと、完全レスポンシブ向けに何かしら別途スクリプトを入れているわけではありません。

    逆に何もしていないのでうまく行けている可能性もあります。何かしら手を入れることによって、それらをリサイズ対応にしたりする必要もあるかもしれないからです。

    特に問題がなければ完全レスポンシブはoffで使ったほうが安定はしていると思います。より柔軟にいろいろとしたい場合はonにしたほうが汎用性は上がるかと思います。

    完全レスポンシブoffの場合、問題となるのはタブレット以下のサイズになる場合にリロードが必要になる点です。逆を言うとリロードすることで必要なものが初期化されて読み直されるため動作が安定すると言うことです。
    onにした場合はこのリロードが不要になります。不要ですが、それ用のスタイルを書く必要も出てくるかと思います。

    ただし、これが必要になるのはPCからブラウザのサイズを変更してスマホ画面を確認するとかそういう場合で、一定の画面サイズのデバイスでサイトを見る分にはoffで利用しても画面サイズを変更することはありませんから何も問題ありません。

    ポイントとしては、必要な表示にリロードが必須になるかどうかです。

    本来であれば完全レスポンシブONでサイトをデザインするのが一番汎用性があります。が、広告が多く入っているとか、テーブルで何かしら表示してあるとか、文字のサイズにこだわりがあるとか、文字組についても同じですが、ちょっと画面サイズが変われば問題が出ると言うような場合はoffで利用したほうが良いかもしれませんね。

    完全レスポンシブがoffの場合、viewportは1280pxであるというのも注意すべきポイントです。これは画面サイズが小さい時にメディアクエリが働かなかったら全体が縮小されることを意味しています。
    通常は、viewportはdevice-widthで、そのデバイスのサイズに勝手に合わせて、かつメディアクエリも利用して必要なところに必要な表示をさせるようにデザインします。

    いろいろと書きましたが、通常利用でoffでも問題ないと言うのであればoffで利用するのが良いかと思います。何かしら問題が出た場合に、onを利用してより柔軟になるように表示できればそれでよいですから。

    自分だけの環境では、どのように表示されているかを全て確かめることはできませんので、知り合いとかを利用したりあるいは違う端末で試して、今現在どのように見えていてどのように見えるようにするのが正解かをつかめるようにすると、おのずとどのモードで使えばよいかがわかるようになるかと思います。

  • #44405

    いろいろありがとうございます。
    それでは現在の状態では完全レスポンシブがoffの場合、
    viewportは1280pxということで今PCで見えている状態でそのまま縮小されてしまうということでしょうか。
    レスポンシブというのは通常ならviewportがdevice-widthで調整されるという意味だと思うのですが、
    offだとそうではないのでしょうか。

    今のサイトでは特にテーブルとかは利用していませんが
    画像は最大で左右620pxのものや左右420pxのyoutube動画が多く掲載されています。
    アドセンス広告は左右350pxのもをセンターに配置しています。
    サイドバーも何もカスタマイズしていません。

    この状態でonにした場合に不都合はあるでしょうか。

    現在スマホや携帯などからのアクセスが半分以上なのですが・・・
    これは関係ないかもしれませんが、
    新しいサイトにしてからアドセンスのクリック率が大幅に落ちたので
    ひょっとしてちゃんと見えてないのだろうかと少し不安です。
    それで完全レスポンシブをonにしてないのが原因かと思うようになりました。

    大変初歩的な質問で申し訳ないのですがよろしくお願いします。

  • #44411
    わいひら
    わいひら
    キーマスター

    デフォルトで、完全レスポンシブが有効になっていないのは、AdSenseのダブルレクタングルを使いたかったからというのが、作成時の理由です。
    詳しくは以下に書いてあります。
    https://wp-simplicity.com/simplicity-and-cache-plugin/

    それ以外で言えば、完全レスポンシブが有効になったからといって、そこまで大きく変わるものではないと思います。
    というか、一度有効にして表示を確認してみられることをお勧めします。
    問題があれば、使用を止めるということも設定で手軽にできますし。

    自前で、記事中に貼り付けたアドセンスコードがどのように影響するかまでは、僕の方からはわからないです。(アドセンスに関しては、Simplicityの336×280、300×250ウィジェットで貼り付けられたものしか作者側は動作が読めないので)
    ただ、完全レスポンシブ機能をオンにしたからといって、本文中に貼り付けたアドセンスコードがどうにかなるということはないと思います。

  • #44412

    hidekichi

    > 完全レスポンシブがoffの場合、viewportは1280pxと
    > いうことで今PCで見えている状態でそのまま縮小されて
    > しまうということでしょうか。

    これはメディアクエリと、そのデバイスがサイトを読み込んだ時にロードで初期化処理があって、もしその端末がモバイル端末ならmobile.cssが読み込まれたり、スマホなら間違いなくviewportがdevice-widthになるので問題ありません。
    完全レスポンシブの場合は、最初からdevice-widthで、リサイズしても維持されるだけの話です。つまりシームレスにリサイズできて、リロードが不要と言うことです。

    本来ならリロードされて初めて動作する内容が、リロードがない場合に動作するかどうか、させられるかどうかがモードを選ぶポイントですかね。
    ただし、ほとんどの人はリサイズって言ってもPCの場合はちょっともう1画面ウィンドウを出すかと言う時にブラウザ幅を小さくしたり、タブレットとそれ以下のものなら縦横向きの差ぐらいなのでメディアクエリで操作できる範疇です。

    これらのことから、スマホでアクセスする人はどちらのモードでも(ON|OFFどちらでも)最初からviewportはdevice-widthなのでアクセス数に影響があるとかはないと思います。
    完全レスポンシブONはPCの画面サイズからブラウザのリサイズをしてスマホサイズで見るような、本来ありえない状況の時に、その中身にリロードが不要と言うことです。逆のサイズもまたしかり。

    これはどんなサイズのデバイスでも同じ設定のまま表示され、一定のサイズにリサイズされるとメディアクエリが働くと言う感じです。←これが説明したいことですがうまく伝わるかがわからないですね(笑)

    youtube動画はiframeなので、それはタグに対するcssの設定でアスペクト比を維持したままレスポンシブ化できます。

    > アドセンス広告は左右350pxのもをセンターに配置しています。

    アドセンスはそれがGoogleのものであれば、レスポンシブ広告の広告コードのメディアクエリ設定でレスポンシブ化もできます。他のアドセンスでも、スマホなどの時に画面内に入るサイズの広告がセンターに一つなら、その広告コードが入っている親の要素さえレスポンシブにしてアレば完全レスポンシブONでも何も問題ありません。

    一番の違いはmobile.cssを使うかどうかぐらいの差ですかね。完全レスポンシブONは子テーマstyle.cssで完結です。mobile.cssは読み込まれません。

  • #44418

    ありがとうございます。
    要はリロードの必要な環境でなければ、最初からスマホや携帯などで見る場合は
    device-widthになるので問題ないということでしょうか。
    youtube動画のサイズについても問題ないということですが、
    サイズの大きな画像については縮小されて表示されるのでしょうか。

  • #44421

    hidekichi

    > 要はリロードの必要な環境でなければ、最初からスマホや
    > 携帯などで見る場合はdevice-widthになるので
    > 問題ないということでしょうか。

    ちょっとニュアンスが違います。

    完全レスポンシブONはdevice-widthですし、OFFはリロードによってdevice-widthになります。スマホで最初にロードした場合はどちらもdevice-widthです。が、PCで最初にロードした場合は完全レスポンシブOFFの時は1280pxで読み込まれ、リサイズしてスマホのサイズにしてもPC表示(タブレット表示まで)ではみ出すはずです(横スクロール発生)。

    完全レスポンシブOFFのモバイル判定はユーザーエージェント判断なので、PCではスマホサイズまでリサイズしてもそのままです。

    モバイル端末で読み込んだ場合はモバイル用の要素で処理されて、かつmobile.cssが読み込まれます。narrow.cssとかそのあたり。
    リロードが必要ですが、モバイル用の処理ができるのでシームレスにレスポンシブにならなくても良い場合はOFFの方が専用の処理ができると言う具合です。

    完全レスポンシブONでこれをしようとすれば、クライアントサイドからサーバーサイドをいじる処理を必要とします。まぁ特殊な場合ですけれども。逆にいじる必要がなければ完全レスポンシブONが本来のレスポンシブの動作ができます。

    つまりは、PCと同じ要素が画面内にあって、それをスマホでも同じようにかつシームレスにレスポンシブ化するなら完全レスポンシブONで、どうせそれぞれの端末でしか見ないわけですから完全レスポンシブOFFでも何も問題ないと言うことです。

    > youtube動画のサイズについても問題ない…
    > サイズの大きな画像については縮小されて表示されるのでしょうか

    iframeはレスポンシブになっているはずです。アスペクト比までを任意に保つ場合は別途cssで設定が必要ですが基本問題ありません。仮に680px以上のサイズを貼ってみても#mainの中に収まっていると思います(※)。それはつまりレスポンシブされているからです。

    ※ 要素がはみ出した場合はサムネイルははみ出し分を非表示でセンタリングされます。1280pxの16:9を貼った場合とか)。再生が始まったらyoutubeのスクリプトは親要素のサイズを調べて基本は16:9で動画は再生されると思います。コンテナサイズは大きいまま。

    アスペクト比までを任意に保つ場合と言うのは、この最初の表示サムネイルを含むそのyoutubeコンテナを16:9で表示して横100%で表示します。#mainのサイズが大きくなっても小さくなってもその横サイズ最大で16:9表示ができます。
    しかしこれは1280pxの大サイズの動画を貼ったとしても、#mainの横幅にレスポンシブ表示されると言う意味です。

    ここらは実際に貼ってみて試してみて検証して自分の思うようになるかどうかを確認していく必要があります。chromeでは携帯エミュレーションがあるので、実機と完全に同じかどうかは不明ですが基本表示の確認はできます。

  • #44422

    何度も丁寧に説明していただいてありがとうございます。
    最後に聞きたかったのは動画のサイズではなくて、
    一般的な画像(写真)のことです。
    大きなサイズの画像を張った場合はリサイズされるのでしょうか。

  • #44427

    hidekichi

    されますよ。youtubeと同じ理屈です。
    画像の場合は親要素に対する横100%で縦autoですけどね。貼ってみればわかります。cssで部分的な解除もできますし、設定もできます。jQueryを使うばモーダルに出すこともできますし、サイドパネルでも表示できますし、たいていのことはできます。

    そもそも何も手を入れてなければwordpressの素の機能が働きますのでレスポンシブです。

    そもそもレスポンシブにならないのはpxで指定してある要素です。%や、calc等で計算されたものならばレスポンシブになりますし、それらはcssでカスタマイズするのが基本です。

  • #44433

    いろいろ丁寧に説明していただいてありがとうございます。
    とても勉強になりました。

トピック「完全レスポンシブデザインについて」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)