KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

Cocoonで検索ウィジェットの窓(高さ)と虫眼鏡アイコンを調整する方法

この記事は約1分で読めます。
記事内に広告が含まれています。

Cocoon×スキン「モノクロ」の組合せでPageSpeed Insightsをしてみたところ「タップターゲットのサイズが適切ではない」と怒られました。
検索窓が細すぎて、虫眼鏡アイコンが小さすぎるみたいです。

ユーザー補助の項目なのでSEOに影響はないと思うのですが。
手間のかかることでもないので対処してみました。

スポンサーリンク

検索ウィジェットを調整するCSS

次の値を調整します。

.search-edit {
padding: 15px !important;
}

.search-submit {
font-size: 24px !important;
}

上が虫眼鏡アイコン、下が検索窓の高さです。
数字は私の設定ですが、現在はPSIから怒られていません。
「タップ ターゲットのサイズと間隔は十分な大きさです。」となり3点上がりました。

スポンサーリンク

まとめ

検索窓の高さは最低24pxあれば大丈夫と思います
あとは好みで調整してください

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
Cocoon

This website stores cookies on your computer. These cookies are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to to opt-out of any future tracking, a cookie will be setup in your browser to remember this choice for one year.

Accept or Deny

タイトルとURLをコピーしました