stinger5のタブレット表示でサイドバーをPC同様にメインカラムの横に並べて配置する
2015/04/08
デフォルトのstinger5の表示では、ipadなどのタブレットで見るとメインタブだけが表示されてしまいます。
サイドバーに広告を設置していたり、リンクを設置していると、下に追いやられてしまいます。元々タブレットは画面がある程度大きく、サイドバーを表示していても問題なく閲覧できる場合が多くあります。
headerに記述を追加することでタブレットでの表示をコントロールしましょう。
タブレット表示をコントロールする
stinger5のテーマ内にあるheader.phpにある下記コードがデバイスでの表示状態を設定しています。
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
この設定では、デバイスの横幅に合わせて倍率1倍で表示し、ユーザーによる拡大縮小を禁止しています。このままだとipadだと横幅712pxで表示し、サイドバーを下に追いやりメインだけ表示するようになってしまいます。
この状態を回避するには、デバイスに合わせて表示形式を変えてやる必要があります。
<?php
if ( is_mobile() ) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0">';
} else {
echo '<meta name="viewport" content="width=980">';
}
?>
というわけで、このように書き換えます。stinger5に搭載されている、「is_mobile」関数によってスマートフォンではそれぞれの横幅表示、それ以外では980px横幅状態で表示します。
「initial-scale=1.0」を追加すると等倍で表示してしまうので、980px表示状態では排除しています。また、予想外のデバイスで表示してしまった時のためにユーザーによる縮小拡大は許可しています。これでユーザビリティは確保しつつ想定した表示になってくれます。
stinger5のメインカラムの幅を広くし文字のサイズを変更する | wordpressカスタマイズマニュアル
上記リンクで横幅を変更している場合、コードの980pxを変更してください。このサイトでは1200pxに設定しています。