STINGER5のタブレット縦表示を横表示と同じレイアウトに変更

ipad-820272_1920

ハイ! リサです。

「oh yeah Steve !」はSTINGER5をテーマに使用しています。
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 } ?>

これで、タブレットの縦・横の向きを変えてもレイアウトが変わることがなくなります。

やってみてね。

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする