このブログはSTINGER5をテーマに使用しています。（2015年10月26日現在）
STINGER5はレスポンシブのテーマで、SEO最適化済みの無料テーマとして人気のテーマです。
私もこのテーマが気に入っていて、メインの領域が少し狭いですが、文章を書く身としてはそれもメリットと感じています。
変に大きすぎないのがいいです。
しかし1点だけ許せなかったのは、タブレットの縦と横でレイアウトが違ってしまうことでした。
STINGER5のブレークポイントは780
STINGER5のPC用のブレークポイントは780pxに設定されているため、タブレットの横表示ではPCレイアウト、縦表示ではスマホレイアウトに変わってしまいます。
同じタブレットの表示なので、縦向き・横向きでレイアウトが変わるのは直感的に嫌悪感があります。
そこで、修正することに。
ブレークポイントを700に変更
style.cssにブレークポイントは設定されています。
2箇所の780を700に変更しました。
ところが、そうするとメイン領域の横幅が全く足りません。
ブレークポイントを変更する修正では、タブレットのレイアウトを統一できないことに気づきました。
viewportを変更
タブレットやスマホの横幅はmetaタグのviewportで決定しています。
そこで、viewportを変更することにしました。
変更するphpはheader.phpです。
変更前
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
変更後
<?php if(is_mobile()) { //スマホの場合 ?>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<?php } else { //PCの場合 ?>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<?php } ?>
これで、タブレットの縦・横の向きを変えてもレイアウトが変わることがなくなります。
やってみてね。
by T.Y.