はてなブログで文字で記事を検索する自作の窓を作るのでR

はてなブログではdefaultで、記事を検索する機能があるのでR。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「サイドバー」で、モジュール追加の検索を設置すればよいのでR。

ただし、

その他の検索窓、例えば、ここの記事で示したような「はてなIDではてなブログを検索する窓」とのデザインを統一するためには、自ら文字で記事を検索する自作の窓を作らないといけないのでR。

そこで、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「サイドバー」の、HTMLのモジュール追加によって検索窓を作ってみるのでR。

コードを見ると、

<div class="hatena-module-body">
<form class="search-form" role="search" action="http://自分のはてなブログの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>

のような感じで出来ているのでR。

そこで、これをHTMLのモジュールに挿入し、サイドバーに設置すると、

検索の自作の窓ができたのでR。

さらに、虫めがねのアイコンにしたい時は、

「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」に、font-awesomeのcssである

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

のようなものが追加されているかを確認して、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインcss」に

input[type="submit"] {
font-family: FontAwesome;
}

を追加して、

さっきのHTMLの内容の

<input type="submit" value="検索" class="search-module-button">

のvalueの部分を

<input type="submit" value="&#xf002;" class="search-module-button">

にすれば、虫めがねがでるのでR。valueの値は、font-awesomeのcssから虫めがねとして挿入されているのでR。

ここが参考になったのでR。

広告



（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─