日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年2月26日木曜日

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

イントロダクション

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

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

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

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


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

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


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

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

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


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

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 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






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...