画面の拡大縮小操作ができない！Stinger Plusのカスタマイズ例でviewport設定を解説

ワードプレスのテーマにもいろいろありますが、パソコンで見ている分には問題なくても「スマホやタブレット」など画面が小さいモバイル端末で表示している時に「拡大して見たい！」という時があります。

もっと大きな文字で読みたい、画像が小さいので拡大して見たい、などがそうですが、そんな時、ピンチイン・ピンチアウト（画面を二本の指でつまんだり広げたりする操作）をしてみても、これが出来ないサイトが結構あったりするんですね。

私の場合、つい「イラッ」としてこんな顔  (｀ω´*) になったりしますが（笑）、あなたのサイトはこの拡大・縮小は出来るようになっていますか？

ここでは私も愛用のテーマStinger（2016年7月現在の最新はStinger Plus）を例に、スマホなどで拡大縮小できるようにするにはどうするか、見てみましょう。

Stinger Plusを例に見てみる

画面の拡大縮小は、実は簡単なカスタマイズで実現可能です。

以前のStinger5でも同じですが「viewport」という設定を変更すれば良いんですね。

この「viewport」はテーマのファイルの１つ「header.php」の中に記述されていて、Stinger5やStinger7では以下のようになっています。

• <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

この最後にある「user-scalable=no」が「拡大縮小を禁止する」といった指定で、これを削除すれば拡大縮小ができるようになります。

具体的には以下のように直前のコンマを含めて「user-scalable=no」を削除します。

• <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  （この中でコンマを含み「,user-scalable=no」を削除"）
• ↓↓↓↓↓↓
• <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

ワードプレスの管理画面から、

「外観」→「テーマの編集」で「header.php」をこのように編集して保存すれば、ピンチイン・ピンチアウトで拡大縮小ができるようになります。

※）テーマのファイル編集には細心の注意を払ってくださいね。

viewportとは

ちなみにこの「viewport」は何かといえば「スマホなど携帯端末での表示方法を指定するもの」となります。

指定している内容は以下の様なものですが、

• width： スマホはど、デバイス（表示機器）の幅の指定
• initial-scale： 初期表示の拡大率
• user-scalable： 拡大縮小をユーザーに許可するかどうか

先ほど上で見た設定は以下の内容になります。

• width=device-width
  ⇒ 表示するデバイス（パソコンやスマホなど）の横幅で表示
• initial-scale=1.0
  ⇒ 初期表示は倍率は100%（等倍）で表示

この「viewport」、他にも以下の様な指定ができます。

• minimum-scale：ピンチインした時（縮小表示した時）の最小値
• maximum-scale：ピンチアウトした時（拡大表示した時）の最大値

Stinger5やStinger Plusでは指定されていませんが、通常以上に縮小されても見えづらいだけになる、といった場合には、

• minimum-scale=1.0

を指定に加える、ということもでき、この場合にはviewportの設定は以下のようになります。

なぜ拡大縮小表示をさせないの？

今回の例はstinger Plusでしたが、実際には大手のサイトでもタブレットやスマホで見た時に、ピンチインアウトで拡大縮小ができない作りになっている場合があります。

なぜそうなのか？と調べてみると、

• スマホで表示させた時のタップの反応速度を遅くさせないため
  （詳しくはよく分かりませんが）
• アプリのように見せる、という見せ方の話
• 縦向き横向きにした時に画面に表示される情報量を変化させない

などの理由があげられていますが、それでもやはり一番は、

• とにかくサイトの作り手が制作意図通りにサイトを見せたい
  （制作したレイアウト、デザインを崩してみせたくない）

ということになるのでは、と思います。

作り手の都合が一番大きい、というような気がしますが、読みてから見れば、拡大したい人は拡大できる作りになっていることが一番、と思いますがどうでしょう？^-^;）

Googleが推奨する形は？

ちなみにGoogleはこの「viewport」に対してどのように考えているかは、以下のページに解説されています。

• ビューポートを設定するhttps://developers.google.com/speed/docs/insights/ConfigureViewport?hl=ja

ここでは以下が推奨されてますね。

上で見てきたように、この設定内容は以下2点：

• width=device-width：表示するデバイスの横幅で表示する
• initial-scale=1：初期の表示倍率は等倍（100%）

「user-scalable=no」が設定されていないことから、拡大縮小表示はできる、といった内容になっています。

拡大縮小できないサイトでは、各々がしっかりとした考えの上でそのようにしているとは思いつつ、Googleもこのように推奨している、とわかると、少しホッとします。（笑）

今回のまとめ

• 拡大縮小表示は「viewport」の設定を変更すれば良い
• 拡大縮小表示を可能にするには「user-scalable=no」を削除すればOK
• ユーザー視点で見れば、拡大縮小表示が出来る方が良い
• グーグルの推奨は、拡大縮小表示ができること

拡大する必要のない人は、そもそもピンチイン・アウトなど拡大・縮小操作をしないので、このviewportの設定がどうなっていても問題ない、というか関係ないですが、拡大して見たい！という人にとっては、拡大できる形にしておく事、またその前提でサイトを作ることがユーザー視点では大切だと思います。

私の場合で言えば、ゴロゴロしながらiPadなどでネットを見ている時、文字が小さくて拡大して見たい時がよくあり、それができないサイトは「うぐぐぐぐ」と思いつつ、さっさと飛ばして別のサイトを見たりします。

こうなってくると、制作意図通りにサイトを見せたい、といった以前にサイトそのものを見てくれない、ということにもなり、なんのためにネット上で情報を公開しているのか分からなくなってしまいますね。^-^;）

あなたのサイトはどのようになっているか、一度ぜひスマホやタブレットで表示して拡大、縮小、文字の大きさ、見やすさを見てみてください。

またサイトで収益化を図りたい！という場合には、是非以下のメルマガにも登録してみてくださいね。