【はてなブログ】サイドバー以外に検索ボックスを作る

はてなブログでサイドバー以外にオリジナルのブログ内検索ボックスを作成する方法を紹介します。

当ブログをPCで開いて右上を見て頂けると、検索ボックスがありスクロールしても固定で配置されていることがわかると思います。

まず始めに、検索ボックスのコードは以下の通りです。

<!-- 検索ボックスここから -->
<div class="hatena-module hatena-module-search-box">
  <div id="original-search-box" class="hatena-module-body">
    <form class="search-form" role="search" action="https://diy-kagu.hatenablog.com/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>
<!-- 検索ボックスここまで -->

赤く強調表示している 部分はなくても機能するのですが、既存の検索ボックスのデザインを維持したいのであればそのまま付けておくと良いでしょう。

私の場合、このコードをヘッダ＞タイトル下に追加しています。

後はこれを好きにスタイルを設定して、好みの場所に配置するだけです。私と同じように右上に固定するには以下のCSSをデザインCSSなどに追加します。 

#original-search-box{
  position:fixed;
  top:8px;
  right:10px;
  z-index:999 !important;
}
.hatena-module-search-box{
  height:0;
  padding:0;
  margin:0;
}

赤く示したtopとrightで位置を調整します。

z-indexは、検索ボックスが他の要素の裏に隠れてしまう場合には更に大きな数字にしてください。逆に検索ボックスが前に出過ぎるのであれば適切に調整してください。