更新日: 2013年6月10日
WordPress

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

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

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

WPtouch のソースを調べてみた

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

<?php if ( bnc_is_zoom_enabled() ) { ?>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<?php } else { ?>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<?php } ?>

<?php if ( bnc_is_zoom_enabled() ) { ?>

<?php } else { ?>

<?php } ?>

このソースを見てピンときたけど、 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 はちょっと文字が小さく、行間が狭いかなぁと感じていましたので。

/*
#singlentry {
	line-height: 150%;
	color: #333;
	display: block;
	overflow: hidden;
	font-size: 14px;
}
*/
  ↓
#singlentry {
	line-height: 28px;
	color: #333;
	display: block;
	overflow: hidden;
	font-size: 16px;
}

1177

1178

1179

1180

1181

1182

1183

1184

1185

1186

1187

1188