コピペで使える!はてなブログの検索ボックスデザインを20個紹介する

今回は検索ボックスのカスタマイズ集です。

検索ボックスひとつにどれだけこだわる人がいるのかはわかりませんが、私はこだわる派の人間です。

検索ボックスの機能をみんなが使っているかどうかは別として、あるならきれいに見せたいじゃないですか。だってほとんどの場合はトップページに置いてあるわけだし、、、、。

ちなみに検索ボックスのデザインに関しては、全てにおいてダサいはてなデフォルトのデザインも珍しくそんなに悪くないのですが、更に個性を出したい人はこの記事が参考になると思います。

言い過ぎました。

(「はてなブログ」大好きです。)

以下注意点です。

念のためにバックアップはとっておいてください。

またこの記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご理解ください。

PLAIN - テーマ ストア

検索ボックスのカスタマイズ方法

検索ボックスのカスタマイズは、デザイン設定のタイトル下の部分にコードを追加して行います。

f:id:oyomiyo:20180909220240p:plain

赤枠の部分に気に入ったデザインのコードをコピペしてください。

サイドバーのモジュール自体のデザインは、当サイトの物を引き継ごうと思います。

f:id:oyomiyo:20181021112302p:plain

じゃあ今日も、、、頑張りましょうかね。

シンプル系

シンプル系1

f:id:oyomiyo:20181021112302p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 1px solid #ddd; /*枠線スタイル*/
    background-color: none; /*背景色*/
    border-radius: 3px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

まずはデフォルトのデザインから。

超シンプルです。いかにもはてなサイト的なデザインでしょう。デフォルトのデザインがこれなので当たり前ではありますが結構見かけます。

シンプル系2

f:id:oyomiyo:20181021114608p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 2px solid #999; /*枠線スタイル*/
    background-color: none; /*背景色*/
    border-radius: 3px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

シンプル系3

f:id:oyomiyo:20181021122134p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 2px solid #bbb; /*枠線スタイル*/
    background-color: #fff; /*背景色*/
    border-radius: 0px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

枠の角を丸くしないタイプ

シンプル系4

f:id:oyomiyo:20181021123504p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: none; /*枠線スタイル*/
    background-color: #fff; /*背景色*/
    border-radius: 3px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

シンプル系5

f:id:oyomiyo:20181021123915p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 5px solid #ddd; /*枠線スタイル*/
    background-color: #fff; /*背景色*/
    border-radius: 3px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 7px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

ワイとおそろやで。

どーぞどーぞ、、、遠慮せず~。

可愛い系

可愛い系1

f:id:oyomiyo:20181021194651p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
  border: 3px solid #f69595; /*枠線スタイル*/
    background-color: #ffd7d7; /*背景色*/
    border-radius: 3px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

「ピンク使う」=「可愛い」

ってことなのか?

違うのか?????(残念ながら私は♂だ)

可愛い系2

f:id:oyomiyo:20181021195151p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 3px solid #f6ce95; /*枠線スタイル*/
    background-color: #fff; /*背景色*/
    border-radius: 7px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 7px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

オレンジって可愛いよな。

うんうん。

可愛い系3

f:id:oyomiyo:20181021200657p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 2px solid #ccc;
    background-color: #ffc2c2;
    border-radius: 3px;
}

.hatena-module-search-box .search-module-input {
    padding: 5px;
    height: 20px;
    background-color: #fff;
    border-radius: 3px 0 0 3px;
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px;
    width: 24px;
    height: 24px;
    background-size: 20px 20px;
    margin-left: 5px;
}

</style>

部分的にピンクを使えばいいのではないか?

誰か可愛いを教えてくれ。

とりあえずピンクの過剰摂取は避けることができた。

可愛い系4

f:id:oyomiyo:20181021204600p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 5px solid #eca1a1;
    background-color: #fff;
    border-radius: 7px;
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

マウスが重い。

ゾウくらいある。

可愛い系5

f:id:oyomiyo:20181021205651p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 3px solid #ff8888;
    background-color: #ffeeee;
    border-radius: 3px;
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

フラストレーションが溜まりすぎてボックスの中身を書き換えてしまった。

(反映されませんよこの部分は)

申し訳ない。ヒジョーに申し訳ない。

カッコイイ系

小栗旬系とも言う。

カッコイイ系1

f:id:oyomiyo:20181022134505p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 5px inset #ccc; /*枠線スタイル*/
    background-color: none; /*背景色*/
    border-radius: 0px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

少しへこんだ検索ボックスとか、

カッコイイ系2

f:id:oyomiyo:20181022134844p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 2px solid #999; /*枠線スタイル*/
    background-color: none; /*背景色*/
    border-radius: 0px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

線を細くすると精錬されたカッコ良いイメージになりますね。

カッコイイ系3

f:id:oyomiyo:20181022135239p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 2px solid #939aa0; /*枠線スタイル*/
    background-color: #fff; /*背景色*/
    border-radius: 0px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 7px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

男ならデカくいこうぜ。

カッコイイ系4

f:id:oyomiyo:20181021123105p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: none; /*枠線スタイル*/
    background-color: #fff; /*背景色*/
    border-radius: 0px; /*枠線丸角*/
    box-shadow: 3px 3px black;
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

影をぼかさないいタイプ。

私は常にボケるタイプ。

カッコイイ系5

f:id:oyomiyo:20181021203021p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: none;
    background-color: none;
    border-radius: 3px;
}

.hatena-module-search-box .search-module-input {
    padding: 5px;
    height: 20px;
    border: 3px solid #666;
    background-color: #fff;
}

.hatena-module-search-box .search-module-button {
    margin-right: 0px;
    width: 32px;
    height: 36px;
    background-size: 25px 25px;
    border: 3px solid #666;
    border-left: none;
    opacity: 1;
}

</style>

オパシティー関係で虫眼鏡ボタンが濃くなってしまってますがそこはご愛嬌。

個性派デザイン

個性派デザイン1

f:id:oyomiyo:20181022140754p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 3px dashed #6b7377; /*枠線スタイル*/
    background-color: none; /*背景色*/
    border-radius: 0px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

水はけ重視。

梅雨の時期にどうぞ。

個性派デザイン2

f:id:oyomiyo:20181106154106p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 2px solid #d96363; /*枠線スタイル*/
    background-color: none; /*背景色*/
    border-radius: 20px; /*枠線丸角*/
}

.hatena-module-search-box .search-module-input {
    padding: 5px 15px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

個性派デザイン3

f:id:oyomiyo:20181106154906p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: none;
    background-color: #ddd;
    border-radius: 0;
}

.hatena-module-search-box .search-module-input {
    background-color: #fff;
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin: 0 5px;
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

これに影や枠を付けても面白い。

個性派デザイン4

f:id:oyomiyo:20181106155541p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 4px solid #f5bb69;
    background-color: #f5bb69;
    border-radius: 3px;
}

.hatena-module-search-box .search-module-input {
    background-color: #fff;
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin: 0 3px 0 5px;
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

オモロイんちゃう?

個性派デザイン5

f:id:oyomiyo:20181022141143p:plain

CSS

<style type="text/css">

.hatena-module-search-box .search-form {
    border: 1px solid #ddd; /*枠線スタイル*/
    background-color: none; /*背景色*/
    border-radius: 3px; /*枠線丸角*/
    opacity: 0.2;
}

.hatena-module-search-box .search-module-input {
    padding: 5px; /*ボックス内余白*/
    height: 20px; /*ボックス高さ*/
}

.hatena-module-search-box .search-module-button {
    margin-right: 5px; /*ボタン右余白*/
    width: 24px; /*ボタンサイズ分だけ増やす*/
    height: 24px; /*ボタンサイズ分だけ増やす*/
    background-size: 20px 20px; /*ボタンサイズ*/
}

</style>

記事探しは検索ボックス探しから始まる、、、。

典型的な迷惑デザイン。

私以上に迷惑な人間にどうぞ。

最後に

気に入った人は迷わずポチ。

カスタマイズに使った人もポチ。

、、、全員ポチ。

ではまた。