検索ボックスのスタイル
<8/9追記:はてなデフォルト風の検索ボックスを用意しました。>
このテーマはなるべくプレーン(余計なスタイリングをしていない)というコンセプトのため、デフォルトでは検索ボックスは最小限のスタイルに留めています。
そのためにこんな見た目になっていますね↓
「検索」という文字が表示されていますが、ここはどっちかというと虫めがねアイコンの方がいいですよね。こんなかんじ↓
なんでこうなるかというと、元々はてなブログで用意されている検索モジュールのボタンにはvalue="検索"と入ってしまっているのです。CSSで虫めがねアイコンに置き換えることもできるし、実際はてな公式のテーマではわりと力技でここを虫めがねアイコンに置き換えている(なんとbackground-imageとして表示している)のですが、これはスマートじゃない。プレーンじゃありません。
ということで、別のソリューションを用意しました。
サイドバーの元々の検索モジュールは消してしまって、新しく
モジュールを追加 → HTML
にこのコードを貼ってください。
<form class="search-form" role="search" action="/search" method="get"> <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required=""> <input type="submit" value="" class="search-module-button" style="font-family:blogicon;width:1em;"> </form>
こういうかんじで↓
これで上の写真のような検索ボックスになったと思います。
うまくいかなければこのページにコメントでお知らせください。
8/9追記:はてなデフォルト風の検索ボックスを用意しました。
こちらをサイドバーのHTMLに貼ってください。
<form class="search-form" role="search" action="/search" method="get" style="padding:0 0.3em;border-radius:3px;"> <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required=""> <input type="submit" value="" class="search-module-button" style="font-family:blogicon;transform:rotateY(180deg);font-size: 120%;width: 1em;"> </form> <style> form.search-form input.search-module-button{color:#888} form.search-form input.search-module-button:hover {color:#505050}; </style>