「このブログを検索する」フォームをカスタマイズする方法

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロカスタマイズ向け新スキン『CSS編集用デザイン』の検索フォーム(このブログを検索する)があまりにも味気なかったので、ちょっと画像を使ってもう少しましな感じにカスタマイズする方法を考えてみました。

また、そのカスタマイズ方法で使える画像素材も作ってみましたので、よかったら使ってみてください。

やり方は簡単です。

以下のコードをユーザーCSSの最後に追加してください。

#blogSearchForm, #blogSearchBtn{
  background-image:url(https://stat.ameba.jp/user_images/20111227/22/sozai-land/4d/5c/p/o0300008011698470319.png);
  background-repeat:no-repeat;
}
.skinSubA div.blogSearchForm, .skinSubB div.blogSearchForm{
  position:relative;
  padding-right:40px;
  width:auto;
}
.skinSubA #blogSearchForm, .skinSubB #blogSearchForm{
  position:static;
  width:100%;
}
#blogSearchForm{
  height:40px;
  background-position:left bottom;
}
#blogSearchBtn{
  width:40px;
  height:40px;
  right:0;
  top:0;
  background-position:right top;
}
#blogSearchBtn:hover{
  background-position:right bottom;
}
#blogSearchInput{
  margin:10px 0 0 15px;
  padding:2px;
  border:none;
  background-color:transparent;
}
.skinSubA #blogSearchInput{
  width:240px;
}
.skinSubB #blogSearchInput{
  width:120px;
}

赤文字の部分は使用する画像のURLです。

アメブロ内からに限り、以下の画像のURLを直接利用することができると思いますので、もしお好みの物があったらご利用いただければと思います。

もちろん、削除等を懸念される場合は、ご自分の画像フォルダにアップロードされてご使用になることも可能です。


https://stat.ameba.jp/user_images/20111227/22/sozai-land/4d/5c/p/o0300008011698470319.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/e4/40/p/o0300008011698470320.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/a7/1c/p/o0300008011698471035.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/b2/4e/p/o0300008011698471032.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/77/42/p/o0300008011698472581.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/76/09/p/o0300008011698472580.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/b2/e8/p/o0300008011698472582.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/0a/50/p/o0300008011698472579.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/f4/32/p/o0300008011698472042.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/4b/54/p/o0300008011698472039.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/85/c5/p/o0300008011698472038.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/3d/50/p/o0300008011698472016.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/45/2b/p/o0300008011698471034.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/bb/1d/p/o0300008011698471033.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/5d/b9/p/o0300008011698470318.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/87/93/p/o0300008011698470317.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/a6/71/p/o0300008011698469395.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/ae/e8/p/o0300008011698469394.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/dc/55/p/o0300008011698469393.png


https://stat.ameba.jp/user_images/20111227/22/sozai-land/ac/d2/p/o0300008011698469392.png

また、実は、画像はここで紹介したもの以外にも色違いを多数(120個ほど)作ってあります。

実は、このブログの次期デザインに使用するために、どんな色にしようかと悩みながら色んな色で作ってみたものです。

もし他の色も見てみたいという方がおられましたら、こちら(直ダウンロードです)に、ZIPファイルにまとめたものがありますので、ダウンロードしてご確認下さい。

なお、これらの画像は、ご自分のアメブロでご利用になる分には全く問題ありませんが、一応、著作権は放棄していませんので、再配布等他の目的でご利用になる場合は、僕の方までお問い合せ下さいませ。

ちなみに、同じ画像を使って、Googleカスタム検索のフォームもカスタマイズしてみました。

こちらも、できれば公開したいと思っています。

アメブロカスタマイズで自分らしい空間を作る技