ブログ内検索の設定

★　ブログ内検索の設定


●　関連記事


入力部分にメッセージを表示して入力をサポートする
http://ameblo.jp/new-blue-777/entry-11344247090.html





◆　背景色など


①　背景色と枠線

/* ------------------------------------------------------- */
/* 検索の背景色や枠線を設定　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.blogSearchForm input{
background-color:#ccffcc;/* 背景色 */
border:3px dotted #ddccff;/* 枠線 */
}

②　横の長さを変える

/* ------------------------------------------------------- */
/* 検索の横の長さを設定　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.blogSearchForm input{
width:160px !important;/* 幅 */
}
/* ------------------------------------------------------- */
/* 検索の検索ボタンの位置を調整　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.blogSearchBtn {
right:110px;/* 右からの位置 */
}

③　検索ボタンの画像を変える

/* ------------------------------------------------------- */
/* 検索の検索ボタンの画像変更　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.blogSearchBtn {
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
}
/* ------------------------------------------------------- */
/* 検索の検索ボタンの画像のロールオーバー　　　　　　　　　*/
/* ------------------------------------------------------- */
.blogSearchBtn:hover {
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
}

④　検索ボタンを消して【検索】にする

/* ------------------------------------------------------- */
/* 検索の検索ボタンを画像から検索に　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.blogSearchBtn {
text-indent:0px;/* 検索の文字を表示 */
background-image:none;/* 検索画像を消す */
color:#ff00ff !important;/* 文字の色 */
font-size:10px;/* 文字の大きさ */
line-height:30px;/* 縦の位置調整 */
right:5px;/* 右からの位置 */
}

⑤　検索内の文字の色と大きさ

/* ------------------------------------------------------- */
/* 検索内の文字の色と大きさ　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.blogSearchForm input {
color:#ff00ff !important;/* 文字の色 */
font-size:10px;/* 文字の大きさ */
font-weight:bold;/* 文字の太さ bold→太い normal→普通 */
}

⑥　初期の【このブログを検索する】　の文字を変える
　　（下記はフリープラグインへ追記すること）

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){$(".blogSearchForm input[name='q']").val('検索してね～');});
</script>

◆　説明

　・　下記はフリープラグインの最初に１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>





●　クリックしたら入力部分が消える方法は下記の記事を参照(2012.09.13 追記)
http://ameblo.jp/new-blue-777/entry-11344247090.html



★　画像は下記サイト様を利用
http://sozai.7gates.net/