プロチューＮＡＶＩ
は受験情報のポータルサイトとして作成したため、更新頻度が高く、トップページはほぼ３日間くらいで書き換わります。
そこで、インターネットのスタート（ホーム）ページに設定しても機能できるように,Yahoo!の検索バーを表示することにしました。
Yahoo!のサービスに、カスタムサーチというのがあるので、それを使用します。カスタムサーチを作るにはYahoo!ＩＤが必要なので、まだ持っていない人は、作っておいてください。
Yahoo!カスタムサーチを作る
Yahoo!IDを作る
カスタムサーチの作り方は簡単で、ウィザードの通りに作れば問題はありません。できたコードをＱＨＭのＨＴＭＬコード挿入で貼り付けます。
ただ、プロチューＮＡＶＩ は、大学受験用ページ、高校受験用ページ、小中学生用ページの３カテゴリに別れ、それぞれ大学受験は青、高校受験は緑、小中学生はピンクとサイトイメージカラーが決まってますから、できれば検索バーもそれにあわせたいです。そこで、少しコードをカスタマイズしました。
オリジナルのコードは下の通りです。
<div id="srchBox">
<style type="text/css">
#srchBox
{
width:598px;
_width:596px;
margin-bottom:10px;
background-color:#FFFFFF;
border-style:solid;
border-width:1px;
border-color:#EEEEEE;
color:#000000;
text-align:left;
}
#srchBox *
{
margin:0;
padding:0;
font-size:13px;
*font-size:small;
*font:x-small;
}
#srchBox a img
{
border:none;
}
#srchBox #srch
{
padding:10px 10px 0 10px;
}
#srchBox #srch #srchForm
{
white-space:nowrap;
}
#srchBox #srchInput
{
width:488px;
margin-right:6px;
vertical-align:bottom;
}
#srchBox #srchBtn
{
width:80px;
}
*html #srchBox #srchBtn
{
padding-top:2px;
}
*:first-child+html #srchBox #srchBtn
{
padding-top:2px;
}
#srchBox ul
{
margin-top:6px;
text-align:left;
}
#srchBox li
{
list-style-type:none;
display:inline;
zoom:1;
padding-right:10px;
}
#srchBox li input
{
zoom:1;
margin-right:2px;
_margin:-4px 0 -4px -4px;
vertical-align:middle;
border:0;
}
*:+html #srchBox li input
{
margin:-4px 0 -4px -4px;
}
#srchBox #srchLogo
{
margin:6px 6px 6px 0;
text-align:right;
}
#srchBox #srchLogo a
{
color:#666666;
text-decoration:none;
font-size:85%;
}
#srchBox #srchLogo a:hover
{
text-decoration:underline;
}
</style>
<form action="http://custom.search.yahoo.co.jp/search" method="get" id="srch" target="yjserp">
<p id="srchForm">
<input type="text" name="p" id="srchInput"><input type="submit" value="検索" id="srchBtn">
<input type="hidden" id="fr" name="fr" value="cse">
<input type="hidden" id="ei" name="ei" value="UTF-8">
<input type="hidden" id="csid" name="csid" value="***ここには固有のコードが入ってます***">
</p>
</form>
<p id="srchLogo"><a href="http://www.yahoo.co.jp"><img src="http://i.yimg.jp/images/search/customsearch/yjlogo/yjlogo_type1_ffffff.gif" width="124" height="20" alt="powered by Yahoo! JAPAN"></a></p>
<img src="http://custom.search.yahoo.co.jp/images/window/***ここには固有のコードが入ってます***.gif">
</div>
<!-- /#srchBox -->
青字の部分が変更したところで、実際に使用したのは
<div id="srchBox">
<style type="text/css">
#srchBox
{
width:700px; ・・・ 検索バーの枠の横幅を700ｐｘに広げています。
_width:700px; ・・・ 検索バーの枠の横幅を700ｐｘに広げています。
margin-bottom:10px;
background-color:#ccffff; ・・・ 背景色を薄い青に変更
border-style:solid;
border-width:1px;
border-color:#3300ff; ・・・ 枠線を濃い青に変更
color:#000000;
text-align:left;
}
#srchBox *
{
margin:0;
padding:0;
font-size:13px;
*font-size:small;
*font:x-small;
}
#srchBox a img
{
border:none;
}
#srchBox #srch
{
padding:10px 10px 0 10px;
}
#srchBox #srch #srchForm
{
white-space:nowrap;
}
#srchBox #srchInput
{
width:570px; ・・・ 検索バーの横幅を570ｐｘに拡張
height:25px; ・・・ 検索バーの縦幅を広げるためにこの表記を追加
vertical-align:bottom;
}
#srchBox #srchBtn
{
width:100px; ・・・ 検索バーの横幅を100ｐｘに拡張
*html #srchBox #srchBtn
{
padding-top:2px;
}
*:first-child+html #srchBox #srchBtn
{
padding-top:2px;
}
#srchBox ul
{
margin-top:6px;
text-align:left;
}
#srchBox li
{
list-style-type:none;
display:inline;
zoom:1;
padding-right:10px;
}
#srchBox li input
{
zoom:1;
margin-right:2px;
_margin:-4px 0 -4px -4px;
vertical-align:middle;
border:0;
}
*:+html #srchBox li input
{
margin:-4px 0 -4px -4px;
}
#srchBox #srchLogo
{
margin:6px 6px 6px 6px;
text-align:right;
}
#srchBox #srchLogo a
{
color:#666666;
text-decoration:none;
font-size:85%;
}
#srchBox #srchLogo a:hover
{
text-decoration:underline;
}
</style>
<form action="http://custom.search.yahoo.co.jp/search" method="get" id="srch" target="yjserp">
<p id="srchForm">
<input type="text" name="p" id="srchInput"><input type="submit" value="ウェブ検索" id="srchBtn" style="background-color:#0033ff;color:#ffffff"> ・・・ 検索ボタンの色を青に、字を白抜きに変更するために追加、表記文字を検索からウェブ検索に変更
<input type="hidden" id="fr" name="fr" value="cse">
<input type="hidden" id="ei" name="ei" value="UTF-8">
<input type="hidden" id="csid" name="csid" value="***ここには固有のコードが入ってます***">
</p>
</form>
<p id="srchLogo"><a href="http://www.yahoo.co.jp"><img src="http://i.yimg.jp/images/search/customsearch/yjlogo/yjlogo_type1_ffffff.gif" width="124" height="20" alt="powered by Yahoo! JAPAN"></a></p>
<img src="http://custom.search.yahoo.co.jp/images/window/***ここには固有のコードが入ってます***.gif">
</div>
<!-- /#srchBox -->
}}
です。途中にある固有のコードというのは、Ｙａｈｏｏ！から割り当てられたプロチューＮＡＶＩのＩＤのようなものです。ですから、上記のコードをそのままコピー＆ペーストしても、うまく動かないはずです。お作りになる方は、自分でコードを取得してください。
色の指定はカラーコードで指定します。（カラーコードを見る）
次回はスタートページに登録するボタンを作るです。
そこで、インターネットのスタート（ホーム）ページに設定しても機能できるように,Yahoo!の検索バーを表示することにしました。
Yahoo!のサービスに、カスタムサーチというのがあるので、それを使用します。カスタムサーチを作るにはYahoo!ＩＤが必要なので、まだ持っていない人は、作っておいてください。
Yahoo!カスタムサーチを作る
Yahoo!IDを作る
カスタムサーチの作り方は簡単で、ウィザードの通りに作れば問題はありません。できたコードをＱＨＭのＨＴＭＬコード挿入で貼り付けます。
ただ、プロチューＮＡＶＩ は、大学受験用ページ、高校受験用ページ、小中学生用ページの３カテゴリに別れ、それぞれ大学受験は青、高校受験は緑、小中学生はピンクとサイトイメージカラーが決まってますから、できれば検索バーもそれにあわせたいです。そこで、少しコードをカスタマイズしました。
オリジナルのコードは下の通りです。
<div id="srchBox">
<style type="text/css">
#srchBox
{
width:598px;
_width:596px;
margin-bottom:10px;
background-color:#FFFFFF;
border-style:solid;
border-width:1px;
border-color:#EEEEEE;
color:#000000;
text-align:left;
}
#srchBox *
{
margin:0;
padding:0;
font-size:13px;
*font-size:small;
*font:x-small;
}
#srchBox a img
{
border:none;
}
#srchBox #srch
{
padding:10px 10px 0 10px;
}
#srchBox #srch #srchForm
{
white-space:nowrap;
}
#srchBox #srchInput
{
width:488px;
margin-right:6px;
vertical-align:bottom;
}
#srchBox #srchBtn
{
width:80px;
}
*html #srchBox #srchBtn
{
padding-top:2px;
}
*:first-child+html #srchBox #srchBtn
{
padding-top:2px;
}
#srchBox ul
{
margin-top:6px;
text-align:left;
}
#srchBox li
{
list-style-type:none;
display:inline;
zoom:1;
padding-right:10px;
}
#srchBox li input
{
zoom:1;
margin-right:2px;
_margin:-4px 0 -4px -4px;
vertical-align:middle;
border:0;
}
*:+html #srchBox li input
{
margin:-4px 0 -4px -4px;
}
#srchBox #srchLogo
{
margin:6px 6px 6px 0;
text-align:right;
}
#srchBox #srchLogo a
{
color:#666666;
text-decoration:none;
font-size:85%;
}
#srchBox #srchLogo a:hover
{
text-decoration:underline;
}
</style>
<form action="http://custom.search.yahoo.co.jp/search" method="get" id="srch" target="yjserp">
<p id="srchForm">
<input type="text" name="p" id="srchInput"><input type="submit" value="検索" id="srchBtn">
<input type="hidden" id="fr" name="fr" value="cse">
<input type="hidden" id="ei" name="ei" value="UTF-8">
<input type="hidden" id="csid" name="csid" value="***ここには固有のコードが入ってます***">
</p>
</form>
<p id="srchLogo"><a href="http://www.yahoo.co.jp"><img src="http://i.yimg.jp/images/search/customsearch/yjlogo/yjlogo_type1_ffffff.gif" width="124" height="20" alt="powered by Yahoo! JAPAN"></a></p>
<img src="http://custom.search.yahoo.co.jp/images/window/***ここには固有のコードが入ってます***.gif">
</div>
<!-- /#srchBox -->
青字の部分が変更したところで、実際に使用したのは
<div id="srchBox">
<style type="text/css">
#srchBox
{
width:700px; ・・・ 検索バーの枠の横幅を700ｐｘに広げています。
_width:700px; ・・・ 検索バーの枠の横幅を700ｐｘに広げています。
margin-bottom:10px;
background-color:#ccffff; ・・・ 背景色を薄い青に変更
border-style:solid;
border-width:1px;
border-color:#3300ff; ・・・ 枠線を濃い青に変更
color:#000000;
text-align:left;
}
#srchBox *
{
margin:0;
padding:0;
font-size:13px;
*font-size:small;
*font:x-small;
}
#srchBox a img
{
border:none;
}
#srchBox #srch
{
padding:10px 10px 0 10px;
}
#srchBox #srch #srchForm
{
white-space:nowrap;
}
#srchBox #srchInput
{
width:570px; ・・・ 検索バーの横幅を570ｐｘに拡張
height:25px; ・・・ 検索バーの縦幅を広げるためにこの表記を追加
vertical-align:bottom;
}
#srchBox #srchBtn
{
width:100px; ・・・ 検索バーの横幅を100ｐｘに拡張
*html #srchBox #srchBtn
{
padding-top:2px;
}
*:first-child+html #srchBox #srchBtn
{
padding-top:2px;
}
#srchBox ul
{
margin-top:6px;
text-align:left;
}
#srchBox li
{
list-style-type:none;
display:inline;
zoom:1;
padding-right:10px;
}
#srchBox li input
{
zoom:1;
margin-right:2px;
_margin:-4px 0 -4px -4px;
vertical-align:middle;
border:0;
}
*:+html #srchBox li input
{
margin:-4px 0 -4px -4px;
}
#srchBox #srchLogo
{
margin:6px 6px 6px 6px;
text-align:right;
}
#srchBox #srchLogo a
{
color:#666666;
text-decoration:none;
font-size:85%;
}
#srchBox #srchLogo a:hover
{
text-decoration:underline;
}
</style>
<form action="http://custom.search.yahoo.co.jp/search" method="get" id="srch" target="yjserp">
<p id="srchForm">
<input type="text" name="p" id="srchInput"><input type="submit" value="ウェブ検索" id="srchBtn" style="background-color:#0033ff;color:#ffffff"> ・・・ 検索ボタンの色を青に、字を白抜きに変更するために追加、表記文字を検索からウェブ検索に変更
<input type="hidden" id="fr" name="fr" value="cse">
<input type="hidden" id="ei" name="ei" value="UTF-8">
<input type="hidden" id="csid" name="csid" value="***ここには固有のコードが入ってます***">
</p>
</form>
<p id="srchLogo"><a href="http://www.yahoo.co.jp"><img src="http://i.yimg.jp/images/search/customsearch/yjlogo/yjlogo_type1_ffffff.gif" width="124" height="20" alt="powered by Yahoo! JAPAN"></a></p>
<img src="http://custom.search.yahoo.co.jp/images/window/***ここには固有のコードが入ってます***.gif">
</div>
<!-- /#srchBox -->
}}
です。途中にある固有のコードというのは、Ｙａｈｏｏ！から割り当てられたプロチューＮＡＶＩのＩＤのようなものです。ですから、上記のコードをそのままコピー＆ペーストしても、うまく動かないはずです。お作りになる方は、自分でコードを取得してください。
色の指定はカラーコードで指定します。（カラーコードを見る）
次回はスタートページに登録するボタンを作るです。