【HTMLメモ】ブログ内検索のタグ編集あおぞらぱれっと　－ BIGLOBE館

【HTMLメモ】ブログ内検索のタグ編集

<< 作成日時： 2008/10/22 23:49 >>

こばわー☆758fishです。

…ふぅ。
プロ野球セ・リーグ。セカンドステージ第１戦目、ドラゴンズ勝利。
選手のみなさん、お疲れ様でした。
道は長くありますが、大勝利をいつも祈っています♪

さーて。前の記事で、ブログ内検索を追加した話がありましたが、これを設置するために２日もかかっていました。
なんとなーくしかHTMLを知らないので、どれほど迂回したことか。

こんなに頑張ったんだから、メモがてら残しておこうと思いつき。

そゆわけで、今回の記事は、ブログ内検索のHTML（ウェブリブログ版）設置奮闘記です。
ご指摘等ありましたら、コメント欄にお願いします。お姿見せたくない方は、メッセージやweb拍手からの投稿が可能です。

ＰＣ向けなお話なので、つまんないかも。ごめんね。

とにかく、記事の長さはまた新記録しちゃった。
読破される方は、お覚悟をバッチリしてから進んでくださいね。

※10月25日追記
記事の最後に、タグ編集で参考にさせていただいたサイトさんを紹介していますが、記事がホントに長いため、最後まで読んでいただけるか不安です。だって、疲れるもん(笑)
なので、記事始めにも紹介しておきます♪

みなさん大変お世話になりました。
どうもありがとうございました。
◆ＴＡＧ index
　HTMLタグの一覧です。
◆蓄々HTML実体参照変換
　akiyan.comより。いつものタグを入力すると、「<」や「>」、「"」だけを16進数に変換してくれます。便利ですよー。
◆狂った欲望の記録。
　livedoorブログ。ブログ内検索のタグ編集の記事を参考。記事の編集も参考になりました。
　トップページはこちら→http://kuruyoku.jp/
　写真がお好きな管理人さんです。
　758fishのお気に入りは、東京タワー。以下の記事３連打も面白いです。写真オンチでも見入ってしまいます^^
　東京タワー(再)01
　東京タワー(再)02
　東京タワー(再)03　
◆livedoor knowledge
　HTMLやCSSのことは、いつもＬＤＫで質問しています。解決率100%♪　
　トップページはこちら→http://knowledge.livedoor.com/

　☆　☆　☆

あおぱれ本館では、すでに設置していたブログ内検索。
このタグを、ここにコピペしてチョイチョイってやればいっか♪と無計画行動を敢行。
おかげさまで、すばらしい難産（便秘？）をさせていただきました。

まず、本館からタグをコピペ。
本来は、Googleが提供しているGoogle パブリックサービス検索のフリー検索用タグを使いますが、すでに本館用にタグを加工しています。

次のタグを、本館で使っています。
URLは、ＢＬ館用に修正しました。赤い文字のところがそれです。
http://は省略しておきます。

<div align=center>
<form method=get action="http://www.google.co.jp/search" >
<table bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0><tr><td>
<input type=text name=q size=21 maxlength=255 value="">
<input type=submit name=btnG value="検索">
<input type=hidden name=ie value=EUC-JP>
<input type=hidden name=oe value=EUC-JP>
<input type=hidden name=hl value="ja">
<input type=hidden name=domains value="758fish.at.webry.info/">
<input type=hidden name=sitesearch value="758fish.at.webry.info/">
<br>
<a href="http://www.google.co.jp/"><img src="http://www.google.co.jp/logos/powered_by_google_135x35.gif" border="0" alt="Google" align="absmiddle"></a>
</td></tr></table>
</form>
</div>

さ、これでおしまい♪
…と思ったら、大誤算。
あちゃー、甘かった。左に寄ってる。

試しに検索してみる。

始めの青い字のタグに注目ぅ。

検索は別ウィンドウを開かせたいので、このタグの最後に target="_blank"を追加します。
最初に半角スペースを入れるのを忘れないでね。

（追加後）

うーん。検索→検索結果画面に遷移するとキーワードが文字化けしちゃうのはナゼ？
これでは、検索結果は０件のまま。
原因は、文字コードが本館（livedoor）用のままだったから。
２箇所のEUC-JPについて、ウェブリブログ用の文字コードに直します。
（修正前）

（修正後）

えっと、文字コードは３種類しかないそうです。
　Shift_JIS
　EUC-JP
　ISO-2022-JP
文字コードは、文字化けしないようにする役目があるので、これは大切な設定ですね。
ウェブリブログの文字コードが、Shift_JISであることを確かめることが出来ます。
ウェブリブログの画面のままで、メニューバーの[表示(V)]－[ソース(C)]を選択。タグがいっぱい並んだメモ帳が開きます。
最初の<head>のすぐ後に、文字コードの宣言を発見。それが答えです。

…ふぅ。
この記事の編集、すごい疲れる(笑)
これでもタグが列挙されてますが、こうしてきれいに見えるように、さらにタグを使用してます。
いやー慣れないことはやるもんじゃな…いやっ違うわっ☆ドアラさんはいろんなお仕事を日々こなしてるのよっ（執筆が一番大変だったろうなあ☆笑）、こんな事言ってちゃダメよっ！壊
…と、鼓舞して昆布茶で休憩入りまーす♪

旦~　（休憩中）

はい、復活ぅ♪
一旦、全体を確かめてみましょう。
赤い文字が修正したところです。

<div align=center>
<form method=get action="http://www.google.co.jp/search" target="_blank">
<table bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0><tr><td>
<input type=text name=q size=21 maxlength=255 value="">
<input type=submit name=btnG 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=hidden name=domains value="758fish.at.webry.info/">
<input type=hidden name=sitesearch value="758fish.at.webry.info/">
<br>
<a href="http://www.google.co.jp/"><img src="http://www.google.co.jp/logos/powered_by_google_135x35.gif" border="0" alt="Google" align="absmiddle"></a>
</td></tr></table>
</form>
</div>

むーぅん。なんで左に寄るかなあ。中央揃いにしたいのに。
犯人は、div alignタグ？
divは、対象のタグをひとまとめにする意味があるのですが、サイドバーの幅が狭いここでは必要のない気がするので、シンプルな中央揃えタグに変更します。
（修正前）

（修正後）

全体を見てみます。
赤い文字が、修正したところ。

<center>
<form method=get action="http://www.google.co.jp/search" target="_blank">
<table bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0><tr><td>
<input type=text name=q size=21 maxlength=255 value="">
<input type=submit name=btnG 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=hidden name=domains value="758fish.at.webry.info/">
<input type=hidden name=sitesearch value="758fish.at.webry.info/">
<br>
<a href="http://www.google.co.jp/"><img src="http://www.google.co.jp/logos/powered_by_google_135x35.gif" border="0" alt="Google" align="absmiddle"></a>
</td></tr></table>
</form>
</center>

おや？　疑問点発見。

このtableタグは表を作成するタグですが、アナタはだあれ？
調べたら、Google パブリックサービス検索のフリー検索用タグの名残でした。
ここではあまり役に立ってないと思うので、削除。
brタグ（改行）も１つ紛れていますが、幅が狭いサイドバーでは、複数並べなければ強制改行されるので、brの意味がないため削除。
タグは、シンプルにするのがコツだそうです。
（修正後）

<center>
<form method=get action="http://www.google.co.jp/search" target="_blank">
~~<table bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0><tr><td>~~
<input type=text name=q size=21 maxlength=255 value="">
<input type=submit name=btnG 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=hidden name=domains value="758fish.at.webry.info/">
<input type=hidden name=sitesearch value="758fish.at.webry.info/">
~~<br>~~
<a href="http://www.google.co.jp/"><img src="http://www.google.co.jp/logos/powered_by_google_135x35.gif" border="0" alt="Google" align="absmiddle"></a>
~~</td></tr></table>~~
</form>
</center>

結果はこんなかんじ。
centerタグはアタリね。

結果の見栄えがイマイチなので、もう少し頑張ってみます。
理想は、
◆Googleロゴ・キーワード入力欄・検索ボタンの３段構成にする。
◆検索ボタンの名前を、「検索」→「ブログ内検索」にする。

これから修正する箇所を、緑色にしています。
（修正前）

<center>
<form method=get action="http://www.google.co.jp/search" target="_blank">
<input type=text name=q size=21 maxlength=255 value="">
<input type=submit name=btnG 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=hidden name=domains value="758fish.at.webry.info/">
<input type=hidden name=sitesearch value="758fish.at.webry.info/">
<a href="http://www.google.co.jp/"><img src="http://www.google.co.jp/logos/powered_by_google_135x35.gif" border="0" alt="Google" align="absmiddle"></a>
</form>
</center>

先に、検索ボタンの名前を狙い撃ち。
ボタン名を変更し、ブログ内検索専用を明確にします。
（修正前）

（修正後）

次に、３段構成にします。
Googleロゴ・キーワード入力欄・検索ボタンの順です。
ロゴ（画像）にはGoogleへリンクが張ってあるので、タグの目印は、hrefタグとimg srcタグがセットになっていること。
これですね。

そのタグのセットを、

このfromタグの下に移動します。

（修正前）

<center>
<form method=get action="http://www.google.co.jp/search" target="_blank">
<input type=text name=q size=21 maxlength=255 value="">
<input type=submit name=btnG 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=hidden name=domains value="758fish.at.webry.info/">
<input type=hidden name=sitesearch value="758fish.at.webry.info/">
<a href="http://www.google.co.jp/"><img src="http://www.google.co.jp/logos/powered_by_google_135x35.gif" border="0" alt="Google" align="absmiddle"></a>
</form>
</center>

（修正後）

<center>
<form method=get action="http://www.google.co.jp/search" target="_blank">
<a href="http://www.google.co.jp/"><img src="http://www.google.co.jp/logos/powered_by_google_135x35.gif" border="0" alt="Google" align="absmiddle"></a>
<input type=text name=q size=21 maxlength=255 value="">
<input type=submit name=btnG 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=hidden name=domains value="758fish.at.webry.info/">
<input type=hidden name=sitesearch value="758fish.at.webry.info/">
</form>
</center>

ちょっと結果を見てみます。
だいぶイメージに近づいてきました。
もう少しで完成です。
しーっかし、長い記事ですね。

プラグインの名前（「なんかいろいろ」）とロゴの間に少し余白を入れたいです。
brタグを、先頭に追加します。
（修正前）

<center>
<form method=　以下省略

（修正後）

<br>

<center>
<form method=　以下省略

よし。
あ、もう一つ気になるところ発見。
キーワード入力欄の幅サイズが、21になってます。
中途半端なので、20にします。
（修正前）

（修正後）

…よし♪
全体を確認ですっ^^
赤い文字が修正したところです。

結果はこれ。
やったー♪　完成(TvT)感涙

ＢＬ館用のタグ編集で、気がついたこと。
→本館用のタグ、結構無駄が多かったみたい…。

　☆　☆　☆

なんとまー、タグの完成までといい、この記事の編集といい、長い道のりでした。…ふぅ。
ったく、HTMLは詳しくないのに、ドアラさん曰く「よくやるよねー」（「ドアラの休日」おまけ編より）。

意外な難所、実はこの記事編集にありました。
しかも２つ。
１つは、タグ内のGoogle専用のタグやURLが、そのまま反映してしまうこと。
どうすれば文字列として表記できるのか悩みました。
簡単なのは、Google専用タグやURLの一文字を全角にすればいいのだけれど、これではコピペには向かないし、タグの数が多いから、実用的ではありません。
タグの１文字だけをコード表記で記事編集すればいい、ってのはフツーに構想できたのですが、「そのコードって何よ？」という疑問に行き詰まり。
webをさまよい、10進数とか16進数というのを知りました。
このコたちの名前はよく耳にしてたけど、こういうとこで活躍するコだったのね～。

２つめは、タグを囲んでる罫線の表示について。
borderタグは使いたくなかったので、理想の線種で表示させる術がわからず、これも悩みました。
livedoor knowledgeで、CSSをいじくることを知りました。
CSSのblockquoteという表記のすぐ下に、次のタグを追加。何箇所かありますが、各個追加しちゃいます。
よいしょ。

.box{
border: 1px solid #C0C0C0;
padding: 5px 5px 5px 5px;
background: #ffffff;
}

うむ。
これで、いいのかな？
えっへん。
これで、<div class="box">～</div>が使えるようになりました♪

タグの使い方は、ちょっと検索すればいろんなところで紹介されています。
この記事は、あくまで758fishのメモ的なものであり、タグ活用の実践場なので、わかりにくいかも。
もちろん、参考にして下さってもかまいません。
タグの誤った使い方など発見されましたら、どうかご指摘いただきたいと思います。

今回、参考にしたサイトの数々。大変お世話になりました。
どうもありがとうございました。
◆ＴＡＧ index
　HTMLタグの一覧です。
◆蓄々HTML実体参照変換
　akiyan.comより。いつものタグを入力すると、「<」や「>」、「"」だけを16進数に変換してくれます。便利ですよー。
◆狂った欲望の記録。
　livedoorブログ。ブログ内検索のタグ編集の記事を参考。記事の編集も参考になりました。
　トップページはこちら→http://kuruyoku.jp/
　写真がお好きな管理人さんです。
　758fishのお気に入りは、東京タワー。以下の記事３連打も面白いです。写真オンチでも見入ってしまいます^^
　東京タワー(再)01
　東京タワー(再)02
　東京タワー(再)03　
◆livedoor knowledge
　HTMLやCSSのことは、いつもＬＤＫで質問しています。解決率100%♪　
　トップページはこちら→http://knowledge.livedoor.com/

最後になりましたが、こんな最後まで読んでくださったみなさんも、お疲れ様でした!!

ケータイ用web拍手BL

<< 前記事(2008/10/20)

ブログのトップへ

後記事(2008/11/03) >>

月別リンク

トラックバック（1件）

タイトル（本文）	ブログ名／日時
最強SEO対策情報！ちょっとよってみました、良いブログですね、これからも拝見させていただきます。 ...続きを見る	思い付き日記 2008/10/23 13:25

コメント（0件）

内容	ニックネーム／日時

<< 前記事(2008/10/20)

ブログのトップへ

後記事(2008/11/03) >>

あおぞらぱれっと　－ BIGLOBE館－