ページ内検索のハイライト背景色を変更して見やすく

Stylus拡張機能でCtrl+Fのヒット色を自由にカスタマイズ

ブラウジング中に Ctrl+F（Command+F） でページ内検索をする機会は多いと思います。特に記事の校正作業で「不要な半角スペースが混入していないか」をチェックする際、ブラウザのデフォルトのイエロー背景ではヒット箇所が非常に見つけづらく感じることがあります。「どこがハイライトされているのか分からない」という状況を解消するため、ハイライト色をもっと目立つ色に変更する方法を調べた結果、Chrome拡張機能「Stylus」を使う方法で期待通りの結果が得られました。本記事ではその設定手順を初心者にも分かりやすく解説します。

デフォルトのイエローが見づらい理由

ブラウザのページ内検索（Ctrl+F）でヒットした箇所は、多くのブラウザでデフォルトのイエロー（黄色）背景でハイライトされます。白背景のページでは比較的目立ちますが、以下のような場面では視認性が著しく低下します。

記事校正時に半角スペースをキーワードとして検索する場合（スペース文字はそもそも視認しにくい）
背景色が淡いページやダークモードのページ
長い記事で複数箇所ヒットしており、現在フォーカスがどこにあるか分からない場合

これらの問題を解決するのが、CSSを使ったハイライト色のカスタマイズです。ブラウザの検索ハイライトは ::search-text という疑似要素でスタイルを上書きできます。

導入ツール：Stylus（スタイラス）とは

Stylusは、Webページに独自のCSSスタイルを適用できるブラウザ拡張機能です。特定サイトのデザインを変更したり、今回のようにブラウザ全体の動作に関わるCSSを注入したりすることができます。オープンソースで開発されており、無料で利用可能です。

Stylusは以下のブラウザで利用できます。

対応ブラウザ（Chrome拡張が使えるブラウザ）

ブラウザ	動作確認	備考
Google Chrome	✓ 確認済	Chromeウェブストアから導入
Vivaldi	✓ 確認済	Chrome拡張機能に対応
Microsoft Edge	✓ 確認済	Chromeウェブストアから導入可
Safari	— 未確認	Chrome拡張非対応のため未使用
Firefox	— 未確認	Firefox版Stylusあり・動作は未検証

Stylusのインストール方法

Chromeウェブストアから無料でインストールできます。以下のリンクから拡張機能ページにアクセスしてください。

Stylus — Chrome ウェブストア

https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

上記リンクを開き、「Chromeに追加」ボタンをクリックします。
確認ダイアログが表示されたら「拡張機能を追加」をクリックします。
ブラウザのツールバーに 「S」マークのStylusアイコンが追加されれば導入完了です。

ハイライト色の設定手順

インストール後、以下の手順でページ内検索のハイライト色を変更するスタイルを登録します。

① Stylusのスタイルエディタを開く

ツールバーのStylusアイコンをクリックするとポップアップが開きます。左下の「管理」ボタンをクリックしてください。

▲ Stylusポップアップ。「管理」ボタンから設定画面へ進む

② 新しいスタイルを作成する

管理画面（スタイルマネージャー）が開いたら、画面上部ツールバーの 「＋」ボタン（スタイルを新規作成） をクリックします。スタイルエディタが開くので、任意の名前（例：pink_highlight）を入力してください。

Stylusスタイルマネージャー画面。上部ツールバーの＋ボタンでスタイルを新規作成できる

▲ スタイルマネージャー。「＋」ボタンまたはツールチップ「スタイルを新規作成」から新規作成

③ CSSコードを貼り付ける

エディタ内に以下のCSSコードをそのまま貼り付けます。このコードはすべてのWebページに適用されます。

CSS — ハイライト色変更コード

/* Ctrl+Fでヒットしたすべての箇所の背景をピンクに */
::search-text {
background-color: #ff00ff !important;
color: #ffffff !important;
}

/* 現在フォーカスが当たっている箇所の背景を濃いピンクに */
::search-text:current {
background-color: #ff1493 !important; /* ディープピンク */
color: #ffffff !important;
}

コードのポイント

::search-text — ヒットしたすべての箇所に適用される疑似要素
::search-text:current — 現在フォーカス中（アクティブ）の1件に適用
!important — ブラウザのデフォルトスタイルを強制上書き

④ 保存して完了

コードを貼り付けたら「保存」ボタンをクリックします。スタイルが有効になった状態で任意のページを開き、Ctrl+F（Command+F）でキーワードを入力するとハイライト色が変わっていることを確認できます。

実際の表示結果

以下のスクリーンショットは、実際にStylusを適用した状態でCtrl+Fを使用したものです。デフォルトのイエローと比べて、ピンク色のハイライトは非常に視認性が高くなっています。

▲ ピンクのハイライトが適用された状態。半角スペースのような見えにくい文字も一目で確認できる

まとめ

Stylusを使えば、ブラウザのページ内検索ハイライト色をわずか数行のCSSで自由に変更できます。特に記事校正や長文チェックの場面では、デフォルトのイエローから鮮やかなピンクやパープルに変えるだけで作業効率が大幅に向上します。インストールも設定も5分以内で完了するので、ぜひ試してみてください。

動作確認環境・注意事項

本記事の設定は Chrome・Vivaldi・Edge で動作を確認しています。
Safari・Firefox は筆者未使用のため動作未確認です（Firefox版Stylusは別途存在します）。
::search-text 疑似要素はChromiumベースのブラウザで対応しています。ブラウザのバージョンによっては動作しない場合があります。
Stylusは無料のオープンソース拡張機能です。Chromeウェブストアのページから最新版を確認してください。

カラー名	カラーコード	特徴
ピンク	#FF6EB4	明るく視認性が高い。白文字との相性◎
パープル	#BF5FFF	落ち着いた存在感。白文字との相性◎
ブルー	#5FD3FF	クールな印象。暗い文字色との相性◎
オレンジ	#FFAA00	イエローより鮮やか。デフォルト代替に最適