ガジェニュー

~iPhone・格安スマホとか~

【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

       後で読む

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトによる拡大表示の部分についてカスタマイズしたので書きます。こちらに関してはなんでだろうと思いつつも全く何もわからなかったので放置していたのですが、参考になる記事を見つけたので変更してみました。

それでは書いていきます。

SPONSORED LINKS

STINGER5をスマホでの拡大操作に対応させる

カスタマイズ自体はとても簡単で、5分もあれば簡単に終わってしまいます。ヘッダーの内容を一部変更するだけです。

拡大操作を有効にさせる方法

拡大操作を有効にするためには、header.phpの中にある「viewport」の値を書き換える必要があります。

header.phpではデフォルトの下記のような記載になってます。

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

この部分を下記のように書き換えます。

<meta name="viewport" content="width=device-width,initial-scale=1.0">
POINT
「user-scalable=no」の部分を削除

こうすることによって、ユーザーによるピンチアウト、ピンチインが有効になって、拡大表示が出来るようになります。

また、

body {
  -webkit-text-size-adjust: 100%;
}

参考にさせていただいたサイトにあった上記の記載に関しては特に設定しなくても、横にした状態の文字サイズが変わらなかったので問題ないようです。おそらく、表示される領域にあわせて文字サイズを変更するような設定をしている場合は記載が必要なのかな思いますので必要に応じて入れてみてください。

STINGER5についてはフォントサイズはpxで指定してるので特に問題ないのだと思いますが、、、(間違ってたらすいません)

どうして拡大操作に対応させるの?

文字サイズが固定だと困る人が一定数いると思っているからです。自分の両親などは老眼で小さい文字を見るのがとても大変と言っています。それなのでスマホの表示は自分たちが普段見るサイズの2~3倍の大きさなんです。

そうなってくると、通常の表示だけではなかなか閲覧が厳しいこともあるのです。

その時に、文字の拡大表示がピンチアウトで出来るとよりユーザビリティが高いと思うからです。設定から文字を大きくするやり方がわからない人でも「指で広げると大きくなる」というのは理解していることが多いですしね。

また、個人的に画像を見る際など別ウィンドウで開くのがうざったいと思うことも多く、拡大して閲覧できるのは便利だなと思うことです。無駄にページを開く必要がないので通信料も食わないしいいことが多い気がします。

まとめ

個人的な考えですが、幅広い年代の人に読まれるような記事を書いている人に関してはこちらの設定を変えたほうがいいのかなと思います。多分読みにくくて離脱した人が1人ぐらいはいる。かも。

設定に関しても、とっても簡単にできる部分でユーザビリティが上がる部分だと思っていますので是非お試しを。

てな感じで。

参考にさせていただいたサイト

スマホでのデザインが見やすくて、綺麗でとても素敵なサイト様です^^憧れる。

 - STINGER5, WordPress , ,

  関連記事

icon_1r_192
【アクセス数報告】2015年2月のPVとアフィリエイトの収益とか

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

sum1
カエレバのCSSカスタマイズ

今回はカエレバのカスタマイズを行いました。カエレバといえば、商品のアフィリエイト …

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

images
WordPressのセキュリティ強化!2段階認証を設定しよう!

つい最近の出来事ですが、年金基金から色々と情報の流出が問題となりましたね。担当者 …

icon_1r_192
【アクセス数報告】2015年5月のPVとアフィリエイトの収益とか

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です