YoGの設置方法

初めに

ここでは既にOpenIDを取得し、管理画面にて用語の設定を終えていることを前提とします。

Scriptタグによる設置サンプル

key のみが必須となります。他のパラメーターはオプションです。
上記サンプルをコピー&ペーストして利用する際、yog.js に与えている key は管理画面で発行したものと置き換える必要があることに注意してください。

各パラメータの解説

key（必須）
利用者毎に割り当てられるID
key のみで呼び出した場合、body 全体に対してツールチップ対象とします。
<script src="http://yog.kray.jp/javascripts/yog.js?key=YOURKEY" type="text/javascript"></script>
n
ツールチップ対象の HTMLタグの ID を指定します。カンマ(,)区切りで複数指定できます。

<script src="http://yog.kray.jp/javascripts/yog.js?key=YOURKEY&n=id1,id2" type="text/javascript"></script>
in
ツールチップ対象外の HTMLタグの ID を指定します。カンマ(,)区切りで複数指定できます。

<script src="http://yog.kray.jp/javascripts/yog.js?key=YOURKEY&in=id1,id2" type="text/javascript"></script>
it
ツールチップ対象外のタグを指定します。カンマ(,)区切りで複数指定できます。
デフォルトで下記タグが対象外として指定されています。
A, OPTION, TEXTAREA, SCRIPT, MAP, BASEFONT, BR, COL, COLGROUP, HR, IMG, INPUT, ISINDEX, OPTGROUP, OPTION, PARAM

ic
ツールチップ対象外の Class を指定します。カンマ(,)区切りで複数指定できます。
デフォルトで下記の Class が対象外として指定されています。
ignore_glossary, disable_glossary

<script src="http://yog.kray.jp/javascripts/yog.js?key=YOURKEY&ic=class1,class2" type="text/javascript"></script>
iw
ツールチップ対象外の単語を指定します。カンマ(,)区切りで複数指定できます。
UTF-8でURLエンコードする必要があります。
<script src="http://yog.kray.jp/javascripts/yog.js?key=YOURKEY&iw=word1,word2" type="text/javascript"></script>

スタイルの指定

YoG のリンク、表示されるツールチップのスタイルを変更する場合は次の class 属性を設定してください。

yog
YoG の破線で表示されたリンクの class 属性。

.yog {color: #808080}
yog_tip_title
ツールチップで表示されるタイトルの class 属性。

.yog_tip_title {color: #808080}
yog_tip_body
ツールチップで表示される説明の class 属性。

.yog_tip_body {color: #808080}

JavaScript のライブラリ同士のコンフリクト

prototype.js 等の他のライブラリと使用する場合（jQuery以外）

yog.js では他の JavaScript のライブラリと衝突しないように jQuery.noConflict() が指定されていますが、読み込む順番には気をつける必要があります。次のように jQuery の前に prototype.js を読み込むようにします。

すでに jQuery を使用している場合

他のライブラリと衝突しないように jQuery.noConflict() が指定されているため、元々 jQuery を使用しているサイトではエラーが発生することがあります。その際は下記のように jQuery.noConflict() が指定されていない yog-jquery.js のライブラリをご使用ください。