Vicuna CMS MT4にGoogle Custom Searchを導入してみた！

Google Web Elementsというコピー&ペーストで簡単にブログなどに貼り付けられるサービスが発表されたので、Vicuna Movable Typeテンプレート にCustom Search Elementsを導入してみました！貼り付ける場所はサイドバーの最上段。使用しているスキンは「style-vega」です！

MT4への導入方法は3ステップ...

1. Custom Search Elementsからコードをコピペ
2. MT4のウィジェットを作成後、サイドバーに組み込む
3. core.cssを修正後、サーバーへアップロード

Google Custom Search Elementsからコードをコピぺ

Google Web Elementsのページから、Custom Searchのリンクをクリック！

"Configure"のドロップダウンメニューから"Automatically search my site"を選んで、書き出されたコードをコピーします！

MT4のウィジェットを作る

Movable Typeにログインして、"デザイン"のドロップダウンメニューから"ウィジェット"を選択。

"ウィジェットテンプレートを作成"をクリックして、ウィジェットを作成します。

ウィジェットの名前を入力して、先ほどコピーしたGoogle Custom Searchのコードをペーストします。ペーストすると、<div id="cse" width="100%">とありますが、width="100%"は削除します。
また、<div class="search">を追加します。

上記のコード

<!-- Google Custom Search Element -->
<dt>Search</dt>
<div class="search">
<div id="cse">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1');
  google.setOnLoadCallback(function(){
new google.search.CustomSearchControl().draw('cse');
  }, true);
</script>
</div>

ウィジェットの作成が済んだら、保存します！

ウィジェットをサイドバーに組み込む

デザインメニューのドロップダウンから、"ウィジェット"を選択して、"サイドバー(ナビゲーション)"をクリックします！

先ほど作成した"Google Custom Search"ウィジェットを"利用可能エリア"から"インストール済み"エリアにドラッグ＆ドロップして、保存します。

保存したら、再構築します！これでMovable Typeの設定は終わりです。

core.cssを修正して、サーバーへアップロード

次にCSSを修正します。
（当ブログだと余計な枠線などがついていたのでスタイルシートを修正しました。スタイルシートの修正は、適宜行うとよいでしょう！

Movable Type本体のディレクトリ→mt-static→themes→style-vega→core.cssをダウンロードしてエディタで開き、コードを追加します！

コードはこれ

/*--Google Custom Search Element--*/

div#utilities div.search {

  margin-left:1px;

  margin-right:2px;

  }

div#utilities div.search td {

  border:0!important;

  background:none;

  }

サーバーに上書きアップロードで完了です。

サイドバーからサクッと検索！

サイドバー右上に上手く収まっています。まずまず。

キーワードを打ち込んで検索すると、ボックスが下に伸びて検索結果を表示してくれます。

今までだとヘッダーにコードを埋め込んで、表示したい場所にもコードを記述するなど、テンプレートのカスタマイズが面倒だったのですが、とても簡単に出来るようになったので良かったですね。
検索結果もサクッと表示されるところがすごいです。

過去記事の検索もMovable Typeの管理画面から探すより早いので、便利に使います！