先日Jimdoのサポートをしていて、ユーザーからポップアップ表示がしたいという要求があった。Jimdoそのものには簡単に実装できるアイコンがない。（無料版ですが）
そこで、独自に実装する方法を考えた。
ポップアップ表示はJavascriptやJqueryを使えば、いわば難なくできる。
しかし、Jimdoでそれを使うとなるとちょっと敷居が高い気がする。
特にJqueryはJimdoがもともとPrototype.jsを使っているということもあって、コンフリフトを避ける設定をしなければならなかったり、いろいろ面倒そうだ。
そこで、cssのみで実装できるポップアップ表示を見つけたので、それを試してみた。
http://javascript123.seesaa.net/article/133792048.html
を参考にさせて頂いた。
Jimdo無料版でpopup表示の方法
設定から「ヘッダー部分を編集」を開き
先ずヘッダに以下を書き加える。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style type="text/css"> <!-- .pop a:hover{ /*マウスが乗ったら*/ position: relative; top: 0px; left: 0px; } .fukidasipop { /*吹き出し本体*/ position: absolute; top:17px; left:20px; display: none; /*何も表示しない*/ padding: 5px; /*内側の余白*/ max-width: 300px; /*ブロックの幅 font-weight: bold; /*文字の太さ*/ text-decoration: none; /*文字飾り*/ color: #ffffff; /*文字色*/ background-color: #b22222; /*背景色*/ border-top:white solid 10px; border-left:#b22222 solid 10px; filter: alpha(opacity=85); /* IE */ -moz-opacity:0.85; / *Firefox・Netscape */ opacity:0.85; /* Opera・Safari */ } a:hover .fukidasipop { display: block; /*ブロック要素で表示*/ } --> </style> |
もちろん、これはあくまで噴出しの設定（css）なので文字色や幅、背景色等はいくらでも設定変更してかまわない。ボーダーをうまく使って噴出しの形を実現しているが、これとて変えてもかまわない。
今度はHTMLだ。
Jimdoでは記事の編集で隠れているメニューを出すと、記事のHTMLが編集できる。
そこに
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p class="pop">このマスクは、 <a href="javascript:void(0);"> プリーツ構造<span class="fukidasipop"> 吹き出しポップアップ</span></a>です。 <a href="javascript:void(0);"> 新型インフルエンザ <span class="fukidasipop">吹き出しポップアップ </span></a>対策 <br> <br> 吹き出しが少し透けて見えます。CSSでオブジェクトの透明度を操作する <br>Opacityプロパティを使って半透明を実現しています。 </p> |
要するにポップアップで注釈等を付けたい文字列に<a href=”javascript:void(0);”>を付け
ポップアップ自体は<span class=”fukidasipop”>で囲んでやればいい。
ちなみに”javascript:void(0);”はクリックを無効化するおまじない？のようだ。
実際は以下を見ていただければ
http://ogu-tex.jimdo.com/it/
追記 なお、このJimdoサイトでは「プリーツ構造」「新型インフルエンザ」という文字にマウスを載せるとポップアップが表示されるようになっています。
要するに:hoverを使っていますので、iPad等ではうまくいきませんのでご承知おきを。
これについてはまた後日。
