太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログでGoogleカスタム検索をサイドバーの上に独立して配置する


はてなブログの検索機能をGoogleカスタム検索に置き換え

 このブログも過去ログが250エントリーを超えて、昔のエントリを探すのに苦労するようになりました。はてなブログの標準検索機能はAND検索に弱かったり、エントリ全体を表示しようとしてしまうので捗りません。

 そこでGoogleカスタム検索に置き換えようと思ったのですが、そのままだとデザインに違和感があります。もともと id:platism さんの『Mistilteinn - テーマ ストア - はてなブログ』をブログテーマに利用させて頂いているのですが、綺麗な検索フォームがサイドバーの上に独立して配置できるのが自分の好みでした。

Googleカスタム検索の配置とCSS適用

 なので、これと同じことをGoogleカスタム検索のフォームにも適用します。Googleカスタム検索のフォームには「cse-search-box」というidが振られているため、これに対してCSSを適用可能です。テーマ付属のCSSを基本的には流用させて頂きつつ、ついでに角丸にしたりもしました。

#cse-search-box {
    width: 300px !important;
	position: absolute;
	top: -50px;
    right: 0px;
}

#cse-search-box td {
	padding: 0 !important;
}

#cse-search-box input[type="text"] {
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 5px #DDDDDD;
	-moz-box-shadow: 0 0 5px #DDDDDD;
	-webkit-box-shadow: 0 0 5px #DDDDDD;
	width: 300px;
	height: 35px;
	padding: 0px 10px;
	font-size: 100%;
	border: solid 1px #ddd;
	vertical-align: middle;
	background: #efefef;
}

#cse-search-box input[type="text"]:focus {
	background: #fff;
}


#cse-search-box input[type="submit"] {
	display: inline-block;
	text-indent: -999px;
	width: 35px;
	height: 35px;
	border: none;
	vertical-align: bottom;
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 0.4;
	cursor: pointer;
	background: url(http://img.f.hatena.ne.jp/images/fotolife/p/platism/20130711/20130711002432.gif) no-repeat 50% 50%;
}

 一般的に、Googleカスタム検索を設置する場合にはサイドバーの「HTML」モジュールを独立して使用しますが、フォームだけをサイドバーの外に配置するので空の箱ができてしまいます。これを回避するため、他の「HTML」モジュールに相乗りさせます。私の場合は「最新記事」を表示させるスクリプトを動かしている「HTML」モジュールに相乗りさせています。


Googleカスタム検索のメリット

 Googleカスタム検索を利用すると以下のメリットがあります。

  • 強力な検索機能と高速表示
  • サジェスト機能が利用できる
  • 広告収入に繋がる

 やはりGoogleの機能を使っているので、はてなブログで検索するよりも強力で高速です。サムネイル表示ができるのも良いです。

 また検索ボックスの段階でサジェスト機能が利用できるようになります。既に独特の言い回しがインデックス化されてて携帯電話の連想変換を晒すような面白さがあります。例えば「あ」と入力すると「ありえた自分の死体」が出てきたり(゚д゚)!

f:id:bulldra:20131116095241p:plain

 また検索した結果画面に出てくる広告もアドセンスの対象になります。ちょっと広告が大きすぎるような気もしてアレではあるのですけれど。

 そんなわけで、はてなブログの検索機能に不満があったり、Googleカスタム検索に置き換えたいけどデザインが気に食わないといった場合には、この記事を参考にカスタマイズを検討してみたらいかがでしょうか。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

関連記事