ツンデレ好きサイト
ここは個別記事ページです。
サイトのトップへ戻る一言連絡などにもどうぞ。
管理人：秋月らせん
構想から一週間、遂に完成！！
（いや最終的には完成というのは
おこがましくて導入が正しいんですけどね。
結局ある２サイト様の作られた物を見つけただけです。）
それは検索エンジンから来訪された方の、
検索キーワードをハイライト表示する機能です。
（※動作にはブラウザのJavaScriptが有効になっている必要があります。）
サイト管理者、そして閲覧者の方にとって朗報ではないでしょうか。
サイト管理者にとっては導入が凄く楽で、
閲覧者の方にとっては検索結果を探すのがかなり楽になります。
では早速、判り易く具体例を載せます。
記事の詳細ページではサイト管理者さま向けの導入方法を紹介します。
１.先ずはGoogle先生で検索開始。
今回対応出来る検索エンジンは多岐に渡るのですが
先ずは皆さんお馴染みのGoogle先生で検索です。
■検索結果の画像■
今回は試しに「ふるぱ-しゃる ツンデレ サンデー」の３単語で
トリプル検索してみます。検索語の間は半角スペースを空けて下さい。
全角スペースだと検索エンジンは検索語の一部なのか
区切りなのか判断に迷いますので。
【参考】実際に検索するとこんな感じです。
⇒「ふるぱ-しゃる ツンデレ サンデー」で実際にGoogle検索
2.さて、Google検索結果のトップに
ウチへのURLが来ているのでクリックしてみます。
■Googleの検索結果をクリックしてサイトを開く■
画像が荒いので見づらいですが、
先ほどの検索語に色が付いて表示されているのが判ると思います。
3.おまけで検索エンジンに入力した検索語が、
サイト内検索欄の中に自動的に挿入されます。
■サイト内検索に語句を自動挿入■
いかがでしょうか？
秋月は仕事柄、Google検索する事が多いのですが
クリックして入室した先のサイトで、目的の語句が
ぱっと見では見つからず、Ctrl+Fでサイト内検索したり、
Googleでリンクをクリックする時にキャッシュから
開く事も少なくありません。
そう、正に今回の導入は、Googleキャッシュの
色付け機能を擬似的に取り入れる事でした。
今回の導入で検索エンジンからお越しいただく
一元さんのブラウジングの一助となれば幸いです。
ここから先は、この機能を導入する為の説明です。
サイト管理者さま向けです。
物凄く簡単なのでご心配なく、です。
■謝辞
機能の実装方法を説明する前に謝辞を。
この機能のオリジナルであり基本部分は
FuCoder.comのscott.yang様が作られたものです。（英語ページです。）
ここがスタート地点です。大感謝。
２バイト文字を扱わないなら、こちらのサイトのスクリプトで十分です。
⇒Search Engine Keyword Highlight with Javascript
さて、日本語は２バイト文字なので上記サイト様の
スクリプトだけでは対応出来ません。
結論から言うと、最終的に上記サイト様のスクリプトを改造して
２バイト対応にされたサイトを見つけてました。
中国のサイトなのですが、残念ながら元の著作者が判りません。
元スクリプト配布のscott.yang様がフリーで配布されているので
ありがたく使わせていただく事とします。
■動作説明
JavaScriptにて検索エンジンに入力された検索キーワードを取得し、
（正確にはURIのリファラーという部分から判断）
任意のhtmlソースの文字列の検索を行います。
そして該当する文字列を、<span class=”hilite”>…</span>タグで
くくります。
■導入方法
1.先ずはJavaScriptファイルをダウンロードして下さい。
⇒ダウンロード：keyword.js（8.97kb）
2.ダウンロード後はお使いのサイトへＦＴＰ等でアップロードして下さい。
ファイルのパーミッションは特に変更は要らないと思います。
秋月は644で実行しています。
ご不明な場合はお使いのレンタルスペースのマニュアルを読まれるか、
管理者にお問い合わせ下さい。
3.機能を導入したいページに上記JavaScriptファイルへの
リンクを張ってください。
書式は下記のとおりです。<head>タグと</head>タグの間に記述して下さい。
<script type="text/javascript" src="http://fullpa.net/blog/common/js/keyword.js"></script>
4.最後に検索キーワードの色付けの設定です。
これはスタイルシートで設定します。
お使いのスタイルシートファイルに下記のコードを追加して下さい。
/*[.検索エンジンからの検索キーワードをハイライト表示]
-------------------------------------------------------------*/
.hilite { background-color: #99ffff;}
.hilite1 { background-color: #99ff99;}
.hilite2 { background-color: #ff99ff;}
.hilite3 { background-color: #99ffff;}
.hilite4 { background-color: #ff9999;}
スタイルシート(.css)ファイルが良く判らない、
htmlファイルに直接書式を指定したい、という方はこちら。
<style type="text/css">
.hilite { background-color: #99ffff;}
.hilite1 { background-color: #99ff99;}
.hilite2 { background-color: #ff99ff;}
.hilite3 { background-color: #99ffff;}
.hilite4 { background-color: #ff9999;}
</style>
色の変更はUIC様の色見本などを参考にされると便利です。
■動作確認
JavaScriptが動作する下記ブラウザで動作確認しています。
・Internet Explore5.0/6.0
・Lunascape3.5/4.0
・Firefox1.5
・Netscape4.7/7.1
・Opera8.5
・OperaMobile for Willcom W-ZERO3
■対応検索エンジン
・AllTheWeb
・百度（噂のバイドゥですね）
・Google
・Lycos
・MSN
・Yahoo
・他にも中国のサイトがいくつか。
（要望があれば対応サイトを増やす予定です。）
■その他
Q1.ライセンスはフリーですか？
A1.えぇ。出ないと秋月も困ります。（おい）
Q2.改造しようとしてエディタで開いたら文字化けしました。
A1.JavaScriptファイルの文字コードはUTF-8で保存しています。
もし文字化けが起こる場合はエディタで
文字コードを変えて保存し直して下さい。
Q3.どんなサイトでも導入出来るのですか？
A1.残念ながらMovableType専用です。というのは嘘です。
ブログどころかホームページならどこでも導入できます。
ちなみにふるぱ-しゃるは、htmlページにも
phpページにも導入しています。
Q4.ハイライト以外に文字の加工は出来ないの？
出来ます。ふるぱ-しゃるではこの記事を書いた後に
文字を太くする設定を追加しました。
方法はスタイルシートにfont-weight: bolder; という
指定を追加してです。他にも色々とお試し下さい。。
ご質問があればコメント等でお聞き下さい。
凄く簡単な事ならお答え出来るかもしれません。
まさに今、勉強中です。
このエントリーの文中リンク用ソース：
この記事をあなたのサイトの中で文中リンクされる場合は、
上記の文中リンク用ソースをコピーしてお使いになられるとお手軽です。
×××の部分はご自由に編集してお使いください。（サイト管理者向け）
このエントリーのトラックバックURI：
この記事へトラックバックする場合は、上記のトラックバックURIを、
あなたのウェブログの投稿ページの「トラックバック先のURL」欄に入れて更新して下さい。
現在スタイルシートが読み込まれていない状態です。
スタイルシートはサイトのデザインを定義しています。
累計： 本日：
昨日：
Powered by MovableType Syndication via RSS.
