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
タイトルとURLをコピーしました