Webアプリケーション YoG
あなたのサイトの文章にツールチップ付きキーワードリンクを追加するシステムです。
破線のリンクにマウスカーソルを重ねると解説がツールチップとして表示されます。
キーワードリンクの実装はJavaScriptで記述されているので、設置したいサイトにCGIなどのプログラムを実行する仕組みは必要ありません。追加したいサイトにhtmlにscriptタグを追加するだけです。
キーワードデータの管理、及びキーワードデータの生成などはyog.heroku.comにログインしてキーワードを追加してください。
個人のご利用は無償です。法人利用につきましてはコンタクトフォームよりお問い合わせください。
YoGを試すにはこちらからログインしてください。
主な特長
- JavaScriptによる容易な設置
- 単語を登録する管理画面を提供
- 自由にカスタマイズ
単語を登録する管理画面を提供
管理画面にOpenIDでログインすることで、あなたの用語集を登録できます。
JavaScriptによる容易な設置
次のスクリプトをコピーして、あなたのサイトに設定するとツールチップが表示されるようになります。
あなたの用語集のKEYは管理画面にログインすると取得できます。
自由にカスタマイズ
YoGの呼び出し時にオプションを指定することで、カスタマイズが出来ます。
watch_tag_id
ツールチップ対象の HTMLタグ の ID を指定します。カンマ(,)区切りで複数指定できます。
ignore_tag_id
ツールチップ対象外の HTMLタグ の ID を指定します。カンマ(,)区切りで複数指定できます。
ignore_tag
ツールチップ対象外のタグを指定します。カンマ(,)区切りで複数指定できます。
ignore_class
ツールチップ対象外の Class を指定します。カンマ(,)区切りで複数指定できます。
ignore_word
ツールチップ対象外の単語を指定します。カンマ(,)区切りで複数指定できます。
custom_tooltip_css (true or false)
ツールチップのデザインをcssでカスタマイズする場合trueに指定します。
footer
ツールチップの下に入れたいタグなどを指定します。
デザインのカスタマイズ
YoG の破線で表示されたリンクの class 属性
ツールチップで表示されるタイトルの class 属性
ツールチップで表示される説明の class 属性
ツールチップ本体のclass属性
background: #ffffff;
border: solid 4px #eeefff;
font-size:10px;
width:240px;
}
yog_tipのスタイルを設定する場合はcustom_tooltip_cssをtrueにしてください。
カスタマイズの設定例
<script src=”http://yog.heroku.com/javascripts/yog.js?key=あなたの用語集のKEY” type=”text/javascript” charset=”utf-8”></script>
<style>
.yog_tip {
background: #fff;
border: solid 4px #d4d1c3;
font-size: 11px;
width: 240px;
padding: 10px;
border-radius: 10px;
}
.yog_tip_title {
display: block;
margin-bottom: .8em;
padding-bottom: 5px;
}
.yog_tip_body {
color: #555;
line-height: 1.4;
}
</style>
<script>
YoG({'custom_tooltip_css': true,
'ignore_word' : 'word1,word2',
'footer' : '<a href="http://yog.heroku.com/">YoG</a>'});
</script>
