■ 2013.08.25 追加記事来歴
● 下記記事をこの記事の追加記事として作成
グーグル検索ボックスの大きさの調整
● 内容
① グーグルの検索ボックスを指定した場所に設置する。
② 背景色などをカスタマイズ可能。
③ 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").google_sbox_set({bg_color:"#ffffff",sbox_desc:"Google 検索",sbox_target:"0"});
});
</script>
オプション(options)
| オプション項目 | 初期値 | 説明 |
| bg_color | "#ffffff" | 背景色 |
| sbox_desc | "Google 検索" | 検索ボタンの文字 |
| sbox_target | "0" | 0・・・新しいページ 1・・・現在のページ |
| search_area | "0" | 0・・・検索選択非表示 1・・・検索選択表示 |
| domains | "ameblo.jp" | 検索するサイトのＵＲＬ |
| domains_dec | "このブログを検索" | 検索するサイトの表示 |
| www_desc | "WWWを検索" | 検索するWWWの表示 |
・.skinHeaderArea・・・セレクタ名 この場所の下に設置
・bg_color:"#ffffff"・・・背景色を指定（初期値:#ffffff）
・sbox_desc:"Google 検索"・・・検索ボタンに表示する文字（初期値:Google 検索）
・sbox_target:"0"・・・検索ボタンをクリックした後に新しいページで開くか？
"0"・・・新しいページで結果を表示（これが初期値）
"1"・・・現在のページで結果を表示。
・search_area:"0"・・・"0"・・・検索ラジオボタンを表示しない。
"1"・・・検索ラジオボタンを表示する。
・domains:"ameblo.jp"・・・検索するＵＲＬを指定する。（http:// は消す)
通常は自分のブログのＵＲＬを指定します。
・domains_dec:"このブログを検索"・・・検索するＵＲＬの説明。
・www_desc:"WWWを検索"・・・WWW検索の説明
・該当箇所を下記の様にすれば初期値が使用されます。
{}の中にオプションを指定できます。
初期値以外を使う場合にその項目を指定します。
$(".skinHeaderArea").google_sbox_set({});
・背景色のみを変えたい場合。
$(".skinHeaderArea").google_sbox_set({bg_color:"#000000"});
② 下記をＣＳＳへ追加する
/* ------------------------------------------------------------------ */
/* グーグル検索ボックス */
/* ------------------------------------------------------------------ */
form#g_search_area{
display:block;
width:500px;/* 幅 */
margin:auto;
}
/* 検索ボタンにカーソルを乗せた時 */
form#g_search_area input[name="btnG"]:hover{
cursor:pointer;/* ポインター */
}
/* ------------------------------------------------------------------ */
● 検索ラジオボタンを表示する場合の例
（フリープラグイン部分）
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").google_sbox_set({
bg_color:"#ffffff",
sbox_desc:"Google 検索",
sbox_target:"0",
search_area:"1",
domains:"ameblo.jp/new-blue-777/",
domains_dec:"このブログを検索",
www_desc:"WWWを検索"
});
});
</script>
● メッセージボードや記事など指定した場所に設置したい場合
① ＨＴＭＬモードでメッセージボードや記事に下記を追加する
<div class="google_sbox_area"></div>
② 下記の様にフリープラグインに追加する
（".google_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() {
$(".google_sbox_area").google_sbox_set({bg_color:"#ffffff",sbox_desc:"Google 検索",sbox_target:"0"});
});
</script>
③ 下記をＣＳＳへ追加する
/* ------------------------------------------------------------------ */
/* グーグル検索ボックス */
/* ------------------------------------------------------------------ */
form#g_search_area{
display:block;
width:500px;/* 幅 */
margin:auto;
}
/* 検索ボタンにカーソルを乗せた時 */
form#g_search_area input[name="btnG"]:hover{
cursor:pointer;/* ポインター */
}
/* ------------------------------------------------------------------ */
● Javascript ソース内容
var google_data_default=[{bg_color:"#ffffff",sbox_desc:"Google 検索",sbox_target:"0",search_area:"0",
domains:"ameblo.jp/",domains_dec:"このブログを検索",www_desc:"WWWを検索"}];
$.fn.extend({
google_sbox_set:function(google_data_sbox){
var google_dataw=google_data_default[0];
var bg_color= google_data_sbox.bg_color || google_dataw.bg_color;
var sbox_desc=google_data_sbox.sbox_desc || google_dataw.sbox_desc;
var sbox_target=google_data_sbox.sbox_target || google_dataw.sbox_target;
var search_area=google_data_sbox.search_area || google_dataw.search_area;
var domains=google_data_sbox.domains || google_dataw.domains;
var domains_dec=google_data_sbox.domains_dec || google_dataw.domains_dec;
var www_desc=google_data_sbox.www_desc || google_dataw.www_desc;
var google_form='<!-- Google --><form id="g_search_area" ';
if(sbox_target=="0"){google_form+='target="_blank" ';}
google_form+='method=get action="http://www.google.co.jp/search"><table bgcolor="'+bg_color+'"><tr><td><a href="http://www.google.co.jp/"><img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></a></td><td><input type=text name=q size=31 maxlength=255 value=""><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=hl value="ja"><input type=submit name=btnG value="'+sbox_desc+'">';
if(search_area=="1"){
google_form+='<input type=hidden name=domains value="'+domains+'"><br><input type=radio name=sitesearch value=""> '+www_desc+'<input type=radio name=sitesearch value="'+domains+'" checked> '+domains_dec+' ';
}
google_form+='</td></tr></table></form><!-- Google -->';
$(this).after(google_form);
}});