Stinger5-Cheetahはインストール直後の状態で、Googleの『PageSpeed Insight』でチェックすると、ページの下の方のモバイルのユーザー エクスペリエンスで

  • コンテンツのサイズを表示域に合わせる
  • タップ ターゲットのサイズを適切に調整する

という2点の修正をオススメされます。

fixed-search-box-01

 

Stinger5-Cheetahカスタマイズ速習の基礎編第06回では、このうち『タップ ターゲットのサイズを適切に調整する』の方を修正しながら、子テーマでCSSを追加・修正する方法 について練習してみましょう。

目次はこちら:

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし!

基礎編 第03回 管理画面でデザインを変更しよう

基礎編 第04回 ナビゲーションやフッターを設定しよう

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する ←今ここ

基礎編 第07回 コンテンツのサイズを表示域に合わせる

 

補足

ちなみに、今回の記事はStinger5-Cheetahの『子テーマ』が導入されているという前提で書かれています。

まだ導入していない場合は下記の記事を参考に導入することをおすすめ致します。

 

 

まずはエラーの原因を知ろう

PageSpeed Insightの『タップ ターゲットのサイズを適切に調整する』についてより詳しい情報を得るために、『修正方法を表示』をクリックしたのが↓の図です。

fixed-search-box-02

ウェブページのリンク/ボタンのいくつかは小さすぎるため、ユーザーがタッチスクリーンで簡単にタップできない場合があります。ユーザー エクスペリエンスを向上させるためにタップ ターゲットをより大きくすることをご検討ください。

 

より具体的に対策を寝るためにGoogle Developersで調べてみると、下記のような内容がありました。

平均的な大人の指の腹のサイズは幅約 10 ミリで、Android UI のガイドラインで推奨されるタップ ターゲットの最小サイズは約 7 ミリ(モバイル ビューポートを適切に設定済みのサイトでは 48 CSS ピクセル)です。

タップ ターゲットのサイズを適切に調整する  |  PageSpeed Insights  |  Google Developers

 

つまり、エラーとして挙げられている『<input id="searchsubmit" type="image">』が、他のパーツと非常に近い位置にあるので、余白を持たせることで解決できる、ということになります。

 

 

スポンサーリンク

次にエラーの場所がどこか判別しよう

FirefoxやGoogle Chromeといったブラウザには、Web制作用のツールが用意されています。

今回はGoogle ChromeのWeb開発ツールを使って説明します。

 

まず『F12』をクリック

fixed-search-box-03

 

下半分の画面にカーソルを合わせて『Ctrl + F』をクリック

fixed-search-box-04

 

<input id="searchsubmit" type="image">の場所を探したいので、検索窓に『searchsubmit』と入力

fixed-search-box-05

 

黄色に変わったところにマウスカーソルを合わせると、上半分の画面のどこのことか、色がついて分かる

fixed-search-box-06

これで、エラーの原因がサイト内検索の『虫眼鏡ボタン』だとわかりました。

 

 

スポンサーリンク

最後にエラーを修正しよう

最後は、エラーの修正です。

上記のGoogle Developers の説明にも有るように、最小のタップターゲットが48pxということで、それ以上の大きさになるよう、ボタンの大きさ、または他の要素との距離を開ける(余白を作る)必要があります。

 

今回は、検索ボックスの上下にちょっとだけ余白を作ってみましょう。

 

WordPressの管理画面にログインしたら、『外観』 > 『テーマ編集』の順番にクリック

fixed-search-box-07

 

ここで表示されるのが、小テーマのスタイルシート(style.css)になります。

fixed-search-box-08

 

先ほどの調査の画面を思い出していただきたいのですが、<input id="searchsubmit" type="image">検索ボックスと上下の要素の間に余白を作りたいので、CSSを追記するのは<div id=”search”>に対してになります。

fixed-search-box-09

 

一番下に下記のように記載を追加しましょう。

 

『ファイルを更新』をクリック

fixed-search-box-10

 

Google Page Speed Insightで再度チェックすると『タップ ターゲットのサイズを適切に調整する』が消えているのが確認できました。

fixed-search-box-11

 

 

TSUNJI(@tsunji1983)的まとめ

これで、『タップ ターゲットのサイズを適切に調整する』のエラーは解決することができました。

ついでに、子テーマでCSSを追記する方法についても練習できて一石二鳥でしたね。

 

次回の第07回では、『コンテンツのサイズを表示域に合わせる』のエラーの修正に挑戦してみましょう。

今度はCSSだけでなく、テーマファイルについても修正の必要が有りますのでお楽しみに!

 

書いている内容で分かりにくいところや、もっと知りたいところなどあれば、お気軽にお問い合わせやTwitter(@tsunji1983)へご連絡ください。

 

Stinger5-Cheetahカスタマイズ速習 目次

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし!

基礎編 第03回 管理画面でデザインを変更しよう

基礎編 第04回 ナビゲーションやフッターを設定しよう

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する ←今ここ

基礎編 第07回 コンテンツのサイズを表示域に合わせる