【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

「コピペでOK!」はてなブログで検索ボックスをカスタマイズする方法

 ついにこの日が来ましたね。検索ボックスです。

実はこの私も検索ボックスにはこだわりたいタイプなのです。

 

ところで皆さんは、たいして使われることのない検索ボックスがトップページの目につく場所にいつも設置されるのか疑問に感じたことはないでしょうか?

それは、、、、。

 

可愛いからです。(個人調べ)

 

f:id:oyomiyo:20180923215359p:plain

 

ほら。ね?(うちの子)

 

学校の良し悪しがトイレの綺麗さで分かるのと同じように、ブログの良し悪しは検索ボックスの可愛さで決まるのです。

それで検索しないと探せないほど大量の記事を書いてから設置しろと言う心もとない意見は無視させていただきます。

 

検索ボックスはファッションであり正義なのです。

 

そうです。必要性が求められる世界ではなく、見た目が良ければオッケーな世界なのです。

 

それで今回は、検索ボックスをカスタマイズしたくてしたくて全身がかゆくなった人(もしくはならなかった人)を対象にかなりマニアックなカスタマイズができるようになるまで手厚くるしくサポートします。

果たして検索ボックスのカスタマイズにそこまでのこだわりを求める人がどれほどいるのかは知りませんが、取りあえずついてきてもらえればと思います。

以下注意点です。

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

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

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

PLAIN – テーマ ストア

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

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

f:id:oyomiyo:20180909220240p: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>

このコードが検索ボックスのカスタマイズの大枠になります。この中のコードを色々といじくりながらカスタマイズしてくことになります。

 

とその前に、、、

「PLAIN」のサイドバータイトルのデフォルトのデザインは背景黒で文字が白という、なかなか主張が強い感じなので(自分で作ったんだけれども汗)ちょっとマイルドな感じに変更しときます。

まあ、カスタマイズ用のテンプレートとして公開してるわけだし、好きなように変更できるようにこんな記事書いてるワケですからね、、、文句は駄目ですよ(逃げ)

 

はい、で出来上がったのがドン。

 

f:id:oyomiyo:20180923210425p:plain

 

背景と文字色を入れ替えただけです。ここら辺のカスタマイズはこの記事を参考にお願いします。

「コピペで解決!」はてなブログでサイドバーのタイトル部分をカスタマイズする方法

今回はこれを元にカスタマイズを行います。

検索ボックスの枠線をカスタマイズする

先程のコードのうちの以下の部分を書き換えることでカスタマイズできます。

border: 1px solid #ddd; /*枠線スタイル*/

※長いコードを何回も載せるのが嫌いなので、必要な部分だけピックアップします。冒頭のコードのうちの所定の部分だということを理解してください。

このコードのうち1pxの部分が枠線の太さ、solidが一本線の指定、#dddが枠線の色ということになります。

取りあえず太さを3px、色を水色(#2d95de)で指定してみましょう。その場合こんな感じで書き換えることになります。

border: 3px solid #2d95de; /*枠線スタイル*/

で見た目、

 

f:id:oyomiyo:20180923223426p:plain

 

まあアリでしょ。

ちなみにこのsolidの部分を書き換えたらどうなるのという意見がオヨミヨのコンタクトフォームに殺到してサイトダウンする可能性があるので(ありません)一応説明します。

例として、一本線(solid)の部分を破線(dashed)に書き換えたとします。

こんな感じです。

 

f:id:oyomiyo:20180923225326p:plain

 

なんか検索漏れありそう。

※通気性は良いのでカビは生えにくいです。

 

はい。それはいいとして、一つのコードで太さ、スタイル、色を指定できるところは有難いですね。

次!!!!

ボックス内の背景色を変更する

デフォルトでは背景色なし(none)に設定しています。

変更する場合は以下の記述を先程のコードの中から探してください。

background-color: none; /*背景色*/

うすい黄色(#fff69a)で試してみましょう。以下を追加する形になります。

background-color: #fff69a; /*背景色*/

で見た目はこんな感じ。

 

f:id:oyomiyo:20180924135138p:plain

 

※枠線を太くして枠線色を濃くしています。

濃すぎる背景色を指定しない限りは大丈夫そうです。

ボックスの枠線を丸角にする

さっきのコードの一つ下にあるやつをいじります。

 border-radius: 3px; /*枠線丸角*/

これですね。

「PLAIN」の場合はデフォルトの状態で3pxなので初めからちょっとだけ丸くなってます。直角にしたい場合は0pxにして下さい。

数値が大きくなるほど丸くなるので、今回は15pxで設定してみたいと思います。

こうですね。

border-radius: 15px;

 

f:id:oyomiyo:20180923231135p:plain

 

※余白調節をしてます。

足の指ぶつけても大丈夫そう。

検索ボックス内の余白を指定する

余白の指定は2つのコードを使って行います。

padding: 5px; /*ボックス内余白*/
margin-right: 5px; /*ボタン右余白*/

ていってもピンとこないと思うので、、、

 

f:id:oyomiyo:20180924123619p:plain

 

はい。親切。

デフォルトでは5pxにしてるのでこんな感じです。あとボックス内の余白と、検索ボタン右の余白は同じにした方がいいと思います。

試しに10pxにしてみましょう。

padding: 10px; /*ボックス内余白*/
margin-right: 10px; /*ボタン右余白*/

で見た目、

 

f:id:oyomiyo:20180924125154p:plain

 

若干太ってるのが分かると思います。

検索ボックスの高さを指定する

ボックスの高さを指定します。以下のコードを探してください。

height: 20px; /*ボックス高さ*/

同じプロパティ(heightとかいうやつ)が2つあるので注意してください。ボックスの高さと記述のある方ですね。

キブンが乗ってきたので80pxでいってみましょう。

height: 80px; /*ボックス高さ*/

嫌な予感、、、

 

f:id:oyomiyo:20180924130318p:plain

 

YES!!!

次で最後です。

検索ボタンの大きさを変更する

検索ボックスの大きさをカスタマイズした場合、それに合わせて検索ボタンの方も大きさを変更したくなるかもしれません。

この場合書き換える場所が3か所あります。

冒頭のコードのうち一番下の3つです。

width: 24px; /*ボタンサイズ分だけ増やす*/
height: 24px; /*ボタンサイズ分だけ増やす*/
background-size: 20px 20px; /*ボタンサイズ*/

最後のbackground-sizeってやつがボタンサイズなのですが、それに合わせて他の2つも大きさを調節してあげる必要があります。

ポイントはボタンサイズで増やした分だけ他の2つも増やすというところです(減らす場合も同じ)。例えばボタンサイズを10px増やしたとすれば、それ以外も10pxずつ増やせばいいわけです。

全ての値を30pxずつ増やしてみました。

width: 54px; /*ボタンサイズ分だけ増やす*/
height: 54px; /*ボタンサイズ分だけ増やす*/
background-size: 50px 50px; /*ボタンサイズ*/

こうなるはずです。

 

f:id:oyomiyo:20180924143315p:plain

 ※枠線を太くして枠線色を濃くしています。

検索したくなりません?

 

なぜ2か所とも変更しないといけないのか疑問に思う方もおられるかもしれません。

普段であれば詳しい説明はすこしだけといったところですが、今日はワタクシの大好きな検索ボックスのカスタマイズということで、、、

完全に省きます。

最後に

全体的にウザいと感じたら連打。

このエントリーをはてなブックマークに追加

 

ではまた。