● 内容
① ヤフーの検索ボックスを指定した場所に設置する。
② 背景色などをカスタマイズ可能。
③ WWWからの検索及び指定したサイトからの検索が可能。
● 例
① 検索ラジオボタンなし。(WWWから検索)
② 検索ラジオボタンあり。(WWWまたは、自分のブログから検索）
● 設置方法
① フリープラグインへ追加する(ヘッダー下に入れる場合の例)
検索ラジオボタンなしのケース
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript">
$(document).ready(function() {
$(".skinHeaderArea").yahoo_sbox_set({bg_color:"#ffffff",sbox_desc:"yahoo 検索",sbox_target:"0"});
});
</script>
オプション(options)
| オプション項目 | 初期値 | 説明 |
| bg_color | "#ffffff" | 背景色 |
| sbox_desc | "検索" | 検索ボタンの文字 |
| sbox_target | "0" | 0・・・新しいページ 1・・・現在のページ |
| search_area | "0" | 0・・・検索選択非表示 1・・・検索選択表示 |
| domains | "ameblo.jp" | 検索するサイトのＵＲＬ |
| domains_dec | "このブログを検索" | 検索するサイトの表示 |
| www_desc | "ウェブ全体を検索" | 検索するWWWの表示 |
・.skinHeaderArea・・・セレクタ名 この場所の下に設置
・bg_color:"#ffffff"・・・背景色を指定（初期値:#ffffff）
・sbox_desc:"検索"・・・検索ボタンに表示する文字（初期値:yahoo 検索）
・sbox_target:"0"・・・検索ボタンをクリックした後に新しいページで開くか？
"0"・・・新しいページで結果を表示（これが初期値）
"1"・・・現在のページで結果を表示。
・search_area:"0"・・・"0"・・・検索ラジオボタンを表示しない。
"1"・・・検索ラジオボタンを表示する。
・domains:"ameblo.jp"・・・検索するＵＲＬを指定する。（http:// は消す）
通常は自分のブログのＵＲＬを指定します。
・domains_dec:"このブログを検索"・・・検索するＵＲＬの説明。
・www_desc:"ウェブ全体を検索"・・・WWW検索の説明
・該当箇所を下記の様にすれば初期値が使用されます。
{}の中にオプションを指定できます。
初期値以外を使う場合にその項目を指定します。
$(".skinHeaderArea").yahoo_sbox_set({});
・背景色のみを変えたい場合。
$(".skinHeaderArea").yahoo_sbox_set({bg_color:"#000000"});
② 下記をＣＳＳへ追加する
/* ------------------------------------------------------------------ */
/* ヤフー検索ボックス */
/* ------------------------------------------------------------------ */
.y_search_div{
width:500px;/* 幅 */
margin:auto;
}
.y_search_div ul{
margin-left:85px !important;
}
/* 検索ボタンにカーソルを乗せた時 */
form#y_search_area input[name="btnY"]:hover{
cursor:pointer;/* ポインター */
}
/* ------------------------------------------------------------------ */
● 検索ラジオボタンを表示する場合の例
（フリープラグイン部分）
http://ameblo.jp/new-blue-777/・・・私のブログのＵＲＬになっているので変えてください。
(最初の http:// は消してください）
オプションの不要な行は消してください。（初期値を使う場合は消してもＯＫです）
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript">
$(document).ready(function() {
$(".skinHeaderArea").yahoo_sbox_set({
bg_color:"#ffffff",
sbox_desc:"yahoo 検索",
sbox_target:"0",
search_area:"1",
domains:"ameblo.jp/new-blue-777/",
domains_dec:"このブログを検索",
www_desc:"WWWを検索"
});
});
</script>
● メッセージボードや記事など指定した場所に設置したい場合
① ＨＴＭＬモードでメッセージボードや記事に下記を追加する
<div class="yahoo_sbox_area"></div>
② 下記の様にフリープラグインに追加する
（".yahoo_sbox_area"の部分のみ変更）
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript">
$(document).ready(function() {
$(".yahoo_sbox_area").yahoo_sbox_set({bg_color:"#ffffff",sbox_desc:"yahoo 検索",sbox_target:"0"});
});
</script>
③ 下記をＣＳＳへ追加する
/* ------------------------------------------------------------------ */
/* ヤフー検索ボックス */
/* ------------------------------------------------------------------ */
.y_search_div{
width:500px;/* 幅 */
margin:auto;
}
.y_search_div ul{
margin-left:85px !important;
}
/* 検索ボタンにカーソルを乗せた時 */
form#y_search_area input[name="btnY"]:hover{
cursor:pointer;/* ポインター */
}
/* ------------------------------------------------------------------ */
● Javascript ソース内容
var yahoo_data_default=[{bg_color:"#ffffff",sbox_desc:"検索",sbox_target:"0",search_area:"0",
domains:"ameblo.jp/",domains_dec:"このブログを検索",www_desc:"ウェブ全体を検索"}];
$.fn.extend({
yahoo_sbox_set:function(yahoo_data_sbox){
var yahoo_dataw=yahoo_data_default[0];
var bg_color= yahoo_data_sbox.bg_color || yahoo_dataw.bg_color;
var sbox_desc=yahoo_data_sbox.sbox_desc || yahoo_dataw.sbox_desc;
var sbox_target=yahoo_data_sbox.sbox_target || yahoo_dataw.sbox_target;
var search_area=yahoo_data_sbox.search_area || yahoo_dataw.search_area;
var domains=yahoo_data_sbox.domains || yahoo_dataw.domains;
var domains_dec=yahoo_data_sbox.domains_dec || yahoo_dataw.domains_dec;
var www_desc=yahoo_data_sbox.www_desc || yahoo_dataw.www_desc;
var yahoo_form='<div class="y_search_div" style="padding:0;font-size:14pt;border:none;background-color:'+bg_color+';">';
yahoo_form+='<form id="y_search_area" action="http://search.yahoo.co.jp/search" method="get" ';
if(sbox_target=="0"){yahoo_form+='target="_blank" ';}
yahoo_form+='style="margin:0;padding:0;"><p style="margin:0;padding:0;"><a href="http://www.yahoo.co.jp/" target="_blank"><img src="http://i.yimg.jp/images/search/guide/searchbox/080318/ysearch_logo_85_22.gif" alt="Yahoo! JAPAN" style="border:none;vertical-align:middle;padding-right:5px;border:0;" width="85" height="22"></a><input type="text" name="p" size="31"><input type="hidden" name="fr" value="ysiw"><input type="hidden" name="ei" value="UTF-8"><input type="submit" value="'+sbox_desc+'" style="margin:0;" name="btnY"></p>';
if(search_area=="1"){
yahoo_form+='<ul style="margin:2px 0 0 0;padding:0;font-size:10pt;list-style:none;"><li style="display:inline;"><input name="vs" type="radio" value="">'+www_desc+'</li><li style="display:inline;"><input name="vs" type="radio" value="'+domains+'" checked="checked">'+domains_dec+'</li></ul>';
}
yahoo_form+='</form>';
$(this).after(yahoo_form);
}});