FCafe  検索語強調 2

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

  FC2blogの独自タグに関しては結構知ってるつもりの私でしたが、先月知らないタグを他ユーザ様から教えて頂きまして。 「え? 何時からこんなのが?」 という狼狽と 「おお!これで・・!」  という嬉しさが合半ばしたものでありました。

  皆様は <%search_word> とか <%tag_word> 等のタグは御存知でしたでしょうか。 私は従来、個別表示時のタイトルや自blog検索時のKWを表示させるのに <%sub_title> を使用していたのですが、この独自タグは半角スペースから始まるのと、タグ検索時には tag:~ という接頭語が付いて来るというのもあって「ちょっとな~」 とか思っていたのでした。
( 0}.fuga{~ のようなユーザタグ登録も考えたりしました )

~_word という独自タグは其の辺りを見越してシステムサイドが用意して下さったものと思われ、検索中のKW(ユーザタグ)そのものを取得できます。  search_area , tag_area のみで出力される(それ以外では空文となる)これらの変数は考えようによっては其々の「モード専用変数」とも考えられる訳ですが、一般変数でありますのでareaタグで囲う手間無くテンプレート中の何処でも使える訳です。(便利)
 この2つのタグには色々な用途が考えられます( Ash/Asgard 改訂では早速利用させて貰いました)が、以前の記事に書いた <%sub_title> を用いてblog内検索時の結果表示頁中のKWをハイライトさせる方法をもうちょっとマシなものにできないか試みてみました。

SAMPLE


【 設置法 】 テンプレート(の記事部分)が以下のようである時

<div id="ID名">

<!--topentry-->

   *  エントリ(記事)内容  *

<!--/topentry-->

</div>
 
上記部分以降、またはソース末尾( </body> の手前 )に以下のスクリプトを置きます。
<!--search_area--><script type="text/javascript"><!--
function HKW() { if(document.getElementsById){
var Style="background:yellow";
var A=document.getElementById("ID名");
var KW="<%search_word>";
var H='<span style="'+Style+'">'+KW+'</span>';
var R= new RegExp( KW, "g");
A.innerHTML=A.innerHTML.
replace(R,"DMY").
replace(/<([^>]*)DMY([^<]*)>/g,"<$1"+KW+"$2>").
replace(/DMY/g,H) ;
} }
HKW(); 
//--></script><!--/search_area-->
 
 

【 解 説 】  上記ソースですとKW部分はイエローの背景色でハイライトされますが、強調方式をどのようにするかはスクリプト中の以下の行、   var Style="☆";
☆の部分を変更すれば(例: font-weight:bolder )自由に設定できます。

 前回の記事ではKWと同じ文字列がtitleやclass名にあった場合、或いは title や html 等がKWとして検索された場合、タグ内に存在する文字列にも強調タグが付いて( HTML 構造が)破壊されてしまうという問題がありました。
今回はKWを強調タグ付きに直接変換するのでなく、一度ダミー文字列に置換し、タグ中のダミーのみ素のKWに戻す事によりこれを回避しています。 その問題の他に、スクリプトがtopentryブロック以降に出力されないとKWを強調できない、という条件があった為(何処に出力されるか判らない)プラグイン化に困難があった訳ですが、今回そちらの回避方法も何とか見出す事ができましたので上記を多少改変したものを共有pluginに登録してみました。   

Comment

びといん びといん Edit
11/05 00:15

 意外に知らない事って多いですよね。
 こちらのエントリー無いようとはちょっと違いますが、この間、「検索フォーム」プラグインをタグ検索に変更する方法を発見して、嬉しくなりました。すでに知られている方法かもしれませんが(笑)。
http://yumemasa.blog12.fc2.com/blog-entry-1972.html
 なぜ「タグ検索フォーム」が公式プラグインにないんだろ。

daniel daniel Edit
11/05 16:20

どうもこんにちは。 (どちらかと思ったらネコパンチ様とは)
いや、どんな隙間領域に陣取ろうとしても上には上がいるものです
びといんさん、目の付け所がSHARPですね !
これはかなり使えるTIPSじゃないかと思われますよ。
( Poetsさんでちょっと話に上がったんですが
  検索語がタグリストにあれば tag= で、無ければ q= で、
  ・・・て事が出来るかもしれません )

びといん びといん Edit
11/05 20:52

 有り難うございます。
 俺はいつも自分の利便性や楽しみのためだけに、思いつきの力技のやっつけ仕事カスタマイズしてますが、カスタマイズといえばまずFCafeと言われる danielさnに褒めていただければ、この上ない励みになります。

>目の付け所がSHARP

 はい。PDAはザウルス、携帯はソフトバンクのアクオス携帯を愛用しています(謎)。

daniel daniel Edit
11/06 10:14

「思い付きを力技で実現」 というのも中々できないことで。

>カスタマイズ
実は自分自身のは最近あまり弄ってないんです。
自blogをリニュする時って やはり燃えが違うんですが、
中々今のテンプレ換える気になれなくて。
「作る」と「使う」の乖離は自分的にも如何かと感じてます
( いつも新作着ておられるテンプレーター様達が羨ましい )

SHARPは頑張って(成功して)ると思いますね。 
私も携帯はSHで来てます。 ・・ブランド化も良いと思いますが
X系PCみたいな遊び心も忘れて欲しくないな、と

paruparu paruparu Edit
09/14 15:21

以前から検索キーワードの強調方法を色々試していますが、共有プラグインのだとリンクやa などでレイアウトが乱れてしまうので、この記事のものなら...と試しましたが作動しません。
共有プラグインのもので検索用語が何文字以上なら実行するみたいなことは可能でしょうか?
面倒な質問ですみません。

daniel daniel Edit
09/15 23:09

paruparuさんこんばんは。
レイアウトの乱れについては当初ある程度対処したつもりなのですが
aで検索すると不具合が生じるようですね。
誤った変更をしてしまったのかもしれません。

a はおいて、 一文字での検索も"@"とか二文字だと"IE" とかありえますので
プラグインでの字数制限はむづかしいのですが 対処法がないか検討してみます。

paruparu paruparu Edit
09/17 23:37

早々に回答ありがとうございました。あの後、また色々試してみて次項の KW強調ボタン を試したところ、これだといきなりページレイアウトが崩れることもないので気に入り使わせていただくことにしました。最初、ワンクッション多く必要なのは面倒では?とも思いましたが、結構面白くて自分でも何度も試してしまいます^^

こちらのスクリプト等は本当に役立つものが多くてありがたいです。
余談ですが、こちらでも使われている title="<%rcomment_body>" そのままだと <br> がそのまま表示されてしまいますが、それを防ぐスクリプトを紹介されている方がいたので、私はそれを使っています。知っているかもしれませんが...(参考まで)
http://tswe.blog98.fc2.com/blog-entry-48.html

daniel daniel Edit
09/18 13:44

あ。「ボタン」 ですか。 そういえばそんなのもありましたね。
(記事にしておいてよかったです)

<%rcomment_body> の件は当初の仕様と変わってしまったようで私も困っております
(御指摘のように title 要素に用いるとアレなので何とか改まって欲しいものですが)
参考サイトさんの御提示ありがとうございます。
そろそろ私も待ってるだけじゃなく これを機会に対策してみました。

[1] まず、rcomment リンク群を含む(最小の)ブロックに 適当なIDを付けます
[2] そのブロックより後に以下のスクリプトを書きます ( ¥は半角にしてください )

<script type="text/javascript"><!--
var A=document.getElementById("ブロックID").getElementsByTagName("a");
for (i=0;i<A.length;i++){
A[i].title=A[i].title.replace(/¥<br ¥/¥>/g," ")
}
//--></script>


当店TOPに実装済みです。 参考になれば幸いです。

paruparu paruparu Edit
09/19 01:45

すごい! 早速使って以前のものと比べてみました。
以前のものも気に入っていましたが、noscript分とダブルところがあったのでちょっと無駄かなぁとも思っていました。

でもdanielさんの↑ソースだと全く無駄が無い感じでソースもスッキリ。より気に入ったので、こちらを使わせていただくことにしました。

凄いですね!ありがとうございました。


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/387-5655587c

Shown after Admisson
.

≫ 複数語検索 doodel FC2blog ミリオン突破 ≪

2006 / 11 / 02  Thu
Entry   
Comment 9 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。