ガジェット検索フォームで検索結果件数を確実に反映させる方法（Navbar版も紹介）

イントロダクション

BloggerのNavbarにある検索ボックスは便利ですが、Blogger独自の仕様のため、検索結果の表示件数の指定やデザインのカスタマイズが思い通りにできない場合があります。

この記事では、ガジェットの検索フォームで検索結果表示が指定件数表示されない場合の解決方法をご紹介しています。

• ガジェットの検索フォームを変更する方法
• Navbar検索ボックスを疑似的にHTML/JavaScriptガジェットで再現しつつ、検索結果の表示件数を確実に設定する方法

を紹介します。

現状の問題点

Bloggerでの検索には、以下の制約があります。

• ガジェットの検索フォームではデフォルトだと検索結果の表示件数は約20件（Blogger仕様）。
• ガジェットの検索フォームに <input class='search-action flat-button' expr:value='data:messages.search.escaped' type='submit'/> を追加しても、件数に反映されない。

ガジェット版

まずガジェット版の検索フォームを使った方法が簡単です。こちらを試してみて想定通りの動作でなかった場合にNavバーの検索フォーム移植を検討してみてください。

CSSやJavaScriptでフォーム送信時に件数パラメータを追加

• フォームの action は /search やブログURLのままでもOK
• 検索実行時に ?max-results=30 のようなクエリパラメータを JS で追加する
• 例：
  

  
    <script>
    document.addEventListener('DOMContentLoaded', function(){
      var form = document.getElementById('searchthis_gadget');
      form.addEventListener('submit', function(e){
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'max-results';
        input.value = '30'; // 希望の件数
        form.appendChild(input);
      });
    });
    </script>
      

• メリット：既存のフォームをほとんど触らずに件数を指定できる
• 注意点：Bloggerの仕様変更で動作が変わる可能性がある

Navバー移植版

1.HTML/JavaScriptガジェットで検索ボックスを作成

変更するのは下記のガジェット検索フォームです。もし検索フォームがない場合には先にガジェットから検索フォームを追加してください。

  <form class='gsc-search-box' expr:action='data:blog.searchUrl'>
    <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
    <table class='gsc-search-box'>
      <tr>
        <td class='gsc-input'>
          <input ... name='q' ... />
        </td>
        <td class='gsc-search-button'>
          <input ... type='submit'/>
        </td>
      </tr>
    </table>
  </form>
  

現在表示しているブログを検索する場合

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

特定ブログを検索する場合

  <form id="searchthis_gadget" action="http://あなたのURL.blogspot.com/search" method="get">
    <input type="text" name="q" style="width: 120px" title="検索" />
    <a onclick="document.getElementById('searchthis_gadget').submit();" 
       title="このブログを検索" style="cursor: pointer;">検索！</a>
  </form>
  

※「あなたのURL」は検索対象のブログURLに置き換えてください。

2. Navbar検索フォームを活用して件数を指定する

Blogger公式の方法を使うと、検索結果表示件数を確実に指定できます。

• まず、ガジェットの検索フォームをBloggerのNavbar検索フォームのHTMLに置き換えます。
• 次に、検索ボタンの直前に以下を追加します。

  <form id="searchthis_gadget" action="http://あなたのURL.blogspot.com/search" method="get">
    <input type="text" name="q" style="width: 120px" title="検索" />
    <a onclick="document.getElementById('searchthis_gadget').submit();" 
       title="このブログを検索" style="cursor: pointer;">検索！</a>
  </form>
  

  <input class='search-action flat-button' expr:value='data:messages.search.escaped' type='submit'/>
  

これにより、検索結果ページで「件数」を明示的に指定できます。設定した件数が検索結果に反映されます。

3. 検索フォームの配置と調整

• 「保存」をクリックしてガジェットを配置。
• レイアウト画面で「配置を保存」。
• ブログ画面で検索ボックスを確認。
• キーワードを入力して検索を実行すると、Navbar検索と同じ結果ページが表示され、指定件数通りに結果が出ます。

4. Navバー版まとめ

• Navbar検索ボックスを疑似的に再現するガジェットを作成可能。
• <data:messages .search.escaped=""> </data:messages> を活用することで検索結果の件数も確実に制御できる。
• これにより、Navbarを非表示にしても、ブログ訪問者へ安定した検索機能を提供できる。

まつさん
実はまつさんもこのBlogger独自の挙動で悩まされました。

補足ポイント

• 検索対象ブログが固定の場合は action="http://対象ブログ/search" を使用。
• JavaScriptを使った onclick はシンプルで、Enterキーでも動作可能。