アメブロのブログ内検索を見た目はそのままでグーグル検索へ変更

以前にアメブロの記事下【フッター】に記事編集ボタン設置の記事の中でも書きましたが、過去記事を編集する時によくアメブロのブログパーツ【ブログ内検索】を使用します。

しかし何人もの人が書いていますが、アメブロ純正のブログ内検索は精度がいまいち。と言うより、どうも一定期間より前の記事については検索対象から外しているようです。

おかげで普通に検索エンジンで探せば出てくる記事が、何故かブログ内検索では存在しない事になっているという現象が結構起こります。

これでは正直使い物になりません。

ブログ内検索の機能を改善するというような事が以前に発表されていましたが、現状何も変わっていないに近い状態のようです。

とはいえ、過去記事を探しづらいのはなかなか困ったもの。
（site:コマンドでドメイン内検索すれば済む話ですが、それはちょっと置いておきます。）

そこで利用されているのが、Googleのカスタム検索窓をブログ内に設置するという方法。検索してみると色んな方が導入されているようです。

ただ、このやり方ではいかにも【Google検索】といった見た目になってしまい、どうも検索窓だけ浮いた感じになってしまいます。
デザインも弄れるようですが、なかなか面倒です。


そこで

「見た目はアメブロ純正の検索窓だけど中身はグーグル検索」

といった風に出来ないものかと思い調べてみました。


発見したのがこちらの記事。

アメーバブログの歩き方
Googleカスタム検索 or アメブロ検索 ?

早速使わせていただきました。

導入にはGoogleカスタム検索の【検索エンジンID】が必要なので、前提としてGoogleのアカウントを取得しておかなければなりません。

Googleカスタム検索のコードを取得すれば、自動的に検索エンジンIDも手に入ります。Google検索のコード取得までの手順は、こちらの方やこちらの方の記事に詳しく載っています。


今回のやり方では、出来上がった検索エンジンコードそのものは使用しません。
コード取得まで進めば、【コントロールパネル】→【基本】→【検索エンジンID】を探します。

こんなやつ

（取得した検索エンジンのコードの中にも含まれているので、そちらで判別がつくようであればここを見なくてもいいです。）

この【検索エンジンID】を上記アメーバブログの歩き方さんのブログにあるコードの中に埋め込みます。

ちょっと説明の為に該当記事より引用させてもらいます。

<div id="search" class="mainMenu"> 
<h4 class="menu_title">Search</h4> 
<form action="http://www.google.com/cse"><div><input type="hidden" name="cx" value="Googleから付与されたID" /> 
<input type="hidden" name="ie" value="UTF-8" /><input type="text" name="q" class="searchbox" /><input type="submit" name="sa" value="検索" class="searchbtn" /> 
</div> 
</form> 
</div>

赤文字部分に自分の【検索エンジンID】を差し込みます。
あとは出来上がったコードをフリープラグインかフリースペースに放り込めば、純正ブログパーツと同じ見た目の【ブログ内検索（中身はGoogle）】が出来上がりです。


ただこの場合、当然ですが【ブログ内検索】単独で配置場所を変える事が出来ません。
フリープラグインやフリースペースごと位置を動かさなければダメ（もしくはそれぞれのスペース内で）。

純粋に、現在あるアメブロ純正のブログ内検索の中身を入れ替えたい場合には、こんな方法もあるようです。

こちらのやり方なら、ブログパーツとして【ブログ内検索】単体で配置場所を変える事が可能となりますが、フリープラグインに記述する文字数は比較して多め。

このあたりどれを選ぶかは状況と好みでいいのではないでしょうか。
どちらにしても、こういったコードをあっさり作成できる人を本当に尊敬します。

・アメブロカスタマイズ目次