2015　0112
シリウスはてな？カスタマイズ　　検索窓を設置しよう

 

サイトのトップページのいずこかにヤフーかグーグルの検索窓を
設置しているブログやサイトをよく見かけます

 

 

読者サービスの一つ

 

せっかく来訪いただいたお客様がどこかに行っちゃうとの不安もございますが

 

検索順位の上位サイトに設置されていることもございまして

 

何とも特定の評価のできないところです

 

 

自己満足の範疇かな？

 

とも思っているところです

 

 

ですので　採用したい方だけご利用ください

 

 

以下に作動する検索窓を配置しておりますが　Googleの場合
当サイトではＣＳＳをいじりすぎているため正常なカラーで
表示されませんが

 

通常サイトなら　背景は白で正常に反映されます

 

 

文字コード指定がございます

 

Unicode（UTF-8）の場合はutf-8

 

Shift_JISの場合はShift_JIS

 

EUCの場合はeuc-jp

 

サイトの文字コードに合わせて書き換えてください

 

▲▲▲の部分が文字コードを記載する箇所です

 

 

ヤフーの検索窓です

 

張り付けコード
コード一番上の</p>の記号文字は削除してください

 

<!-- Begin Yahoo Search Form --> <div style="margin:0;padding:0;font-size:14pt;border:none;background-color:#FFF;"><form action="http://search.yahoo.co.jp/search" method="get" target="_blank" style="margin:0;padding:0;"> <p style="margin:0;padding:0;"><a href="http://www.yahoo.co.jp/" rel="noopener" target="_blank"><img class="lazyload" data-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:0;border:0;" width="85" height="22"><noscript><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:0;border:0;" width="85" height="22"></noscript></a><input type="text" name="p" size="28" style="margin:0 3px;width:50%;vertical-align:middle;"><input type="hidden" name="fr" value="ysswb"><input type="hidden" name="ei" value="▲▲▲"><input type="image" height="21" alt="検索" width="45" src="http://i.yimg.jp/images/search/searchfy/btn_search_blue.gif" border="0" name="search" style="margin:0; vertical-align:middle;"></p> </form> <p><img class="lazyload" data-src="http://custom.search.yahoo.co.jp/images/window/006c75a92ba244c6b4cbe2709aa17d7b.gif" width="1" height="1" style="display:block;position:absolute"><noscript><img src="http://custom.search.yahoo.co.jp/images/window/006c75a92ba244c6b4cbe2709aa17d7b.gif" width="1" height="1" style="display:block;position:absolute"></noscript></p></div> <!-- End Yahoo! Search Form -->

 

 

ヤフーでは　このほかに定義別に設置する検索コード
誰でも利用できるよう配布されております

 

記事内はもちろん　サイドバーへも配置は可能です

 

注意ごとも含めヤフーサイト　こちらで詳細をご覧ください
http://custom.search.yahoo.co.jp/statics/

 

 

簡単カスタマイズ

 

横幅は自動で調整されますが　いまいち縦幅が不足と思われましたら

 

height=22の数値を大きくしてください

 

 

 

---

 

グーグル検索窓

 

 

 

 

 

貼り付けコード
コード一番上の</p>の記号文字は削除してください

 

<!-- Google --> <form method=get action="http://www.google.co.jp/search"> <table bgcolor="#FFFFFF"> <tr> <td> <p><a href="http://www.google.co.jp/"><br><img class="lazyload" data-src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"><noscript><img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></noscript></a></p> <input type=text name=q size=31 maxlength=255 value=""> <input type=hidden name=ie value=Shift_JIS> <input type=hidden name=oe value=Shift_JIS> <input type=hidden name=hl value="ja"> <input type=submit name=btnG value="Google 検索"> </td> </tr> </table> </form> <!-- Google -->

 

カスタマイズしてみました

 

記事内に取り付ける場合は　このサイズでもよいかもしれませんが

 

サイドバーに取り付ける場合は　Googleロゴは省いたほうが良いでしょう

 

 

サイドバー　幅サイズ300に取り付けた例です

 

このようなスタイルに変更

 

四行目　imgからはじまる記述の削除をしました

 

サイドバーに上手くサイズが合わない場合は　サイズ指定の変更で
対処頂けます

 

変更後の記述コード

<form method=get action="http://www.google.co.jp/search"> <p><a href="http://www.google.co.jp/"></a></p> <input type=text name=q size=33 maxlength=255 value=""> <input type=hidden name=ie value=Shift_JIS> <input type=hidden name=oe value=Shift_JIS> <input type=hidden name=hl value="ja"> <input type=submit name=btnG value="Google 検索"> </form>

 

 

グーグル検索窓につきましての詳細は　グーグル検索窓という
キーワードでお調べください

 

スポンサーリンク

 

 

 

シリウスにヤフーとグーグルの公式検索窓追加カスタマイズ
シリウスの番外編カスタム＆はてな？と思うご利用方法
シリウスカスタマイズトップ