はてなブログのブログ内検索をヘッダーに移動する小技を紹介

結構簡単にできちゃいますよ〜

f:id:treeapps:20170104180018p:plain

はてなブログには、自分のブログ内だけを検索する機能があります。

これは管理画面のデザインから、サイドバーのモジュール追加で行えます。
f:id:treeapps:20140503004041p:plain
しかしこのブログ内検索、サイドバーにしか追加できないのです。

サイドバーは沢山項目が表示されがちになるので、ブログ内検索を別の場所に表示したいなと思って、やってみたら簡単にできたので紹介します。

ブログ内検索をヘッダーに移動する手順

サイドバーから検索モジュールを削除する

サイドバーと別の場所2箇所にブログ内検索が表示されていると、うまく動作しませんでした。なので、サイドバーの方は削除してしまいましょう。復活させるのは簡単なのでサクッと削除します。

ヘッダのタイトル下htmlを修正する

管理画面　→　デザイン　→　カスタマイズ　→　ヘッダ　→　タイトル下
と巡ります。すると以下のように表示されます。
f:id:treeapps:20140503004527p:plain

タイトル下htmlを設定する

<div class="hatena-module-search-box">
<div class="hatena-module-body">
<form class="search-form" role="search" action="http://treeapps.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>

treeapps.hatenablog.comの部分を自分のブログドメインに変更して下さい。
これはサイドバーのブログ内検索のhtmlを抽出して、classからhatena-moduleを削除したものです。hatena-moduleにmargin-bottomが設定されているし、不要なので外しました。

これでヘッダーにブログ内検索ボタンが移動できます。

当ブログの場合はヘッダーhtmlをカスタマイズして沢山ボタンを表示して、更にブログ内検索を追加してみました。虫眼鏡ボタンでも検索できるし、Enterキー押下でも検索できます。