【WordPress】スマホでピンチアウトでの画面拡大ができない場合の対処方法！

フクロウ( Fukurou_Japan)です。

今回はスマホでの画面拡大できない状態の対処についてお伝えします。

一部のコードの削除と一部コード追加のみという簡単なやり方です。

【Wordpress】スマホでピンチアウトでの画面拡大ができない場合の対処方法！

スマホでWEBページを表示した際に、ピンチアウト（指を広げる動作）で画面が拡大しないページが時々ありますよね？

ピンチアウトの可否はWordpressのテーマによって違います。

htmlのheadの部分に　【viewport】というものがあるのですが、そこに【画面を拡大するか否か】の設定があり、あるテーマはデフォルトでオン、あるテーマはデフォルトでオフ・・このようになっているわけです。

ちなみにstingerやAffingerですとデフォルトでオフになっています。

（オフになっているというのは拡大ができないという意味）

この部分の制御が理解できれば簡単に画面拡大ができるようになります。

VIEWPORTの設定方法

今回をAffingerを例にしてご説明致します。

基本的な考えは他のテーマでも同様です。

HTMLの中の　Viewport　という部分を修正します。

header.phpを編集するのでバックアップは忘れずに取ってから作業してください。

では手順です。

１　Wordpress管理画面→外観→cssの編集→header.phpを開く

２　以下の文字列が　head　タグの中にあることを確認する

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

３　上記のコードを以下のように変更する

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

・header.phpを保存する。

これだけです。

２つのコードの違いは　,user-scalable=no　←この部分の有無です。

このコードがあれば画面が拡大せず、なければ拡大するというわけです。

Viewportについて詳しくお知りになりたい方はこちらのリンクをご参照ください。

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

一部のページだけ画面拡大できないようにする方法

先程の方法で、すべてのページにおいて画面が拡大できるようになりました。

が、もしかするとページによっては拡大させないほうが都合が良い場合もあるかもしれません。

そういった際にはこの方法をお使い下さい。

・Wordpressの固定もしくは投稿の編集ページを開き、下部にスクロールして【headに出力するコード】という部分を見つける

・その中に先程の２番のところでもお伝えした以下のコードを貼り付ける

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

・編集画面を保存（更新）する

以上です。

これで、そのページだけは拡大ができなくなります。

最後におまけですが、画面自体の拡大では無く、画像をタップした際にピョコン！と画像のみを大きくしたい場合は以下のようなプラグインを使用すると良いですよ。

ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Easy FancyBox」の設定と応用例

ただし、この場合は『一部の画像だけはピョコン！をさせない』のようなことができるのかどうかは不明です。（できたとしても画像ごとのCSS修正が必要になると思われます）

まとめ

今回の方法は詳細な動作は理解していなくてもそのとおりにやれば同じ結果が得られますので、そののままコピペして使用してください。

ひとつひとつ理解してから前に進めるようなやり方をしていると、スキル習得がかなり遅くなってしまうので、とりあえずは真似してみて、後から必要になったときだけ調べるようにすると良いですね。

それではまた次回！