ガジェニュー

~iPhone/iPad・レビュー・比較・レザークラフト・ネットフリックスとか~

【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人ぐらいはいる。かも。

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

てな感じで。

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

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

 - WordPress , ,

  関連記事

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

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

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

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

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

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

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

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

エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

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

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

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

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

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

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

WordPress「Popular Posts」で画像が表示されなくなった原因・と修正方法

こちらのブログなのですがWordPressを使用して運用しています。今回は上の画 …

【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

Loading Facebook Comments ...

Message

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