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

こばわー☆758fishです。

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

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

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

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

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

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

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

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

 ☆ ☆ ☆

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

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

次のタグを、本館で使っています。
URLは、BL館用に修正しました。赤い文字のところがそれです。
http://は省略しておきます。
<!-- SiteSearch Google -->
<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>
<!-- SiteSearch Google -->

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

試しに検索してみる。
画像

始めの青い字のタグに注目ぅ。
<form method=get action="http://www.google.co.jp/search">

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

(追加後)
<form method=get action="http://www.google.co.jp/search" target="_blank">

うーん。検索→検索結果画面に遷移するとキーワードが文字化けしちゃうのはナゼ?
これでは、検索結果は0件のまま。
原因は、文字コードが本館(livedoor)用のままだったから。
2箇所のEUC-JPについて、ウェブリブログ用の文字コードに直します。
(修正前)
<input type=hidden name=ie value=EUC-JP>
<input type=hidden name=oe value=EUC-JP>

(修正後)
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>


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


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


旦~ (休憩中)


はい、復活ぅ♪
一旦、全体を確かめてみましょう。
赤い文字が修正したところです。
<!-- SiteSearch Google -->
<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>
<!-- SiteSearch Google -->

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

(修正後)
<center>
(省略)
</center>

全体を見てみます。
赤い文字が、修正したところ。
<!-- SiteSearch Google -->
<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>
<!-- SiteSearch Google -->

おや? 疑問点発見。
<table bgcolor="#FFFFFF" border=0 cellspacing=0 cellpadding=0><tr><td>

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

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

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

これから修正する箇所を、緑色にしています。
(修正前)
<!-- SiteSearch 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>
<!-- SiteSearch Google -->

先に、検索ボタンの名前を狙い撃ち。
ボタン名を変更し、ブログ内検索専用を明確にします。
(修正前)
<input type=submit name=btnG value="検索">

(修正後)
<input type=submit name=btnG value="ブログ内検索">


次に、3段構成にします。
Googleロゴ・キーワード入力欄・検索ボタンの順です。
ロゴ(画像)にはGoogleへリンクが張ってあるので、タグの目印は、hrefタグとimg srcタグがセットになっていること。
これですね。
<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 method=get action="http://www.google.co.jp/search" target="_blank">
このfromタグの下に移動します。

(修正前)
<!-- SiteSearch 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>
<!-- SiteSearch Google -->

(修正後)
<!-- SiteSearch Google -->
<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>
<!-- SiteSearch Google -->

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


プラグインの名前(「なんかいろいろ」)とロゴの間に少し余白を入れたいです。
brタグを、先頭に追加します。
(修正前)
<!-- SiteSearch Google -->
<center>
<form method= 以下省略

(修正後)
<br>
<!-- SiteSearch Google -->
<center>
<form method= 以下省略

よし。
あ、もう一つ気になるところ発見。
キーワード入力欄の幅サイズが、21になってます。
中途半端なので、20にします。
(修正前)
<input type=text name=q size=21 maxlength=255 value="">

(修正後)
<input type=text name=q size=20 maxlength=255 value="">

…よし♪
全体を確認ですっ^^
赤い文字が修正したところです。
<br>
<!-- SiteSearch Google -->
<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=20 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>
<!-- SiteSearch Google -->

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


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

 ☆ ☆ ☆

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

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

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

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

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

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

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


ケータイ用web拍手BL

この記事へのコメント

DaiterVaf
2017年01月13日 12:00
У нас реальные знакомства для секса возможны всего за несколько кликов мышкой!
В нашу сеть впервые внедрены современные технологии! Мы единственные кто использует нейронные сети для подбора парней и девушек, для подбора партнера нужно ответить всего на несколько простых вопросов, в несколько кликов мышкой! Никаких громоздких текстовых полей заполнять больше нету необходимости.
http://goo.gl/ASpkJK
Herbertonext
2017年06月10日 21:41
磊[]� 肛[]イタリア国旗� ���
�ⅱ褊浯� 肛[]イタリア国旗� 韵


ミ裙頌割マーク璋� ��� 韆裘
ミ裙頌割マーク璋� ��� 葢� 蒻四角数字1��
ミ裙頌割マーク璋� ��� 珞四角数字0鈞粽蓴��
ミ裙頌割マーク璋� ��� 竟ⅲ割マークUSA
ミ裙頌割マーク璋� ��� �瑩四角数字4渼�



https://goo.gl/YWjWHa
RonaldWaw
2017年07月31日 02:02
Good afternoon let's get together I want you to Bang me in an adult my nickname (Albina91)

Copy the link and go to me... bit.ly/2uLzsaX




ハⅰ頏四角数字1 隝�� � 糂[]粱�鶯� 褄琺四角数字1 �ⅱⅳ�� 肛[]イタリア国旗� � �顏頸� �淲 浯 �� 瑙�褪�. ム�瑰鞦�
Kopieer en plak de link naar een korte registratie te maken en contact met mij op mijn profiel. dank u wel
Kopieren und fugen Sie den Link, um eine kurze Anmeldung zu machen und kontaktieren Sie mich auf meinem Profil. Vielen Dank

bit.ly/2uLzsaX
StevenNEERE
2017年09月12日 21:57
粨炅魵鐱 琲 �
浯��淲韭 �
粨炅魵鐱 琲 �頸� � �
Inessa Ric
2019年05月05日 19:27

-----------------------
Желаю успеха!
Ariadna jes
2019年05月05日 19:27


всем успеха...
Tat'jana Jaw
2019年05月05日 19:27

------------------------
Пока, пока...
Dominika Ric
2019年05月05日 19:27

-----------------------
Желаю успеха!

この記事へのトラックバック

  • 最強SEO対策情報!

    Excerpt: ちょっとよってみました、良いブログですね、これからも拝見させていただきます。 Weblog: 思い付き日記 racked: 2008-10-23 13:25
  • プラダ トート

    Excerpt: 【HTMLメモ】ブログ内検索のタグ編集 あおぞらぱれっと - BIGLOBE館 -/ウェブリブログ Weblog: プラダ トート racked: 2013-07-06 07:28