Firefox 検索バーに履歴表示ボタンをつける。

検索バーの履歴表示

Firefox 検索バーの履歴表示は、検索バーが空白の状態のときに。

• キーボードショートカットなら、Ctrl+kで検索バーにフォーカスを移してから↓の押下。
• マウス操作なら、検索バーの入力フィールドをクリック、↓の押下。

で検索履歴が表示されます。

これは 前の記事 で書きました。でもマウス操作のとき、クリック後に「下カーソルキー」を押すのはちょっと不便です。そこで検索バーの履歴ボタンを、ロケーションバーの履歴ボタンと同じデザインで追加してみました。　これでマウス操作だけでも、検索履歴の表示が出来るようにになります。

虫眼鏡アイコンの右隣のボタンが検索履歴の表示ボタンです。ボタンのデザインをロケーションバーのドロップマーカーと同じにしました。

方法

この履歴ボタンを検索バーに追加する方法は、Firefox の userChrome.css ファイルに、下のユーザースタイルを追加します。　このファイルは、ユーザプロファイルディレクトリ直下の chrome サブディレクトリに置きます。

WindowsXPの場合 userChrome.css の場所はここになっています

C:\Documents and Settings\｛ユーザー名｝\Application Data\Mozilla\Firefox\Profiles｛英数字の羅列｝.default\chrome\

Windows7の場合 userChrome.css の場所はここになっています。

C:\Users\｛ユーザー名｝\AppData\Roaming\Mozilla\Firefox\Profiles\｛英数字の羅列｝.default\chrome\

このフォルダには、サンプルファイル userChrome-example.css があるので、これを元にして追加記入後に、ファイル名を userChrome.css に変えて保存するのが確実かもしれません。　文字コードは UTF-8 で保存します。

履歴ボタンを検索バーに追加するユーザースタイル

	/*検索履歴ボタン*/
	/* Reference from chrome://browser/skin/browser.css ,at Location bar dropmarker */
	#searchbar .autocomplete-history-dropmarker {
	-moz-binding: url("chrome://global/content/bindings/autocomplete.xml#history-dropmarker");
	display: -moz-box !important;
	-moz-appearance: none !important;
	padding: 0 3px !important;
	background-color: transparent !important;
	border: none !important;
	width: auto !important;
	list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png")!important;
	-moz-image-region: rect(0px, 11px, 14px, 0px) !important;
	}
	#searchbar .autocomplete-history-dropmarker:hover {
	background-image: -moz-radial-gradient(center, circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0)) !important;
	-moz-image-region: rect(0px, 22px, 14px, 11px) !important;
	}
	#searchbar .autocomplete-history-dropmarker:active,
	#searchbar .autocomplete-history-dropmarker[open="true"] {
	background-image: -moz-radial-gradient(center, circle closest-side, hsla(205,100%,70%,.1), hsla(205,100%,70%,0)) !important;
	-moz-image-region: rect(0px, 33px, 14px, 22px) !important;
	}

view raw userChrome.css hosted with ❤ by GitHub

次項の「Stylish」アドオンを使うと、もっと簡単に設定できます。

「Stylish」で設定する場合。

「Stylish」
https://addons.mozilla.org/ja/firefox/addon/stylish/

このアドオンはユーザースタイルを管理するアドオンで、ユーザースタイルを使うときにとても便利です。

履歴表示ボタンの設定手順。

1. アドオンをインストール後に、Firefox の「アドオンマネージャ」を開きます。
2. 「新しいスタイルを書く」のボタンを押すと、「新しいスタイル」の編集ダイアログが表示されます。
3. 「名前」欄には設定するスタイル名を入力します。　「履歴表示ボタン」等の任意の名前で OK です。
4. 中央の編集ウインドウに、上記のコードをコピーして貼り付けます。
5. 「保存」ボタンを押して終了します。

これで履歴表示ボタンが表示されるようになります。