普通スマホで色々なサイトを見ていると画面が小さすぎてみにくいことが多々あります。
特に画像jpgなどの文字は広げてみないとわからないことが多いので二本指で画面を広げて拡大（ピンアウト）してみますが、当サイトは広げれない文字もそのままで見にくい？
なぜだか全然わからなかったので変にいじると壊れるのが気になりそのままにしてました。
原因はこのブログのテーマはアフィンガーという有料テーマでした。
このテーマのデフォルト既定がポンチアウトできない仕組みになっていたということです。
アフィンガーのテーマでスマホ画面が拡大できるピンチアウトできるようにした経過です。
アフィンガーがスマホ画面を拡大（ピンチアウト）できない原因・理由
普通の無料のワードプレスのテーマや有用テーマであったとしても大半のテーマで作成したワードプレスの画面はピンチアウトができるようになっています。
しかし、アフィンガーは何故か？ピンチアウトできないようにheader.phpが設定されています。
header.php とは
Webページに関する情報を記述するエリアで色々な指令をするタグが設定されています。
その領域に以下の設定が入力されています。
user-scalable=no
user-scalable とは
画面のズームの操作の指令でユーザーがズームできるかどうかの設定です。
つまり、ここが NOとなっているということは ズームできない ということです。
だからワードプレスのテーマ「アフィンガー」ではピンアウトできないのです。
WPテーマ「アフィンガー」でスマホ画面を拡大（ピンアウト）できるように設定
アフィンガーでスマホ画面をズームできるようにするには
先に述べたタグがスマホでユーザーがズームできないように設定されているのを
逆にズームできるようにすればいいだけです。
既定 user-scalable=no
↓
変更 user-scalable=yes
全体のタグの概要は以下の通りです。
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">
それでは手順をご説明します。
先ずはワードプレスにログインして
-
「外観」 を選択
-
「テーマエディタ」 を選択
-
表示されたテーを子から親に変更
-
「header.php」 を選択
-
Ctl+F を押して「user-scalable」を検索
-
「header.php」 内部の user-scalable=noのno部分をyesに変更
-
保存をクリック
-
スマホ画面が拡大できてるか確認
以上で終わりです。
【 注意】テーマ変更やバージョンアップすると初期化される
テーマのバージョンアップなどをすると初期化されるので再度登録しなおしになります。
また
テーマの改編や色々なことで確認したい場合は
Googleのサイト
にURLを入力するとで
機能がOFFになっているかを以下のように教えてもくれます。
[user-scalable="no"] が <meta name="viewport"> 要素で使用されているか、[maximum-scale] 属性が 5 未満に指定されています。