« ココログのカスタムCSSの編集~メニューの作成~ | トップページ | ココログのカスタムCSSの編集~IE6ショック~ »

2008年2月 4日 (月)

ココログのカスタムCSSの編集~Google検索ボックスの設置~

ブログのタイトル位置に、ブログ内検索ができるGoogle検索ボックスを取り付けてみます。ココログロゴの横にも検索ボックスはありますが、ここは敢えてGoogle検索を置いてみます。

↓こんな感じの検索ボックスをタイトル位置に置きます。

Google
WWW を検索 http://shirabemono.cocolog-nifty.com/blog/ を検索
  • カスタムCSSの編集
      div.ggsearch{
        float:right;
        position:relative;
        top:-1em;
      }
    • "float:right"は、検索ボックスの位置を右寄せするための設定です。
    • "position:relative"は、位置を相対座標で指定するための設定です。
    • "top:-1em"は、相対位置指定で上からの位置を-1em、つまり1文字分上に移動する設定です。右寄せしただけだと位置が下ぎみなので、上にずらしました。
  • HTMLの編集
    検索ボックスはブログトップに置きたいので、記事中に書くのではなく、「ブログのサブタイトル」に書きます。「ブログのサブタイトル」は、ブログ管理ページの「設定」タブで編集することができます。次のHTMLを、今設定しているブログのサブタイトルに続けて追加するだけです。
      <div class="ggsearch">
      <!-- SiteSearch Google -->
      <center>
      <form method=get action="http://www.google.co.jp/search">
      <table bgcolor="#FFFFFF"><tr valign=top><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=Shift_JIS>
      <input type=hidden name=oe value=Shift_JIS>
      <input type=hidden name=hl value="ja">
      <input type=submit name=btnG value="Google 検索">
      <font size=-1>
      <input type=hidden name=domains value="YOURSITE.CO.JP"><br>
      <input type=radio name=sitesearch value=""> WWW を検索
      <input type=radio name=sitesearch value="YOURSITE.CO.JP" checked> YOURSITE.CO.JP を検索
      </font>
      </td></tr></table>
      </form>
      </center>
      <!-- SiteSearch Google -->
      </div>
    • 単にGoogleフリー検索(ベーシック版)のコードを、CSS設定をしたdivタグで挟んでいるだけです。
    • "YOURSITE.CO.JP"3箇所は、検索したいサイトのURLに置き換えます。
    • "Shift_JIS"2箇所は、"UTF-8"に置き換えます。ココログの文字エンコードがUTF-8であるためです。
  • 参考サイト
    Googleフリー検索(http://www.google.co.jp/intl/ja/searchcode.html)

« ココログのカスタムCSSの編集~メニューの作成~ | トップページ | ココログのカスタムCSSの編集~IE6ショック~ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/17957899

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~Google検索ボックスの設置~:

« ココログのカスタムCSSの編集~メニューの作成~ | トップページ | ココログのカスタムCSSの編集~IE6ショック~ »