« 「Nvu 1.0」正式公開。アフィリエイトやココログやるならHTMLエディタくらい使わなきゃね。 | トップページ | 以前から図に描いて理解したりするの好きでした。 »

2005年7月 2日 (土)

カスタマイズしたGoogle検索窓が欲しいなら、やり方はこれ。

 ブログをやっていると、アクセスカウンターと同様、Google検索窓なんて欲しくなりますね。そんな時のやり方、

1、Google AdSenseにログインしたら、サーチ設定タブをクリック。

2、サイトの言語「日本語」、国「日本」。

3、サンプルの所で「Google SiteSearch」のラジオボタンを選択。

4、「 サイト検索のドメインを3つまで入力ください  複数のドメインは セミコロン " ; " で区切ってください。 」の所で、指示通り入力。
例、僕の場合、「cocolog-nifty.com;soba.txt-nifty.com」を入力。
 前半がココログ用、後ろがひなたぼっこ用

5、「テキストボックスの長さ」で「15」文字列と入力。(サイドエリア設置ではこのくらいが適当。あくまでもボックスの長さ、デザイン上の設定です。入力時にはもっと多数の文字を入力できるので問題はない。

6、レイアウト オプションでは「テキストボックスの上の Google ロゴ」にチェック。(サイドエリアは狭いので)

7、「お客様のサイトのエンコード」で「Unicode(UTF-8)」を選択。
※そうしないと、検索結果が文字化けする。ここでやり忘れたら、あとで、タグ中「Shift_Jis」とあるところを「UTF-8」にしても良い。
参考、「Google検索と文字化けや検索不具合。

8、「コードを更新」ボタンをクリックし、Google 検索ボックスコードの所で、ボックスの所をクリックするとタグが選択状態になるので「Ctrl+C」でコピーする。

9、HTMLエディタのNvu(エヌビュー)を立ち上げ、下の「source」タブをクリック、上記8のタグを貼り付ける。「preview」タブで見て、(画像参照)
※なお、
Nvu(エヌビュー)は、Mozillaから派生したオープンソース高機能HTMLエディタです。もちろん無料です。
(画像をクリックすると拡大します。)

20050702google

と出ているのを確認。

10、再度「source」タブをクリックして、inputタグ中の二番目の「cocolog-nifty.com」を「ココログ」、また二番目の「soba.txt-nifty.com」を「ひなたぼっこ」あるいは「当サイト」などと修正する。

11、下の「Normal」をクリックして切り替えると、その通り表示されている。(画像参照)
(下記以下の部分は、追記を参考にしていただく方法もあります。エディタを使いなれている人はその方が簡単です。)

200507022google

12、枠を右クリックして、Table Insert→Row Belowとして、枠列を下に追加する。

13、ラジオボタンを含めて「ひなたぼっこ」「ココログ」を「Web」の下の枠にコピペしなおす。

14、開いた枠列はそのままにしておいても良いが、練習を兼ねて「赤丸」の所をクリックしてみる。そうすれば余分な枠は消える。(画像参照)

200507023google

15、「preview」タブに切り替えると綺麗に仕上がっているのが分かる。「source」タブに切替えて出来上がったタグをサイドエリアなどにコピペすればよい。


追記、11以下の作業箇所ですが、「Nvu(エヌビュー)」ではレイアウトだけ確認し、「へてむるクリエイタ~」で表(テーブル)を書き直し、サイト検索のデータ部分(サイトデータの直前・直後の<td></td>で囲まれた部分)をコピペし直して並べ替えてしまうという手もあります。僕はどちらかと言うとこちらの方が好み。「Nvu(エヌビュー)」はそこそこに高機能なのでタグ的に余計な記述が増えるからです。Googleの検索窓向けAdSenseでチャネル管理を利用している場合、生成されたタグのうち、並べ替えた<table></table>で囲まれた部分を差し替えればよい。「へてむるクリエイタ~」で表を書くやり方は関連投稿を参考にしてください。

 なお、デフォルトではラジオボタンの選択がWebになっています。
<input type="radio" name="sitesearch" value="" checked="checked"></input>
<font size="-1" color="#000000">Web</font>

このタグの内の「checked="checked」がそれです。この部分を最初から選択状態にしたいタグの方にコピペしなおします。僕のココログでは「当サイト」のところに設定しなおしてます。

関連投稿
ひどい誤解だ。ココログはベーシックの無料コースだってカウンタ設置も検索窓設置もできるよ。
「Nvu 1.0」正式公開。アフィリエイトやココログやるならHTMLエディタくらい使わなきゃね。
ブログやココログやるなら、エディタくらい使わなきゃね。
ブログで表を表示させたい時のタグ表記はこれ。
ココログのスタート時最低限ツール&カスタマイズは多分これ。そしてブログで挫折しない為のやり方とは。

エディタ解説本、昔は少なかったが、今は結構ありますネ。
こんな感じで英辞郎を使ってます。
QXエディタと辞書引きと英辞郎設定のやり方。
DokoPopで更に便利に英辞郎。便利だぁ~ぁぁ!
QTClipは必需品、ココログ・アフィリエイトをやるからには。」(QTClipはQXエディタ、QGrep
の姉妹ソフトです。但し、単体で使えるフリーソフトです。)

おじさんのIT的情報生活、日々発見・感激・進化の日記&備忘録に共感する人はバナークリック(^^;⇒汗
人気blogランキングバナー

|

« 「Nvu 1.0」正式公開。アフィリエイトやココログやるならHTMLエディタくらい使わなきゃね。 | トップページ | 以前から図に描いて理解したりするの好きでした。 »

コメント

トラックバックとダブルで失礼します。折角コメントいただいたGoogleの検索窓ですが、同日中に修正できておりまして(よろしければトラックバックさせていただいた記事をご参照ください)、ロゴがちょっと大きいかな~と思いつつも快適に利用中です。HTMLはほんのちょっとかじっただけなんで、手こずりながらやってます。ちょくちょく遊びに来てますんで、また新しい情報あったらお願いします。ではでは。

投稿: いいぶう | 2005年7月 3日 (日) 13時42分

はじめまして。
先日、コメントを頂いたharukaです。
かなりの初心者なので、これからコツコツいろんな事に挑戦していきたいと思っていますので、とても参考になりそうです。
困った時にはまた覗きに来たいと思います。
ありがとうございました。

投稿: haruka | 2005年7月 4日 (月) 22時07分

 コメント有難うございました。今から、アクセスカウンターと代格闘させて頂きます。これからも宜しくお願いします。

投稿: ハーブ | 2005年7月 7日 (木) 21時45分

 カウンター設置と写真完了しました!!!!!!!バンザイ!!!!!!!!
もしよければ、ここのプログをリンクに貼りたいと考えているのですが宜しいでしょうか?プログのほうにメール送信できるようにしたので、ご回答お待ちしてます。これからも宜しくお願いします。

投稿: ハーブ | 2005年7月 9日 (土) 19時15分

はじめまして、さゆみです。
先月からブログを書き始めたばかりで、やっと今日私も検索窓を設置しました!!!今度は、アクセスカウンターを設置したいと思います。
楽しみながら、少しずつ見てくださる方に楽しんでもらえるようなブログを書き続けていきたいな~~と思います♪
これからも、お手本にさせて頂きたいと思いますので、宜しくお願いします。

投稿: | 2005年7月14日 (木) 10時50分

この記事、とても参考になりました。
SOBAさんのおかげで
検索窓を設置することが出来ました。
ありがとうございました。

投稿: hitoto40 | 2005年8月22日 (月) 18時15分

コメントを書く



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


コメントは記事投稿者が公開するまで表示されません。



トラックバック

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

この記事へのトラックバック一覧です: カスタマイズしたGoogle検索窓が欲しいなら、やり方はこれ。:

» Google検索窓修正しました。 [いいぶうの一病息災な日常]
 Googleの検索窓の設置方法は、Google AdSenseのページでは難し [続きを読む]

受信: 2005年7月 3日 (日) 13時28分

« 「Nvu 1.0」正式公開。アフィリエイトやココログやるならHTMLエディタくらい使わなきゃね。 | トップページ | 以前から図に描いて理解したりするの好きでした。 »