Home > ブログ > Bubble Tooltips - リンクページ改造した

Bubble Tooltips - リンクページ改造した

2007-03-09 (金)
Category: ブログ
1952 Views
0 user 0 user 0 user

最近、こんな感じで、リンクにカーソルを持っていくと、吹き出しがポップアップするようにしかけてあるブログをちょこちょこ見るようになった。

なんでもかんでもポップアップされると、めちゃめちゃうざかったりするけど、上手いこと使えばいい感じなのよねぇ。

なので、今回紹介する Bubble Tooltips (注：イタリア語) をリンクページのみに導入してみますた。

このJavascript の効果

リンクにタイトル属性が設定されている場合、リンクにカーソルを合わせると、吹き出しがポップアップして、タイトル属性とリンク先URLを表示する。

Textpatternへの導入

とりあえず、Javascript の配布元サイトから zipファイルをダウンロードしましょう。話はそれからだ。zipファイルを解凍したらフォルダの中にファイルが6つありますが、使うのは3つ。あとは動作サンプルなど。興味のある人は適当に見て。

使用するファイル

BubbleTooltips.js (Javascript 本体)
bt.css (表示用 css)
bt.gif (背景画像ファイル)

Step 1. ファイルをアップロードする

とりあえず、BubbleTooltips.js と bt.gif を、サーバーの適切な場所にアップロードします。私は FTP でアップロードしました。(Textpatternの Images とか Files のアップロードからでもいいのかなぁ？どなたか人柱よろしくです)

Step 2. CSSを書き換える

次に、bt.css の中身を、Presentation > style にコピペして保存。このとき、二箇所ある画像ファイルのパス、つまり background: url(bt.gif) を適切に指定することを忘れないように (面倒なので http://〜から書いたあほうは私です)。特定の場所だけに適用したい場合は、適当に class でも id でも追加指定したらいいような気がする (まだ試していません)。

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}
.tooltip span.top{padding: 30px 8px 0;
background: url(bt.gif) no-repeat top}
.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
background: url(bt.gif) no-repeat bottom}

なお、各ページで使用している CSS が違う場合なんかは、bt.css をアップロードして、各ページのヘッダで bt.css を読み込むようにしたらよいでしょう。

Step 3. 各ページのヘッダ部分を書き換える

Javascript ファイルを読み込まないとあかんので、Presentation > Pages の、各ページの〜部分に、以下をコピペします。このとき、BubbleTooltips.jsまでのパスを適切に指定するのを忘れないようにしましょう。

一応はこれで使えるようになってますが、wg:Bubble Tooltips には、もっと細かい機能の解説も載っているので、細かく制御したい人はそっちも見ましょうねぇ。

現段階では、title 属性が指定されているリンクは全て、カーソルを合わせると吹き出しがポップアップ表示するという、かなりうっとおしい状態になっていると思います。 title 属性を指定しなけりゃいい、という話かもしれませんが。リンクの title 属性をどうしたらよいのかは、HTML 4.01の仕様書 (日本語訳) を見たけどよく分からずじまいです。

Step 4. Textpattern ならではのカスタマイズ: Section の利用

で、ここからが Textpattern 使いならではのカスタマイズ。特定の Section のみ Javascript を適用するのですよ。今回私がやったのもまさにこれで、リンクページのセクションだけに Javascript が読み込まれるようにしています。記事を読んでいる最中に表示されても、うっとおしいと感じる人もいるだろうし… (まさに私のことなんだけどね)。

そういう場合には、を使いましょう。これで必要ないところには、そもそも読み込みが行われないので、そこらじゅうでポップアップ、なんていうことはなくなります。

これに気づいたとき、Textpatten 使っててよかったと思ったｗｗｗ
なんで重くなるのを承知でこんなのを入れたか

ところで、リンクページの見栄えはよくなったけど、Javascript を読み込むわけだから、表示が重くなる可能性があります。最近ブロードバンドだから気にならないかもしれないけど、ナローバンドの時代だったら怒られてるかもね。

だけど、リンクページって、個人の嗜好が大きく反映される場所だから、リンク先のサイトへの思い入れみたいなものを綴ってみたいし、それもコンテンツの一部として読んで欲しいわけよ。というわけで、Content > Links 内の description をしっかり書いておったのです。が、これが通常のブラウザのデフォルトの表示だと、title属性が途中でぶった切られてしまって、書いた意味がなかったんだよね…orz

このへんは個人の価値観がかなり反映してくる部分なので、一概にどうとは言えませんが、個人的には、今回の改造はかなり気に入ってます。