ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

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

  関連記事

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

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

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

ana-sum
【アクセス数報告】2014年9月のPVと収益を公開します

今回は初めて、「ガジェニュー」のPVを公開してみようと思います。実際にこうやって …

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

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

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

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

images_111114_064856_PM
カエレバをアイコンフォントを使ってカスタマイズ(SVGファイルもあるよ)

以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホ …

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

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

sum
Gush2カスタマイズ~背景色がPCだけ反映されない~

いつもはstingerを使用しているのですが、運営しているサイトが全部「STIN …

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

Loading Facebook Comments ...

Message

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