TypePad にサイト内検索ボックスを設置する方法として、Google Co-op を利用する方法があります。
Google Co-op は自分のサイトに合わせてデザインを設定したり、以下のように検索結果のページを自分のブログ内に設置するなど、柔軟なカスタマイズを行うことができます。
注意:検索結果は、Google にクロールされているものが表示されます。そのため、検索結果が表示されるかどうかは Google の仕様に依存されることを予めご了承ください。
実際に Google Co-op を利用したサイト内検索ボックスを、TypePad カスタム CSS ブログ に設置しています。(上級者テンプレートを利用しないため、全てのプランのお客様がご利用いただけます。)
Google Co-op を利用して TypePad カスタム CSS ブログ のように検索結果を自分のブログ内に表示するには、以下の手順で設置を行います。
Google Co-op 側の設定
※Google Co-op はBETA版のため、以下で用意している画像とは異なる画面となっている場合があります。
1 Google-Co-op にアクセス
Google Co-op にアクセスし、「Custom Search Engine」リンクをクリックします。
2 「Create a Custom Search Engine」 ボタンをクリック
「Create Search Engine」ボタンをクリックするとログイン画面が表示されますので、Google のアカウントをすでに取得されている場合はログインし、「Create a Custom Search Engine」ボタンをクリックしてください。
アカウントを取得していない場合は「Not using Gmail or other Google Account services? Create a Google Account」からアカウントを取得してください。
3 項目を入力
表示された「Create a Custom Search Engine」ページで各項目を入力します。
「Search engine name」は作成する検索ページの名前、「Search engine description」はその説明です。ブログ名など、わかりやすいものにすることをお勧めします。「Search engine language」はブラウザの言語設定を自動で判断してくれるので、「All languages」に設定することをお勧めします。
「What do you want to search?」は検索対象ページを選択します。設置するページ内でのみ検索を行うなら、「Only sites I select.」を選択します。
「Site to Search」は、対象となるブログのURLを入力します。
「Advertising status」項目では、検索結果のページにアドセンス広告を表示するかどうかを選択します。
利用規約に同意する(I have read and agree to the Terms of Service.)にチェックを入れ「Next」ボタンをクリックします。
4 Finishボタンをクリック
次に実際の検索結果を確認できる画面が表示されます。実際に検索ボックスを使用し、「Search」ボタンをクリックすることでブログの検索結果を確認することができます。
確認後、「Finish」ボタンを押してください。
5 「control panel」リンクをクリック
以下のページが表示されますので、「control panel」リンクをクリックします。
「control panel」リンクをクリックすると、ページの上部にメニューが表示されるので、「Code」リンクをクリックします。
6 表示形式を設定する
「Code」ページでは、検索ボックスだけを設置する(Search box code for your website)ものや、検索ボックスと結果を表示する(Search box and search results code for your website)ためのコードが用意されているので、必要に応じて選択します。
標準では、以下のように「Search box code for your website」が表示されています。
今回は、出力されるページも作成しますので、「Search box and search results code for your website」の先頭のマークをクリックして、コードを表示します。
コードを表示したら、まず、検索ボックスのスタイルを選択し、「Save Changes」ボタンをクリックします。
次に「http://ブログURL/search.html」と入力します。
例: http://css.typepad.jp/customcss/search.html
入力後、「Save Changes」ボタンをクリックします。
※このページを表示するためには「search.html」というファイルをブログフォルダ内にアップロードする必要がありますが、作成手順については、後ほど紹介します。
表示された検索ボックスと検索結果のコードは、TypePad で利用しますのでこのページは開いたままで、続いて TypePad 側での設定を行います。
TypePad 側の設定
1 ブログのサイドバーに検索ボックスを設置
「Paste this code in the page where you'd like your search box to appear.」で指定されたコードを、タイプリストのメモを利用してサイドバーに設置します。
1. 「ホーム」>「タイプリスト」のページから「メモ」タイプリストを作成する
2. 「管理」>「項目の一覧」>「備考」にソースを貼り付ける
3. 「公開」でサーチエンジンを設定したいブログに表示する
タイプリストのメモの利用方法について、詳しくは アフィリエイト広告やバナー画像の設置方法 を参照してください。
2 search.html ファイルの作成
検索ボックスを設置したいブログのトップページを表示し、HTML ソースをコピーします。
コピーした HTML ソースはテキストエディタ等に貼り付け、以下のように変更を行った HTML ファイルを作成します。
HTML ソースの以下の部分を修正し、「Place this code in the page you'd like your search results to appear.」で指定されたコードに置き換えます。
※例: 2 カラム、サイドバー右レイアウトの場合
※使用しているデザインによっては、「alpha」の値が「beta」や「gamma」となっています。
<div id="pagebody"> <div id="pagebody-inner" class="pkg"> <div id="beta"> <div id="beta-inner" class="pkg"> ここに指定されたコードを挿入します。 ※記事とサイドバー情報の HTML が表示されているので、それらを削除します。 </div> </div> </div> </div>
ソースの編集が終了したら、HTML ファイルとして保存します。ファイル名は、先ほど指定した search.html とします。
3 ファイルをアップロード
作成したファイルを、「ホーム」>「コントロールパネル」>「ファイル」ページの「ファイル・マネージャー」から、検索ボックスを設置するブログフォルダの直下に置きます。
以上の手順で設定、設置が完了となります。実際にブログの検索ボックスから検索を試してみてください。
注意:検索結果は Google の仕様に依存しますので、必ずしも最新の結果はでない場合があります。
- パスワード保護設定のブログではこの機能は使用できません。
- 「ブログ」>「設定」>「更新通知」で「ブログの更新通知」を「しない」に設定している場合は、ブログのソース内に検索ロボット拒否のタグが記述されますので、この機能は使用できません。