あれこれポップアップをカスタマイズ

去年導入した あれこれポップアップ

リンクなどにtitle属性があるとマウスオーバーで角丸半透明のツールチップを表示してくれるCSSとJavaScriptのセットです。
ちょっと重くなってしまう欠点はあるけれど見た目がいい感じなので気に入ってます。
ただグレーの半透明は今のblogの色合いとちょっと違って浮いてるかも…??
その内画像作り直そうと思いつつ忘れてたら コチラに先を越されちゃいましたーー
赤いツールチップがとってもいい感じ♪
作成された画像の配布されてますので赤が合うサイトさんは使わせていただいてもいいかも!

でも自分で作るのも楽しいです♪
108×108ピクセルのPNG画像を作ってそれぞれのパーツ用に同じサイズに切って上書きするだけです。

薄い背景色で作る場合デフォルトのCSSでは文字色がwhiteになってるので字が読みにくくなっちゃいます。
忘れずにArekorePopup.cssで読みやすいカラーに変更します。
(ワタシはblackにしました)
それとテキストに影がついてると読みにくかったのでArekorePopup.jsを修正して影を出さないようにしました。

this.richStyleUseTextShadow = false;

ここまでやって完成させるのに約1時間。
かなり高レベルの自己満足っぷりで意味もなくポップアップ出現させまくってしまいました…

＜関連エントリー＞
caramel*vanilla::あれこれポップアップ設置

:: TB memo ::
http://www.leapk.com/archives/2005/07/17_031603.php