ガジェニュー

~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 , ,

  関連記事

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

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

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

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

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

sicon_1r_192_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

simages_011615_064354_PM
【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle A …

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

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

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

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

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

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

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

Loading Facebook Comments ...

Message

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