 はてなブログの検索窓をタイトル下に置く

f:id:tomi_kun:20190420105137j:plain
2009年の「はてなダイアリー」の頃から現在の「はてなブログ」に至るまで10年間(5年間休止)で合計915件の記事を書いてきたようです。(2019/04/20現在)

当然書いている本人も10年の歳を重ねてきてしまった訳です。

記憶力もだんだん衰え、昨日書いた記事も忘れてしまう事もあります。(汗)

ですから以前書いた記事をまた書いてしまうという恐れもあるわけです。(汗)

そこで新たに記事を書く前に一応過去の記事を振り返ってみるのですが思い出せるわけがありません。これまで自分のブログを検索などした事もありませんし、検索が出来る事も知りませんでした。はっきり言って必要ありませんでした。しかし、本人はともかく読んでくださる方に嫌な思いをさせてしまうのも本意ではありませんので極力検索をして確かめてから投稿したいと思います。

はてなブログ」の検索窓はMac版・iPad版共に記事の遥か最下段にあるんですね。iPhoneのブラウザはもちろんアプリ版も同様です。これでは使い難いのでタイトルのすぐ下に置いてみました。

f:id:tomi_kun:20190420103201j:plain

検索窓の設置(Mac

1.はてなブログ(管理画面)を開く

2.管理画面の「デザイン」をクリックします

3.左上の「スパナ」をクリックして「ヘッダ」を選びます

4.ヘッダのメニューの「タイトル下」で以下のように書きます

<!-- 検索窓ここから -->
<div class="hatena-module hatena-module-search-box">
<div id="original-search-box" class="hatena-module-body">
<form class="search-form" 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>
<!-- 検索窓ここまで -->

f:id:tomi_kun:20190420103227j:plain

5.またデザインCSSにも以下の様に書きます

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

f:id:tomi_kun:20190420103253j:plain

※ top:8px; right:10px;で位置を決めます。因みにここのブログはtopが40です。

これでプレビューして良ければ終了です。

f:id:tomi_kun:20190420103317j:plain

See you tomorrow!

follow us in feedly