サイト内検索 Google カスタム検索 と表示させない

カスタム検索エンジンの作成

まず「カスタム検索エンジンの作成」をして、カスタム検索を設置するサイト(自分のウェブサイト)の登録をします。

  1. Google の「カスタム検索エンジン」ページを開く。
    ログインしていない場合は、[カスタム検索エンジンにログイン]から、Googleアカウントでログイン。
    Googleカスタム検索エンジン
  2. 左メニューの[検索エンジンの編集]をクリック。
    [検索エンジンの編集]の下のグレーの枠は「すべて」(もしくは「All」)を選択。
    「検索エンジンの編集」ページで[Add]をクリック。
    Google カスタム検索
  3. [検索するサイト]にGoogleカスタム検索を設置するサイトのURLを入力。
    URLの入力の仕方は、[URL パターン]を参照のこと。
    私は今回「http://www.ultimai.com/」のサイト内の「kenchiku」フォルダ内を検索させたいため、「www.ultimai.com/kenchiku/*」と入力。
  4. [言語]を[日本語]に設定。
  5. 名前(検索エンジンの名前)を設定する。 [名前を変更]をクリックして任意の名前を入力。
    上記 1. の「検索エンジンの編集」ページでこの名前が表示されます。
  6. [作成]ボタンクリック。
    これでカスタム検索エンジンの作成が完了。

以下、自分のホームページにカスタム検索を設置する方法を説明します。

自分のホームページにカスタム検索を設置する

今回は、検索窓と検索結果ページを分ける方法で設置する仕方をご紹介します。

  1. まず、検索結果ページのレイアウトを設定する。
    左メニューの[検索エンジンの編集]をクリック。
    [検索エンジンの編集]の下の、グレーの枠の箇所は、今回設定した検索エンジンの名前を選択
    左メニューの[デザイン]をクリック。
    開いたページの上の方、[レイアウト]タブをクリック。
    レイアウト例がいくつか並んでいる中の、[2ページ]をクリックし、[保存]をクリック。

  2. 検索結果ページのURLを登録する。
    左メニューの[設定]をクリック。
    開いたページ中ほど、「詳細」の項目の[コードを取得]をクリック。

ページ読み込み時に実行したい処理がある場合

通常はjavascriptのonloadイベントを使用します。

BODY要素にonload属性を追加したり、
下記のようなjavascriptの指定を追加する方法がよく見られます。

1
2
3
window.onload = function(){
// ページ読み込み時に実行したい処理
}

次にCSSをヘッダー内で
input#gsc-i-id1{background: url('images/inputback.png')!important }

serch_google

リンク画像を拡大表示&移動可能にする

zoomy2

<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/prototype.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/scriptaculous.js?load=effects,dragdrop"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/effects.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/dragdrop.js"></script>
<script type="text/javascript" src="http://cssrevolt.com/upload/files/zoomy/js/zoomy.js"></script>

<script type="text/javascript">
Event.observe(window,"load",function() {

$$("div.entry-content a").each(function(element){
new Zoomy(element, { draggable: true });
});
});
</script>


/* thumbnails grid */
.zoomy, .zoomy2 { float:left; width:100%; }
.zoomy li, .zoomy2 li { list-style:none; float:left; display:inline; margin-right:5px; margin-bottom:5px; width:150px; height:100px;  }
.zoomy a, .zoomy2 a { text-decoration:none; display:block; width:150px; height:100px; }


/* ..... ZOOMY */
#zoomy { position:absolute; overflow:hidden; background:#000000; padding:0px; border:1px solid #FFFFFF; text-align:center; color:#fff; line-height:0; }
#zoomy img { margin:5px; }
#zoomy p { position:relative; margin:10px 5px 5px 5px; line-height:100%; text-align:left  }

#close { position:absolute; right:5px; width:12px; height:12px; background:url(close.gif) no-repeat; cursor:pointer;} 


基本的に”prototype.js”はjQeryとは競合するので、もし共存させたければこの記事を参考に
「jQueryとprototype.js共存させる為にする事」

タグに付けられたIDにClassを追加する

body内にないとダメらしい。うまく行かなかったらあちこち移動してみる。
prototype.jsがほしいのでどっかから参照する。

<script src="/js/prototype.js" type="text/javascript"></script>


<script>// <![CDATA[

 var element4=document.getElementById("menu-item-71") 
 element4.addClassName("shake");  //クラス shakeを追加

element4.removeClassName("menu-item-object-page"); //menu-item-object-pageクラスを除去
// ]]></script>

javascript カレンダーからの日付入力

datepicker でカレンダーを2つ作って開始日~終了日にする

日付フォーマットが海外スタイルなのでyyyy/mm/ddになおす


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="js/jquery.ui.datepicker-ja.js"></script> <!--これを読ませるだけで日付フォーマット完成-->

<script language="javascript" type="text/javascript">

$(function() {     $( "#datepicker_begin" ).datepicker();   });

$(function(){    $("#datepicker_end").datepicker();   });

</script

</pre>

 

<h3>開始日が終了日より後にならないようにする</h3>

<p>ボタンはsubmitさせて、jsでfalseを返して止めるやり方</p>

<pre>

function next_button(){

var datepicker_begin = document.getElementById("datepicker_begin");

var datepicker_end = document.getElementById("datepicker_end");

// 最終確認

if (  datepicker_begin.value >=  datepicker_end.value  ) {

alert('到着日を返却日よりも前にしてください');

return false; //submit の返り値が false なら submit の処理が中断される

}

}

 

 

 

html


<form  name="frm" id="frm" method="post" action="add.php?<?=SID ?>"  onSubmit="return next_button();" >

<dl>

<dt>到着日</dt>

<dd>

<input name="datepicker_begin" id="datepicker_begin" type="text" placeholder="--年--月--日" size="11" maxlength="10" required />

</dd>

<dt>返却日</dt><dd>

<input name="datepicker_end" type="text" class='list_dd trs_bg' id="datepicker_end" placeholder="--年--月--日" size="11" maxlength="10"  required />

</dd>

</dl>

javascript ラジオボタンでDOMの開閉をしたい。


異なる配送先を選んだ場合には住所の入力欄が作られるスクリプト

<script>
window.onload = function() { /* チェックボックス */
var check = document.getElementById(“check”); /* 同じ住所 */
var non = document.getElementById(“non”); /* 違う住所 */
var frm = document.getElementById(“frm”); /* formのID */

//
non.checked = false;
non.value = ‘off’;

/* チェックボックスにonclickイベントハンドラをセット */

non.onclick = function() {
var hide_area = document.getElementById(“hide_area”);
check.checked = false; /* */
check.value = ‘off’;

if( non.value == ‘off’ ) {

hide_area1.innerText=”郵便番号:”;

var zipp = document.createElement(“input”);
zipp.type = “text”;
zipp.id = “zipp”;
zipp.name = ‘zipp’;
zipp.size = ‘4’;
zipp.maxLength = ‘3’;
hide_area1.appendChild(zipp);

var zipp2 = document.createElement(“input”);
zipp2.type = “text”;
zipp2.id = “zipp2″;
zipp2.name = ‘zipp2’;
zipp2.size = ‘5’;
zipp2.maxLength = ‘4’;
zipp2.onKeyUp=”AjaxZip3.zip2addr(‘zipp’,’zipp2′,’pref31′,’haisosaki’);”
hide_area1.appendChild(zipp2);
}
};

//上記と同じ住所 clicked
check.onclick = function() {
non.value = ‘off’;
hide_area.addClassName(“hide_class”);
};

</script>

書いているうちにもっと簡単な方法を思いついた。

display:none のクラスをあてたり、とったりすればいいのだ。

$(“hide_area”).removeClassName(“hide_class”);  // 一行で片付いた。


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /var/www/html/wp/wp-includes/functions.php on line 5107

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /var/www/html/wp/wp-includes/functions.php on line 5107