Blogger:検索ページにのみ検索ボックスを表示(display:none方式)

イントロダクション

Google のブログサービス「Blogger」では、 ブログの上部にある Navbar の検索ボックスを使うことで、ブログ内を検索することができます。

Blogger の Navbar
左側に検索ボックスが配置されている

検索を実行すると、検索結果が別のページ（検索ページ）に表示されます。
このとき、検索キーワードに関連するページが一覧表示されます。

Blogger : 検索ページ
検索したキーワードに関連する、投稿の一覧が表示される

さて、この検索ページを表示した後に、再度別のキーワードで検索をし直そうと思った場合には、再び Navbar の検索ボックスに検索キーワードを入力して、検索を行う必要があります。

しかし、通常 Navbar はページの最上部に位置するため、そこまで移動するのが面倒です。


検索ページの検索結果一覧の最後の部分に、検索ボックスがあったら便利だと思いませんか？

そこで、検索ページにのみ、検索ボックスを表示するHTML/JavaScriptガジェットを作成してみました。

検索ページにのみ、検索ボックスを表示するHTML/JavaScriptガジェット(display:none方式) 

Blogger の設定の、レイアウトにて、新しい HTML/JavaScript ガジェットを、「ブログの投稿」ガジェットの下部に作成します。

Bloggerの設定：レイアウト
新しい HTML/JavaScript ガジェットを追加

そして、以下のコードをコンテンツとして追加します。

コンテンツとして追加するコード：

<form id="searchthis_searchpageonly" action="/search" method="get" style="display:none;">
<input type="text" name="q" style="width: 300px" title="検索" />
<a onclick="document.getElementById('searchthis_searchpageonly').submit();" title="このブログを検索" style="cursor: pointer;">検索！</a>
</form>

<script type="text/javascript">
<!--
    (function () {

        // 検索ページの場合には、検索ボックスを表示する
        if (location.pathname == "/search") {
            document.getElementById("searchthis_searchpageonly").style.display = "inline-block";
        }
    })();

//-->
</script>

Blogger HTML/JavaScript の設定
コンテンツにコードを追加

そして、「保存」ボタンを押して、保存します。
その後、レイアウトにて「配置を保存」ボタンを押して、配置を保存します。

結果

このコードを適用すると、検索ページにのみ検索ボックスを表示することができます。

検索ページに表示された検索ボックス（左下）

トップページや、投稿ページなどには、今回追加した検索ボックスは表示されません。


この検索ボックスに検索キーワードを入力して、エンターキーを押すか、「検索！」をクリックすれば、検索を実行することができます。

コード解説

コード解説については、長くなるため別途次のページで解説します。

Blogger:コード解説：検索ページに検索ボックスを表示(display:none方式)
http://upa-pc.blogspot.com/2015/02/blogger-search-box-in-search-page-explain.html

まとめ

以上の設定を行うことで、検索ページにのみ検索ボックスを表示させることが出来ました。


なお、すべてのページに検索ボックスを表示したい場合には、以下のページのコードを利用します。

Blogger:Navbarの検索ボックスを、疑似的に再現したHTMLガジェットを作成 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/blogger-navbar-search-box-same-gadget.html

関連情報

Blogger:Navbarの検索ボックスを、疑似的に再現したHTMLガジェットを作成 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/blogger-navbar-search-box-same-gadget.html

Navbarをオフにしました - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/navbar-off.html

Blogger:Navbarをオフにする上で検討したいこと-その機能は必要か？代替可能か？ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/blogger-navbar-off-consideration.html

Blogger:Navbarの検索ボックスはいかにして検索動作を実現しているのか？ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/blogger-navbar-search-box-mechanism.html

Blogger:Navbarの負荷を考える-ページの読み込み時にどの程度影響を与えているか - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/blogger-navbar-on-off-diff.html

効率的ブログ執筆術：過去の記事は検索で探そう！ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/01/blog-search-old-post.html

BloggerのURL構成：ブログ内の構造>検索ページ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-url-search.html

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-url-summary.html