この記事に含まれるタグ （Keyword） :
jQuery サイト内検索 ブログ内検索 強調表示 javascript
jQuery （ジェイ クエリー，javascriptライブラリ）を使ってFC2ブログの 検索結果ページ と タグ検索結果ページ の検索用語 にハイライト機能 をつける方法を紹介します。
[ 参照：jQuery 指定した文字列をハイライトするプラグイン - 130単位 ]
これは Hatena::Diary の 130単位（deeekiさん） のサイトで紹介されている highlight: JavaScript text higlighting jQuery plugin を利用したものですが、deeekiさん の協力の下、FC2ブログに適応する形にして使わせていただいたものです。 プラグイン自体は 2KB程度 のシンプルなもので、ハイライトする文字は 大文字でも小文字でもOK，自動・手動はお好みで．．． などかなり使えるスクリプトだと思います。
- 検索結果ページ
ページ読み込み完了後 検索用語 が自動でハイライトされます。
← 画像 1枚目 - タグ検索結果ページ
「強調表示する」 というボタンをクリックした時に そのタグをハイライト表示します。
← 画像 2枚目
※追記： 2010年3月～ FC2ブログの サイト内検索 「検索結果ページ」 に スポンサーサーチ という広告が 自動挿入 されるようになっちゃいました。 挿入される広告のアンカー（a）のスタイル設定 の影響で、「広告部分が 横まで伸びる黄色い帯だらけ になってしまう」 という状態になってしまったので、その対策もしておきました。
FC2総合インフォメーション 【ブログ】ブログ内検索の変更について
2010/02/26 の記事より引用：
FC2ブログの、ブログ内検索の動作が変更になります。 現在、一部サーバーにて試験的に適用していますが、 順次、各サーバーに適用し、３月上旬には全適用となる予定です。
ちなみに、FC2ブログでの キーワードの強調表示 は FCafe（danielさん） の 『KW強調ボタン』 や 共有プラグインをDLするだけでも使える 『Hilight_KW』 を使用することでも実装可能です。 （※共有テンプレート ari_seoシリーズ では この『KW強調ボタン』 をアレンジして使わせていただいています。[ 参照 ] ）
※『Hilight_KW』 は、そのままだとレイアウトが乱れてしまう場合があると思うので、『KW強調ボタン』 の記事を参考に手を加えた方が良いかもしれません。。。
ところで jQuery って何？
まず、私もつい最近まで殆ど未知の領域だったのですが．．．「jQuery って何？？」 という方は → はじめてのjQuery を参照すると基本が理解できると思います。
jQueryプログラミング入門
jQueryで作るAjaxアプリケーション 
jQueryプラグインブック 
jQuery＋JavaScript実践リファレンス
jQuery UI＋厳選プラグイン41実践サンプル集- これはあくまで 見本ネタ として作ったものなので．．． 1つも読んだことないです。 ごめんなさい。
FC2ブログへの設置方法
1. 準備
- jQuery ライブラリ本体
2010/02/24 現在の jQuery 最新版 は jquery-1.4.2.min.js ですが、私が使っているのは jQuery lightBox plugin に添付されていたものと同じ バージョン1.2.3 です。 ファイルサイズ自体 はバージョンによって かなり異なるようです。 - jquery.highlight-3.js (2 KB)
highlight: JavaScript text higlighting jQuery plugin からDLします。
ダウンロードした .jsファイル を ファイルサーバーにアップロードします。
※FC2ブログでは ファイル名に .(ドット) が含まれているとアップできないので... 予め、ファイル名を highlight_3.js などのように変更しておいてください。
追記：2010/04/26
jQueryライブラリの設定 を Googleのサーバーから直接読み込んで利用する方法 （Google AJAX Libraries API を利用） に変更しました。 以下のソースも一部変更していますが、jQuery の利用方法は色々あるようなので、詳細は以下のサイトなどを参照してください。
[ 参照 ： Google AJAX Libraries APIを利用しよう！ | THE HAM MEDIA ]
2. <head> ～ </head> 部分
■色文字部分 は エリア変数です。 jquery.js などを 検索結果ページ と タグ検索結果ページ でのみ使う場合を例にしていますので、必要に応じて書き変えてください。
[ 関連記事 ： エリア変数を加えて FC2ブログを軽くする！ ]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/ ～ /highlight_3.js"></script>
<!--/not_titlelist_area--><!--/not_date_area--><!--/not_category_area--><!--/not_edit_area--><!--/not_permanent_area--><!--/not_index_area--><!--/not_page_area-->
<!--search_area-->
<script type="text/javascript">
$(function(){
var keyword = "<%search_word>";
if (keyword != "") {
$("#ハイライトを機能させたい範囲の ID名").highlight("<%search_word>");
$("#overtureAds").removeHighlight();
}
});
</script>
<!--/search_area-->
※追記： 検索結果ページ で表示されるようになってしまった「スポンサーサーチ」 という広告部分では、検索用語と一致している文字列があっても その部分がハイライトされないように修正してみました。 （#overtureAds という部分です）
[ 関連記事 ： FC2 検索結果に 「スポンサーサーチ」 なんて ]
さらに追記： 複数ワード検索 に対応させました。 ソースの一部を変更するだけ！
[ 関連記事 ： 検索用語のハイライト機能を and検索 対応に ]
3. <body> 部分 （ボタンを表示させたい場所）
4. スタイルシート
background-color:yellow;
display:inline; /* 広告など表示乱れ対策，必要に応じて（私は未設定） */
}
これだけでOK！ とっても便利になりますよ♪
キーワード検索 ： jQuery サイト内検索 ブログ内検索 強調表示 javascript
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。
URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-111.html
2010/02/24 ～ | Comment (13) tweet? | ↑ ページ先頭へ ↑ |ari_seo1 試用しております。
highlight: JavaScript text higlighting jQuery plugin ソース配置
html
<head>
<!--not_page_area--><!--not_index_area--><!--not_permanent_area--><!--not_edit_area--><!--not_category_area--><!--not_date_area--><!--not_titlelist_area-->
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/a/a/a/aaaaaa/jquery.js"></script>
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/a/a/a/aaaaaa//highlight_3.js"></script>
<!--/not_titlelist_area--><!--/not_date_area--><!--/not_category_area--><!--/not_edit_area--><!--/not_permanent_area--><!--/not_index_area--><!--/not_page_area-->
<!--search_area-->
<script type="text/javascript">
$(function(){
var keyword = "<%search_word>";
if (keyword != "") {
$("#content").highlight("<%search_word>");
$("#overtureAds").removeHighlight();
}
});
</script>
<!--/search_area-->
<!--tag_area--><input type="button" onclick="if('<%tag_word>'!=''){$('#content').removeHighlight().highlight('<%tag_word>');}" value="<%tag_word> を 強調表示する" title="検索用語 を 黄色背景でハイライトします" /><!--/tag_area-->
style.css
.highlight {
background-color:yellow;
display:inline; /* 広告など表示乱れ対策，必要に応じて（私は未設定） */
}
<!--FCafe KW強調ボタン
http://pcafe.blog3.fc2.com/blog-entry-392.html-->
は、効きますが、
上記の通り、配置 highlight: JavaScript text higlighting jQuery pluginは効きません。
highlight: JavaScript text higlighting jQuery plugin効かないのは、なぜでしょうか。
FCafe KW強調ボタンは、コメントアウトしてます。
jquery.min.js が ページ内で2度 読み込まれているのが原因ではないでしょうか？
それを修正すれば機能すると思います。 （一応テスト済みです。）
>jquery.min.js が ページ内で2度 読み込まれているのが原因ではないでしょうか？
確かに2度 読み込まれていました。1っにしても動作しない様です。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" src="・・・/js/jquery.page-scroller.js"></script>
↑ ページ中盤にあるこの1つ目（jquery.min.js） はこの位置ではなく
<head>～</head> に入れて
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://blog-imgs-00.fc2.com/a/b/c/ ～ /highlight_3.js"></script>
<!--search_area-->
<script type="text/javascript">
$(function(){
var keyword = "<%search_word>";
if (keyword != "") {
$("#content").highlight("<%search_word>");
$("#overtureAds").removeHighlight();
}
});
</script>
<!--/search_area-->
</head>
<body>
<!--tag_area--><input type="button" onclick="if('<%tag_word>'!=''){$('#content').removeHighlight().highlight('<%tag_word>');}" value="<%tag_word> を 強調表示する" title="検索用語 を 黄色背景でハイライトします" /><!--/tag_area-->
</body>
と入れてもらえば機能すると思います。（確認済みです）
jquery.min.js
<head>～</head> に入れました。
> <head> 部分
>■色文字部分 は エリア変数です。
以前試しましたが
<head>～</head> 間にエリア変数を入れると
効かなかったようでした。
以前
FCafe KW強調ボタンのスクリプトの上にエリア変数入っていたので。
FCafe KW強調ボタンのスクリプトをコメントアウトし、その変に配置したわけです。
今回
jquery.min.js
highlight_3.js
<!--search_area-->
<script ～
</script>
<!--/search_area--> を
<head>～</head> 配置。エリア変数無。
<!--tag_area--><input type=～
<!--/tag_area-->
<body>に配置
で効きました。回答有難う御座いました。助かりました。
このコメントは管理人のみ閲覧できます
最初（前回も）コメントに書いてもらった内容だけでは、
機能しない理由が見当たらなかったので．．． 解析からサイトを訪問していました。
エリア変数は <head> 部分でも使えるもので、私のテンプレートでも沢山使っています。
今回 機能しなかったのは、スクリプトの配置（順番）と重複 だと思います。
（しつこいようですみませんが．．．他の方が迷うといけないので。）
でも、使えるようになってよかったです。
今回のように「機能しない」というのような内容の場合、実際のURLを教えてもらった方がアドバイスしやすいので、私の場合は入れてもらえると助かります。
解析からはあくまでも予測ですし、回答しづらいところもあるので．．．。
こんばんは。
ブログの見直しで、ページナビ,ハイライト表示等、参考にさせて頂きました｡
ありがとうございました。リンクも貼らせて頂きましたので、
よろしくお願いいたします。
色々リニューアルされたのですね。
私も色々と参考にさせて頂いているので、お役に立てて良かったです。
Hiroさんのサイトは まさに、検索とかマップとかが必要とされそうな感じなので、使いやすくなりますね。 and検索対応にしても、多分重くはならないと思うので... よかったらそちらも試してみてくださいね！
メインをアメブロにチェンジしたんで（飽きっぽいなんて言わないでね）、ご挨拶を兼ねて・・
アメブロをいろいろいじってるんですが、なんとアメブロにはJQueryが初めから組み込まれてるんで、この強調表示、デフォで実現できます。
しかし、笑っちゃうんですが強調表示されるところがスポンサーサーチの検索ワードのみというオチがつきます。
テンプレつくりがんばってください。
アメブロ．．．外側から色々探ってみましたが、全く判りませんでした^^;
どのような仕組みなんでしょう？ jQueryが初めから組み込まれてるというのも面白いですね。
このスクリプト自体は今は外しているのでしょうか？ html には見当たらなかった （探せなかった） ので．．．スポンサー部分の id="general" の検索用語にはスタイルが予め設定されているのでしょうか？ （border-bottom と background-color と color ??） だとしたら jQuery で上書きしてしまうとかならできるのでしょうか。。。 いずれにしても難しそうですね。
＞やっぱ、FC2が一番ですね。
↑ これ、見つけました。 FC2ブログも見捨てず．．．是非続けてくださいね。
それと．．．denpaboy2 さん経由? のネタ・発想 をいくつか記事にさせてもらいました。 （FC2メッセージとか．．．気付いてますよね^^;） ありがとうございます。 （← 意味不明!?）
コメントを投稿する 記事: 検索用語をハイライト（強調表示）するスクリプト
お気軽にコメントをどうぞ。
ソースコード等の < と > は （実態参照に変換されるので） そのまま使ってOKです。 & は 全角 に変えて使ってください。
Trackback
この記事にトラックバックする （FC2ブログユーザー限定）
トップメニュー見直し中
ずっと当サイトの”看板”としてきた ”Amazon の商品バー”を外しました｡ くるくるウィジェット(TM),映画タイトルINDEX カテゴリも分類が多い...
ブログの仕様変更について
最近、FC2ブログの仕様変更で、ブログ内検索の検索結果にスポンサー広告が挿入されるようになってしまいました。 無料で利用させて頂いている...
![【送料無料】0さいー4さい こどもずかん (4冊セット)英語つき [よしだじゅんこ]](http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbook%2fcabinet%2f0581%2f05810817.jpg%3f_ex%3d80x80)
共有テンプレート PC用：3作， スマートフォン用：3作， 携帯用：2作 を公開しています。
13 Comment