MS Access Tips/Sample and VBA and Blog customize etc...

検索結果ページで検索語をハイライトする

前回の記事で検索結果ページの一覧性を高めるカスタマイズをしましたが、さらに、検索語句 をハイライト(強調表示)させることができたらいいと思いませんか。Google では太字で強調してますね。

いつも参考にさせていただいている ありのごとくあつまりて さんで紹介されていたので、早速導入してみました。結果、このようになりました。あまり強調しすぎるとうるさいので、地味に強調してます。

難易度:

事前準備として、jQuery と jquery.highlight-3.js の導入が必要ですが、導入法は、「ありのごとくあつまりて」さんのところが詳しいので、下記を参照してください。

検索用語をハイライト(強調表示)するスクリプト:ありのごとくあつまりて

検索用語のハイライト機能を and検索 対応に:ありのごとくあつまりて

当ブログでは、jQuery は既に GoogleAPIs から読み込んでいるので導入済み。 jquery.highlight-3.js は、上記を参考にダウンロードして外部jsファイルに追加しておきました。

これで事前準備はOK。FC2ブログ用にカスタマイズしたスクリプトをテンプレートのHTMLに記述することになります。上記の「検索用語のハイライト機能を and検索 対応に」のスクリプトを少しだけ改造しました。どう改造したかというと、検索結果画面だけでなく、タグ検索結果画面でもハイライトされるようにしました。

「#ハイライトを機能させたい範囲の ID名」の部分は使用しているテンプレーに合わせて変更してください。当ブログでは #left にしました。

また、テンプレートのCSSは下記のようにしました。これもお好みで変更してください。

拍手する

2 Comments

paruparu says..."もう記事できているなんて...さすが素早いですね!"

私は検索結果画面では 黄色で強調しまくり で^^; タグ検索結果画面 ではボタンを押したら(必要に応じて)強調するようにしています。

2010.04.04 22:57 | URL | #r1e995w2 [edit]
hatena says..."気遣いのあるUI"

> ボタンを押したら(必要に応じて)強調するようにしています

なるほど、それもいいですね。
paruparuさんのところはその他も細かいところまで気遣いのあるUI, ページ構成になっているなと感心させられます。

私のところも 使いやすい UI というのを心がけていますが、どれが最善かというと迷うところが多いですね。

例えば、ブログ内検索 も FC2 のものを使うか、Googleのものを使うか、 とか。
(paruparu さんも迷られたようですが)

2010.04.05 11:41 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/251-d4369d5f
該当の記事は見つかりませんでした。