WPtouch テーマにてピンチアウトで拡大可能に&文字を大きく行間を広く修正

スマホ・モバイル用のテーマで最適化してあるとは言えど、ピンチアウト・ピンチインで拡大・縮小ができないのはユーザービリティに欠けると思います。実際自分がiPhoneやスマートフォン使ってウェブサイトを読んでて困る場面多いし、なんででかくならんのと。Wordpress のモバイル用テーマプラグインである WPtouch はデフォルトではピンチアウトできないようなので直します。ソース調べたりして遠回りになったけど、実は設定画面でできたというオチ。

スポンサーリンク

WPtouch のソースを調べてみた

WPtouch テーマの最上部 head 部は、wp-content/plugins/wptouch/themes/core/core-header.php に書かれています。core-header.php 6行目〜にてヘッダー部のメタタグ、meta name=”viewport” ~ / の部分で user-scalable が設定されている。

このソースを見てピンときたけど、 bnc_is_zoom_enabled() 関数が true の時は user-scalable=yes になっているではないですか!ああ、これは設定画面で設定できるかもしれないなと。ということでソースはいじらずにブラウザから WPtouch の設定画面へ。

WPtouch の設定画面から設定する

そしてやっぱりありました。Advanced Options のところ。

スクリーンショット 2013-06-10 10.38.25

Choose to enable/disable advanced features & options available for WPtouch.
□ Allow zooming on content ?

という設定があるので、これにチェックを入れて保存。これで、あっさりと WPtouch のモバイルテーマでもピンチアウト・ピンチインで表示の拡大・縮小ができるようになります。実は超簡単でしたね。

最後におまけ:デフォルトの文字を少し大きく、行間を広くする

wp-content/plugins/wptouch/themes/default/style.css を修正します。

1177行目あたりの #singlentry をコメントアウトして修正、line-height を 28px にして広げて、font-size を 16px にして少し大きくしました。デフォルトの WPtouch はちょっと文字が小さく、行間が狭いかなぁと感じていましたので。

スポンサーリンク
WordPress は人気ナンバーワンのブログ・ウェブサイトの管理ツールです。PHP を使えればカスタマイズできるので、ぜひトライされてみてください。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!