［簡易軽便］スマホ表示用はてなブログへサイト内検索ボックスを追加する

スマホで表示されたはてなブログで、サイト内を検索する方法はあります。ただし、サイドバーに設置されるため、下方までかなりスクロールしないとボックスは表示されません。 PC表示であればその問題はありません。

もっと上の方に設置できないのか。ここでは、筆者のここのサイトにあるように、ヘッダー部分へ表示させる方法を示します。スマホ用のヘッダーにHTMLを設置するためには、有料「PRO版」が必要なようです。でも、記事本文に上に設置できるようなので、思っているのとは違うようです。

サイト内検索用スクリプトを作成する

参考となったサイトは下記にあります。

設置するソースコード *1

設置するスクリプトは下記にあります。下記コードの「ブログのURL」の部分を、検索したいサイトのURLに書き換えます*2。

<div class="hatena-module search-box">
 <div class="hatena-module-body">
  <form class="search-form" name="search" role="search" action="「ブログのURL」/search" method="get">
   <input type="text" name="q" class="search-module-input" value="" placeholder="ブログ内検索" required>
   <input type="submit" value="検索" class="search-module-button" />
  </form>
 </div>
</div>