ガジェニュー

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

  関連記事

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

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

chatlike-css-tb
レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いて …

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

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

images 2
App Store Insertでアイコン画像が表示されない問題を解決!【ブログカスタマイズ】

当サイトでもかなりお世話になっている「App Store Insert」ですが、 …

simages_122214_110736_PM
【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指し …

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

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

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

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

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

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

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

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

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

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

Loading Facebook Comments ...

Message

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