Plain

テーマ「Plain」の見本ブログです。

検索ボックスのスタイル

<8/9追記:はてなデフォルト風の検索ボックスを用意しました。>

このテーマはなるべくプレーン(余計なスタイリングをしていない)というコンセプトのため、デフォルトでは検索ボックスは最小限のスタイルに留めています。

そのためにこんな見た目になっていますね↓

f:id:simonsnote:20170731105036p:plain

「検索」という文字が表示されていますが、ここはどっちかというと虫めがねアイコンの方がいいですよね。こんなかんじ↓

f:id:simonsnote:20170731105629p:plain


なんでこうなるかというと、元々はてなブログで用意されている検索モジュールのボタンには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="&#xf01a" class="search-module-button" style="font-family:blogicon;width:1em;">
</form>

こういうかんじで↓
f:id:simonsnote:20170801204904p:plain:w400

これで上の写真のような検索ボックスになったと思います。
うまくいかなければこのページにコメントでお知らせください。

8/9追記:はてなデフォルト風の検索ボックスを用意しました。

f:id:simonsnote:20170809132639p:plain
こちらをサイドバーの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="&#xf01a" 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>