ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
jQuery  サイト内検索  ブログ内検索  強調表示  javascript  

スポンサーサイト

--/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-.html

--/--/-- ~ | Comment (-) tweet? | ↑ ページ先頭へ ↑ |

検索用語をハイライト(強調表示)するスクリプト

2010/02/24 (水)  カテゴリー: ブログカスタマイズ上級

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ブログの、ブログ内検索の動作が変更になります。 現在、一部サーバーにて試験的に適用していますが、 順次、各サーバーに適用し、3月上旬には全適用となる予定です。

ちなみに、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. 準備

  1. jQuery ライブラリ本体
    2010/02/24 現在の jQuery 最新版 は jquery-1.4.2.min.js ですが、私が使っているのは jQuery lightBox plugin に添付されていたものと同じ バージョン1.2.3 です。 ファイルサイズ自体 はバージョンによって かなり異なるようです。
  2. 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ブログを軽くする! ]

<!--not_page_area--><!--not_index_area--><!--not_permanent_area--><!--not_edit_area--><!--not_category_area--><!--not_date_area--><!--not_titlelist_area-->
<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> 部分 (ボタンを表示させたい場所)

<!--tag_area--><input type="button" onclick="if('<%tag_word>'!=''){$('#ハイライトを機能させたい範囲の ID名').removeHighlight().highlight('<%tag_word>');}" value="<%tag_word> を 強調表示する" title="検索用語 を 黄色背景でハイライトします" /><!--/tag_area-->

4. スタイルシート

.highlight {
background-color:yellow;
display:inline;    /* 広告など表示乱れ対策,必要に応じて(私は未設定) */
}

これだけでOK! とっても便利になりますよ♪

キーワード検索 : jQuery  サイト内検索  ブログ内検索  強調表示  javascript  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-111.html

2010/02/24 ~ | Comment (13) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

-13 Comment


配置位置

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強調ボタンは、コメントアウトしてます。

phl |  2010/03/05 (金) [ 編集 ] No.320


恐らく

jquery.min.js が ページ内で2度 読み込まれているのが原因ではないでしょうか?
それを修正すれば機能すると思います。 (一応テスト済みです。)

paruparu |  2010/03/05 (金) [ 編集 ] No.321


>jquery.min.js が ページ内で2度 読み込まれているのが原因ではないでしょうか?

確かに2度 読み込まれていました。1っにしても動作しない様です。

phl |  2010/03/05 (金) [ 編集 ] No.322


phl さんのソースをローカルでテストしてみましたが、機能しましたよ。。。
機能しないのはどのページでしょうか?

paruparu |  2010/03/05 (金) [ 編集 ] No.323


>機能しないのはどのページでしょうか?
私のfc2 blogのurlを教えてという意味ですか。

phl |  2010/03/05 (金) [ 編集 ] No.324


<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>
と入れてもらえば機能すると思います。(確認済みです)

paruparu |  2010/03/05 (金) [ 編集 ] No.325


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>に配置
で効きました。回答有難う御座いました。助かりました。

phl |  2010/03/06 (土) [ 編集 ] No.326


管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- |  2010/03/06 (土)  No.327


解決につながってよかったです。

最初(前回も)コメントに書いてもらった内容だけでは、
機能しない理由が見当たらなかったので... 解析からサイトを訪問していました。

エリア変数は <head> 部分でも使えるもので、私のテンプレートでも沢山使っています。
今回 機能しなかったのは、スクリプトの配置(順番)と重複 だと思います。
(しつこいようですみませんが...他の方が迷うといけないので。)

でも、使えるようになってよかったです。

今回のように「機能しない」というのような内容の場合、実際のURLを教えてもらった方がアドバイスしやすいので、私の場合は入れてもらえると助かります。
解析からはあくまでも予測ですし、回答しづらいところもあるので...。

paruparu |  2010/03/06 (土) [ 編集 ] No.328


参考にさせて頂きました。

こんばんは。
ブログの見直しで、ページナビ,ハイライト表示等、参考にさせて頂きました。
ありがとうございました。リンクも貼らせて頂きましたので、
よろしくお願いいたします。

Hiro |  2010/03/14 (日) [ 編集 ] No.352


Hiroさん、こんばんは!

色々リニューアルされたのですね。
私も色々と参考にさせて頂いているので、お役に立てて良かったです。
Hiroさんのサイトは まさに、検索とかマップとかが必要とされそうな感じなので、使いやすくなりますね。 and検索対応にしても、多分重くはならないと思うので... よかったらそちらも試してみてくださいね!

paruparu |  2010/03/15 (月) [ 編集 ] No.354


お久しぶりです

メインをアメブロにチェンジしたんで(飽きっぽいなんて言わないでね)、ご挨拶を兼ねて・・

アメブロをいろいろいじってるんですが、なんとアメブロにはJQueryが初めから組み込まれてるんで、この強調表示、デフォで実現できます。

しかし、笑っちゃうんですが強調表示されるところがスポンサーサーチの検索ワードのみというオチがつきます。

テンプレつくりがんばってください。

denpaboy2 |  2010/06/03 (木) [ 編集 ] No.540


こんばんはー

アメブロ...外側から色々探ってみましたが、全く判りませんでした^^;
どのような仕組みなんでしょう? jQueryが初めから組み込まれてるというのも面白いですね。

このスクリプト自体は今は外しているのでしょうか? html には見当たらなかった (探せなかった) ので...スポンサー部分の id="general" の検索用語にはスタイルが予め設定されているのでしょうか? (border-bottom と background-color と color ??) だとしたら jQuery で上書きしてしまうとかならできるのでしょうか。。。 いずれにしても難しそうですね。

>やっぱ、FC2が一番ですね。
↑ これ、見つけました。 FC2ブログも見捨てず...是非続けてくださいね。
それと...denpaboy2 さん経由? のネタ・発想 をいくつか記事にさせてもらいました。 (FC2メッセージとか...気付いてますよね^^;) ありがとうございます。 (← 意味不明!?)

paruparu |  2010/06/04 (金) [ 編集 ] No.541

コメントを投稿する 記事: 検索用語をハイライト(強調表示)するスクリプト


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback


この記事にトラックバックする (FC2ブログユーザー限定)

トップメニュー見直し中

ずっと当サイトの”看板”としてきた ”Amazon の商品バー”を外しました。 くるくるウィジェット(TM),映画タイトルINDEX カテゴリも分類が多い...

『映画な日々』 cinema-days 2010/03/14

ブログの仕様変更について

最近、FC2ブログの仕様変更で、ブログ内検索の検索結果にスポンサー広告が挿入されるようになってしまいました。 無料で利用させて頂いている...

どうしようもない僕の足元にElonaが転がってきた。 2010/03/21
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。