読者です 読者をやめる 読者になる 読者になる

文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

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

はてなブログ アフィリエイト

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

これは管理画面のデザインから、サイドバーのモジュール追加で行えます。
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キー押下でも検索できます。

最終的な表示

f:id:treeapps:20140503005609p:plain

ただし前述書いた通り、ヘッダーとサイドバーの2箇所にブログ内検索があると上手く動かないので注意して下さい。

雑感


サイドバーにadsenseを置くスペースが広がったので、300x600のスカイスクレイパー(大)が貼りやすくなりますね!これで儲け放題です!!


この前adsense儲かってないっていってたじゃねーか・・・

GoogleAdSense グーグルアドセンスで<本気で稼ぐ>コレだけ!技 (得するコレだけ!技)

GoogleAdSense グーグルアドセンスで<本気で稼ぐ>コレだけ!技 (得するコレだけ!技)

ブログ飯 個性を収入に変える生き方

ブログ飯 個性を収入に変える生き方

必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア

必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア"の極意