ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

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

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

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

f:id:katamichinijikan:20181031165713p:plain

 

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

<!-- 検索ボックスここから -->
<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は、検索ボックスが他の要素の裏に隠れてしまう場合には更に大きな数字にしてください。逆に検索ボックスが前に出過ぎるのであれば適切に調整してください。

当サイトは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。