賢威6.1のレスポンシブWebデザインは、iPadで縦向きに表示すると画面からはみ出る
賢威6.1はレスポンシブWebデザインに対応し、スマホでもタブレットでも最適の表示がされる！という触れ込みなのですが、iPadを縦にした時の表示に不満があります。
いつも横幅が画面からはみ出るので横スクロールバーが表示されてしまい、微妙なんですよね。賢威6.1を使っている他のサイトをいくつか見てみましたが、どこもはみ出てました。
たまにはみ出てないサイトがあるので、そのサイトをスマホで見てみると、レスポンシブWebデザインはオフになってます。
結論から言うと、はみ出るのは賢威の仕様です。賢威のレスポンシブWebデザインは、みんな満足して使っているのでしょうか。
賢威6.1のレスポンシブWebデザインを、iPadで検証する
まず、ワードプレスで メニュー → 賢威の設定 と移動し、レスポンシブWebデザインが有効になっていることを確認しておきます。
※今回のテンプレートは賢威6.1、全体の横幅は950ピクセルです。
普通にパソコンで全体を表示させるとこんな感じです。
ブラウザの幅を狭くしていくと、メインカラムの幅より小さくなった時点でレスポンシブWebデザインの切り替えが発動します。サイドバーのコンテンツが画面下部へ自動的に移動しました。
PC上ではいい感じなんですよね。
※ちなみにレスポンシブWebデザインをオフにすると、横スクロールバーが表示されてサイドバーは維持されます。
では、気になるiPadの表示を確認してみましょう。
端末を横にした場合には横幅ピッタリです。
iPad3で表示しています。
端末を縦にしたらはみ出ました！
ここが問題です。
ピンチインして横幅を合わせても、次のページに行くとこのはみ出ている位置に戻ってしまいます。
私はiPadを縦にして使うことが多いのですが、一般的には横にして使う人の方が多いのかな？iPad2でも確認しましたが、同じですね。
できれば、きっちり横幅を合わせて表示して欲しいです。
賢威のサポートフォーラムで、この件の問い合わせがあった
この件に関して情報が無いか、賢威のサポートフォーラムを見たところ、同じような質問が来てました。
回答は以下の様なものでした。
「レスポンシブWebデザインは2段階しか設定してないので、それ以外には対応できない。CSSに記述すればiPadの横幅表示も調節できる。」
要は、はみ出るのは仕様ということですね。
CSSで場合分けして細かく設定するのは手間です。現在の仕様でも致命的にサイトが見られないわけでは無いので、そこまでして拘るというほどではない、という感じです。
ということで、私が出した結論は
※追記
レスポンシブウェブデザインを無効にしていたら、スマホからのアクセスだけ直帰率が高くなってしまったので、現在は有効にしました。
→スマホの直帰率が高い！レスポンシブWebデザインを有効化
メニュー → 賢威の設定 と移動し、「レスポンシブWebデザイン」を無効に設定します。
すると、当然ですがiPadの縦表示でもそのままの横幅がピッタリ表示されました。横でも縦でも常に横幅が画面の幅にピッタリ追従するので、こっちのほうが見やすいです。
レスポンシブWebデザインをオフにすると、スマホでもサイドバーを含めた表示がされます。小さい画面だと見にくいかなぁと思いましたが、意外と見やすいです。
スマホ専用のレイアウトが苦手な人も多くて、わざわざPCのレイアウトを表示させる人もけっこういるみたいですよ。
ブログの読者に評価されたりされなかったりも重要なんですが、気になるのは検索エンジンからどう評価されるかですよね。
見やすさを考えてオフにしたのに、レスポンシブWebデザインでないからといってサイトの評価を下げられたらやりきれません。
それを考えると、プラグインwp-touchを入れてスマホに最適化させるのもひとつの手です。
ただ、せっかく賢威がレスポンシブWebデザインに対応してくれているので、今さらスマホ用に別のテンプレートを用意するのも微妙な気がします。
ということで、このサイトではレスポンシブWebデザインをオフに設定し、スマホでもPCと同じようにサイドバーを表示していきたいと思います。
レスポンシブWebデザインを有効にした賢威が、iPad縦表示の幅にもぴったり合わせてくれるようになったら最高なんですけどね。
＜関連記事＞
