Blogger:コード解説：検索ページに検索ボックスを表示(display:none方式)

イントロダクション

「Blogger:検索ページにのみ検索ボックスを表示(display:none方式)」で使用したソースコードについて、解説します。

コード解説

<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>
Blogger で検索を行うための検索ボックスを表示するためのコードです。

なお、検索ボックスの HTML については、詳細を以下のページに記載してあります。

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

検索ページ以外では非表示とするため、form タグのスタイルに display:none; を付与しています。

これで、通常はこの from タグで囲まれた部分は表示されません。


<script type="text/javascript">
<!--
    (function () {
        // 検索ページの場合には、検索ボックスを表示する
        if (location.pathname == "/search") {
            document.getElementById("searchthis_searchpageonly").style.display = "inline-block";
        }
    })();
//-->
</script>
検索ページでのみ、検索ボックスを表示するための JavaScript コードです。

検索ページは、URL のパスが "/search" になるので、その場合には、上に記載した 検索用 form が表示されるように、form タグのスタイルを display:none; から display:inline-block; へ変更しています。

これで、検索ページでは検索用 form が見えるようになります。

まとめ

このような仕組みで、検索ページのみ、検索用 form を表示させています。

なお、id 属性を使っている都合上、同じページ内にこの検索ボックスを 2 つ以上配置する場合には、コードの "searchthis_searchpageonly" の部分を別の名前に書き換えて、それぞれの検索ボックスで値が重複しないようにする必要があります。（同じページ内での id 属性の重複は許されません。）
（from タグの id と、a タグの onclick イベント内の JavaScript コード、script タグの JavaScript コード内の 計 3 箇所を別の名前に書き換える必要があります。）

関連情報

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