			カンタン！ブログをはじめよう

HOME > Blog カスタマイズ > あれこれポップアップ

あれこれポップアップ

2006年12月05日 AQ

あれっ

昨日と一緒の記事がダブってるよ (･･?)

ははは (^^) 違う違う。この上の画像は、今日のカスタマイズの説明用のサンプル画像として表示させてあります。試しに上の画像に、マウスを乗せてみて下さい (^ー^* ) ﾄﾞｳ? ﾅﾆｶﾃﾞﾃｷﾀ?

『これは、あれこれポップアップのサンプル画像です (^_^;) 』って、黒い半透明のポップアップ表示がでてきたでしょ？これが、今日記事にするお題でございます

これは『あれこれポップアップ』と呼ばれるもので、title 属性の中に書かれている情報を、通常のツールチップを使用せず、カッコよく Cool に表示させようと言うものです o(^-^o)(o^-^)o

実際は title 属性だけでなく、href、cite、datetime　や拡張属性の ap:banner を使用して、黒の半透明のポップアップ部分に画像を表示させたりもできます (ﾟﾛﾟ屮)屮ｵｵｰﾅﾝﾀﾞｯﾃ

AQ はいたずらにポップアップ部分が重くならないよう、画像を表示させるのはあえてしていないのですが、通常のサムネイル画像ぐらいの大きさならば問題ないかも知れません。・・・にしてもやりすぎは禁物ですね (^_^;)

設置の仕方は、デフォルトで使用する分においては、該当するジャバスクリプトファイル（その他画像、CSS 一式）をダウンロードして、折り返し、どこかのサーバーの任意のディレクトリにアップロードするだけです

ライブドア PRO ならそのまま使用しているサーバーにアップすれば良いですし、ライブドア無料版をご利用の方は、プロバイダーなどが無料で提供しているサーバーを使用すれば良いでしょうヽ(^｡^)ノ

スクリプトの中身を変更して、自分好みの設定に変える時も、まずはデフォルトで設置して、問題無しに動作する事を確認してからおこなって下さい。

あとは、ライブドアブログなら４つの HTML （トップページ・個別記事・月別・カテゴリ別）の <head> ～ </head> 内に、スクリプトと CSS の呼び出しのタグを記述するだけです。

すべての書き込みが終わったら、保存、全て再構築をおこない、記述したタグを反映させて下さい。その後は、あれこれポップアップを表示させたい部分に、title、href、cite、datetime、ap:banner などの属性を付け加えるだけで、マウスオーバーさせると要素内の説明文章などが黒い半透明の画像に囲まれて、カッコよくポップアップします (^^)

具体的な設置例、ダウンロードファイル、詳細なマニュアル、動作サンプル、FAQ などは、スクリプト公開元のサイトをご覧下さい。

■ スクリプト公開元

娘娘飯店しるきぃうぇぶ
あれこれポップアップ設置方法

ゆっくりと熟読なされば、設置自体はそう難しいものではありません。何かわからないことがあれば、コメント欄にてお聞き下さい。AQ のわかる範囲でお付き合い致します

TOP

Comments(16)

TrackBack(1)

Blog カスタマイズ

tags : 要素属性 title マウスポインターツールチップ

1. いろいろスナップ。。。 [ てんこの日々、Bravo！！ ]

2006年12月13日 02:16

こちらの画像の上にマウスポインタをあてると、、、ほら、、、ポップアップして、リンク先のページが見れるでしょ?! このツール?はこちらのサイトで取得できます。リンク先はクリックして入らないと確認する事ができない事が多いですが、こういったのがあ...

1. Posted by 永遠　towa 2006年12月05日 06:45

おはようございます。

昨日と同じ記事…とうとうAQさんも来ちゃったか？
と一瞬目をうたがいました。^ ^

この記事と関係なくて悪いのですが、チースケさんが他の方をはげまされるほど元気になられたことが嬉しかったので一筆したためました。
辛い思いをした分、人は優しくなれる、そう思いたいです。[ハート]

2. Posted by ruru 2006年12月05日 07:14

おはようございます。　ヽ(*＾∇＾*)ﾉ*:･'ﾟ

これ、とってもいいですね　[ラブラブ]
導入したいのですが、どんどん同じになっていってしまいそうです。[汗汗]

(*-゛-)ウーン・・
絵文字を設置したばかりなので、まだダメでしょうか・・・　[？]

3. Posted by AQ 2006年12月05日 16:25

＞永遠 towa ・・・あれっ (･･;)
>>1
どうしたの？名前。
(*-゛-) ウーン・・・よくわからん、女心と冬山登山 [汗汗]

[blockquote]昨日と同じ記事… とうとう AQ さんも来ちゃったか？[/blockquote]
やっぱし紛らわしかった？違う画像にしようか、
同じ風に見せかけて突込みを待とうか、悩んでたの (^_^;)

もうひとつの件は、またメッセでお話します ^^;

4. Posted by AQ 2006年12月05日 16:31

＞ ruru さん
>>2
どうぞ。気に入っているのなら、設置なさったら良いですよ。
同じになることは仕方が無い事ですから ^^;

該当サイトの中身を良く読んで、落ち着いて導入して下さいね [ニコ]

5. Posted by 永遠　towa 2006年12月05日 19:58

今晩は。
この頃コメントがあちらこちらでうまくいかなくて、
今朝は削除ありがとうでした。

[blockquote]ウーン・・・よくわからん、女心と冬山登山[/blockquote]
どっちも一歩間違えば怖いですよね。[ビックリ]

名前なんて洋服と同じ。
着替えもするし、脱いじゃえば中身は一緒。[フリフリ]

6. Posted by AQ 2006年12月05日 20:36

＞永遠　towa さん
>>5
ホントこの頃コメントの書き込みが大変でしょ？
書き込めたか、ダメだったかがハッキリしない (+_+)
ライブドアってサーバーメンテナンスした後は、
いっつも不具合がでますよね [怒り]

はは (^_^;) 今回は別人格じゃなくて、
名前だけの衣替え～ってやつだったんですね。
初めまして・・・って言うのか、少し迷いました [汗汗]

7. Posted by ruru 2006年12月05日 21:13

＞ＡＱさん
>>4
(ｏ￣∀￣)ノ”ぁぃ　頑張ってみます。

ところで、今日のアクセス数は凄いですね。
何か、あったのですか？　２５０００くらいに、なるのでは？

8. Posted by AQ 2006年12月05日 23:01

＞ ruru さん
>>7
もうこのコメントを入れる頃には 25000 を軽く超えています [汗汗]
原因は・・・明日の記事をお読みください (^_^;)

9. Posted by ruru 2006年12月05日 23:19

＞ＡＱさん
>>8
ほんと、超えてますねｗｗ
(^-^ゝ了解です！！　気になってたので記事が楽しみです。

でも、グラフを見ると面白いです。　いつもの、すごいグラフが
１ミリくらいになってるなんて・・・。　(;^_^A アセアセ・・・

10. Posted by AQ 2006年12月05日 23:24

＞ ruru さん
>>9
アクセス数だけに注目してて、ひとつ大変な事を忘れています [汗汗]
AQ もその事について、『どうしよう (*-゛-) ウーン・・・』って
考えているんですが、大変悩んでいます [叫び]

11. Posted by ruru 2006年12月06日 00:42

＞ＡＱさん
>>10
[center][strong]１週間のガマンです！[/strong][/center]

12. Posted by AQ 2006年12月06日 05:53

＞ ruru さん
>>11
へっ (･･?) 一週間のガマン [？] ・・・何が？？

13. Posted by ruru 2006年12月06日 05:55

＞ＡＱさん
>>12
(　・ω・)ﾓﾆｭ?　　グラフじゃないの？？？

14. Posted by AQ 2006年12月06日 06:00

＞ ruru さん
>>13
まだ起きてるの (^_^;)

グラフの事じゃないよ。
その事も記事に書いて上げますｗｗ

15. Posted by てんこ 2006年12月07日 02:37

リクエストした記事を早速載せていただいて有難うございます。
熟読して、ゆっくり導入してみたいと思います[ニコ]

16. Posted by AQ 2006年12月07日 03:09

＞てんこさん
>>15
スクリプト開発元の著作の問題もあって、こちらのサイトでスクリプトをダウンロードできるようにしたり、その中身を表示させる事ができない為、回りくどい説明になっています。ごめんなさいね (^_^;)

ご了承下さい。わからない部分があれば、気にせずお聞き下さい。
全部に答えられないかも知れないけど [汗汗]

	：Name
	：Mail
	：URL
	情報を記憶：書き込みのリセット：

	ご利用のブラウザ、設定ではご利用になれません。