ツールチップを変えよう
cssをいじるのが好きとはいえ実はあんまりよくわかってなかったりするのでしかたなしに(?)小技に走ったりします。
1から自分で書こうとする場合はそれなりにわかりやすく考えたりコメントアウトをよく入れたりするんですが今回は人様のテーマに手を入れただけなんですっごく汚くなってしまいました。
だから見られると非常に困ってしまいます。
(こんなこと書くと逆に見られそう…)
人によってcssの書き方って癖というか特徴がありますね。
さてさて今回のツールチップもそんな小技のひとつ。
リンクにマウスオーバーするとアンカータグ内にtitle属性がある場合説明がでますよね?
でもこれってデフォのまんまだとちっとも面白くない。
多少なりともデザインにこだわっているならサイトデザインにあわせたツールチップにしてみたいと思うのが人情(?)ってもん。
ツールチップのリンク集
探せばツールチップ用のcssとjavascriptのセットって結構いっぱいあります。
たぶん国内で有名なのはあれこれポップアップかな?
ワタシも以前までずっとこれ使わせていただいてました。
最近この手の話を聞かれた事があったんで興味のある人もいるのかも?と知ってる範囲でちょっとあげてみます。
Sweet Titlesがかわいい
いろいろある中で今回導入してみたのが最後にあげたSweet Titles Finalizedです。
実はその前にNice titlesを使ってみたんですが何故かIEでスクリプトエラーになってしまって…
Sweet Titlesはそんなことにもならず画像を使わないから結構お手軽です。
んでちょっと面白いのがツールチップがじわっとゆっくり現れるんですね。
逆に見にくくてウザイって言われたらどうもすいませんと謝るしかないんですがかわいいので気に入ってます。
FirefoxとIEでは見た目がちょっと違ってしまいますがこの程度なら許容範囲内かな?
因みにOperaはIEと同じでした。
WordPressでSweet Titles
導入方法は説明するまでもなく超簡単
ワタシの場合はTheme Editor内でcssを微調整しながら確認したかったのでsweetTitles.cssは使ってるテーマのcss内にコピペしました。
(記述も短いし)
スクリプト2つは使ってるテーマのディレクトリ内にUPしました。
最後に使ってるテーマファイル「Header」のhead内に以下を追加して完了
-
<script type=“text/javascript” src=“<?php bloginfo(’stylesheet_directory’); ?>/addEvent.js”></script>
-
<script type=“text/javascript” src=“<?php bloginfo(’stylesheet_directory’); ?>/sweetTitles.js”></script>
サイトデザインにあわせるには必要に応じてコピペしたsweetTitles.cssの背景色やフォントカラーなんかをいじってみてください。
僕はこないだ
http://matatabi.homeip.net/blog/setomits/
の右サイドバーのカレンダーのところでこれっぽいことをしました。
日付のところにカーソルを持っていくとその日のエントリ一覧が出てきて、それぞれがエントリへのリンクになっているというもの。どの日にどんなことを書いているか簡単に調べられて便利じゃないかなと思っています。
＞setomitsさん
こんばんはー :-)
見ましたよー
いいですねーそれ!!
カレンダーってあんまり使わなかったりするんですがクリックする前にマウスオーバーでエントリータイトルがわかればとっても便利だと思います。
(しかも×で閉じちゃえるのがスゴイ)
いろいろできて尊敬です :-)
リンクのタイトルとURLを表示するスクリプトはおれも使いたいと思ってたんだけど、いろいろあるんだね。
今回使ってる、ゆっくりと表示されるやついいなぁ。
デザインだけ変えて使わせてもらおうかな :P
＞なお
結構いろいろあるもんだよねー
ほかにもありそうだしー
あれこれポップアップは機能的には1番かもー
ポップアップに画像が張れるんだよねー
解説サイトが日本語ってのもありがたい:-)
はじめまして！きれいにBlog作られていますね
僕も代替テキスト（Sweet Titles Finalized）のポップアップ是非使いたいと思い表示する所までなんとか設置できたけど。ただ、色んな箇所でポップアップされ
URLだけの表示になってしまいます。
それで、カテゴリー題、エントリー題、エントリー内の画像などコメントを変えたいのですがMTソース内のどの箇所でどのように変更すればいいのでしょうか？お手数ですがサポートして頂けないでしょうか
宜しくお願い致します。
＞panserさん
実ははじめましてじゃないと思いますよー
前もMTのことで聞かれたことあります…
リンク部分は各テンプレートの中にもたくさんありますよね?
具体的にどの部分をどう表示したいのかがわからないので具体的な返答が出来ません。
まずはご自分で意図した通りに表示されてる部分とURLだけしか表示されていない部分のテンプレートをチェックしてみてください。
そうすればどうすればいいのかがわかると思います。
エントリーやカテゴリーのタイトルもポップアップで表示されているアンカータグ内にはtitle属性が入ってると思います。
ツールチップ、IE6でスクリプトエラーになっていますよ どうしてかな？
＞panserさん
いつもFirefoxで見てるので気がつきませんでした。
コメントありがとうございます。
以前はエラーは出ていなかったはずなので最近入れたなにかのスクリプトとぶつかってるのかも…?
申し訳ありませんが詳しくないので原因は特定できません。
※このコメントは、
ザッピングをご利用して頂いているユーザー様を対象にお送りしております。
既にタグを変更して頂いている方にもコメントしてしまう場合がございますが、
ご容赦くださいませ。
「ザッピング」をご利用いただきありがとうございます。
運営元の（株）ブログウォッチャーと申します。
この度、「ザッピング」のURLが、弊社側のシステムミスで、
http://thatsping.com/ から、 http://thatsping.jp/ へ変更になりました。
その関係で、ページに貼って頂いているタグを変更して頂く必要がございます。
以前のタグのままの状態ですと、
検索ワード等の情報を取得できない状況が発生しております。
ご迷惑をおかけしまして、大変申し訳ございません。
誠にお手数なのですが、
http://thatsping.jp/tagcode
に新たなタグ情報が記載されておりますので、
ご参照の上、タグを変更して頂けると幸いです。
今後とも、「ザッピング」を何卒宜しくお願い致します。