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

by
Cocoon

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

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

天満川鈴 WRITTEN BY 天満川鈴

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

次の値を調整します。

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

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

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

まとめ

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

天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

X CodePen Amazon
RECOMMENDED INFRASTRUCTURE
ConoHa 公式サイトへ

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる