HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > ブログカスタマイズ上級 > 検索用語をハイライト(強調表示)するスクリプト

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

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

jQuery (ジェイ クエリー,javascriptライブラリ)を使ってFC2ブログの 検索結果ページ と タグ検索結果ページ の検索用語 にハイライト機能 をつける方法を紹介します。
[ 参照:jQuery 指定した文字列をハイライトするプラグイン - 130単位 ] 

これは Hatena::Diary の 130単位(deeekiさん) のサイトで紹介されている highlight: JavaScript text higlighting jQuery plugin を利用したものですが、deeekiさん の協力の下、FC2ブログに適応する形にして使わせていただいたものです。 プラグイン自体は 2KB程度 のシンプルなもので、ハイライトする文字は 大文字でも小文字でもOK,自動・手動はお好みで... などかなり使えるスクリプトだと思います。

※追記: 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! とっても便利になりますよ♪

スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-111.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 13件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : ブログカスタマイズ上級

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る