タブレットの横向き表示を、パソコンと同じにしました

今使っている WordPress のテーマは、デザインはとても気に入っていますが、1つだけずっと気になっていることがありました。

それは iPad で表示したときに横向きでも、1カラムになったうえに、拡大表示されてしまうこと。しかも両サイドには無駄な領域がわりと広大に。これではスマートフォンを拡大しただで、タブレットの利点が生かせていないため、ずっと気になっていました。

そこでタブレットの横向き表示もパソコンと同じデザインに変更しました。

ビフォア

この無駄な領域をなくして、タブレットらしくしたい。とはいえ WordPress 初心者の私にはどうすればよいのかまったく分からなかったので、いろいろ調べながら、結果的にとても遠回りしましたが、何とか目的は果たせました。

まず試したこと

CSSを少しいじるだけでも、本やネットで検索しまくりながら、やっと、ちょっとだけ思い通りに出来ているような状態ですので、テーマをカスタマイズして対応するのは、私には手に負えない気がしたので、思い切ってテーマを変更してみました。
WordPress のテーマは無数にあって、よくオシャレなテーマを一覧で紹介してくれている記事もありますが、実際に適用してみないとわからないことのほうが多いです。デモサイトなんかも中がどうなっているかわからないし。しかし下記のブログはとても丁寧に解説してくれているのでテーマを探すときに非常に参考になりました。

WordPress – 無料テーマ&テンプレート紹介サイト｜テーマタンク

で、とあるテーマをみつけて、頑張ってCSSをカスタマイズして、いったんテーマの変更をしたんですが、どうしても気に入らない部分があって、しかも私のスキルで修正することができなかったので、元のテーマに戻しました。

CSSのカスタマイズだけでも、今の自分にはなかなかの労力を要する作業なので、この時点で既に心が折れかかっていましたが、やっぱりタブレットで横向き表示にしたときに気になるんですよね。

レスポンシブ・ウェブ・デザイン

レスポンシブ・ウェブ・デザインとは、パソコン用、スマートフォン用、タブレット用とそれぞれのテーマを用意する必要がなく、ひとつのテーマで、端末や画面のサイズに応じて、表示を最適化しててくれるデザインです。
何か変更をする場合も1つだけ更新すれば良いので、私のようなテーマのカスタマイズに慣れていない初心者には、ありがたい仕組みです。

そんなわけで、このブログの WordPress テーマもレスポンシブ・ウェブ・デザインのテーマを使っています。

気を取り直して、今度は元に戻したテーマ(今使っているテーマです)のCSSを眺めていたら、下記のコードが。

？？？ これはもしかして、最大サイズが 1078px まで Portrait、つまり縦表示に設定されている？
そこで最大サイズを 780px に変更してみました。

これが正解でした。こんな簡単に解決できるとは。。。別のテーマいじったり、検索しまくったり。。。。

ただ、今回は 1078px 以下が、まるっと Portrait（縦向き）に設定されていたから、単純に最大サイズを修正して、私がパソコン表示にしたいサイズを除外することができたけど、Landscape（横向き）もキッチリ設定されていたらもっと複雑になっていて対応できなかったかもしれない。引き続き勉強が必要です。

アフター

これこそタブレット！
ちなみに、iPad でしか確認していません。ほかにタブレット持っていないので。

ずいぶん遠回りして、だいぶ時間かかりましたが、ひとまず満足です。