ＣＳＳポップアップ画像

見本を作ったので別ページで見て下さい。 　　『ＣＳＳポップアップ画像』
（画像や文字の上にマウスを置くと大きな画像が開きます。マウスを画像や文字からはずせば大きな画像は消えます。）

つくり方

1.管理画面の環境設定からテンプレートの設定→[編集]→スタイルシートの編集を開きます。

2.開いたら一番下までスクロールさせて最後に書かれているタグから1行以下のソースをコピーして張り付けます。

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;　　・・・・余白の色
padding: 5px;
left: -1000px;
border: 1px dashed gray;　　・・・・・枠の色
visibility: hidden;
color: black;　　・・・・・文字の色
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;　　・・・・余白の幅
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;　　　・・・・・上からの位置
left: 60px; ・・・・・左からの位置
}

張り付けたら「更新」をクリックします。

3.次に記事を作る画面で画像を作る時に画像でポップアップさせたい時は、

<a class="thumbnail" href="リンク先のアドレス"><img src="画像のアドレス" width="横幅" height="縦幅" border="0" /><span><img src="画像のアドレス" /><br />画像の下の文字</span></a>

と記入します。
2つの画像のアドレスは同じ物です。
横幅・縦幅は小さい時（最初の状態）に表示したいサイズです。

文字でポップアップさせたい時は、

<a class="thumbnail" href="リンク先のアドレス">ブログ上の文字<span><img src="画像のアドレス" /><br />画像の下の文字</span></a>

と記入します。

4.これでいつもの様に記事を作って保存すればクリックポップアップ画像の出来上がりです。

カスタマイズ

ポップアップされた時の表示位置を変えたい時は、ソースの一番下の.thumbnail:hover spanにある、top: 0; とleft: 60px;の数字を変えると位置も変わります。

それぞれ元の画像の位置からの上からの距離と左からの距離の数字になっています。初期状態だと元の画像に位置から、上から0px・左から60px 離れた位置にポップアップされる様になっています。
もし見本の様に元の画像よりも上になるようにポップアップさせたければ top: -20px とマイナスにすれば上にポップアップさせられます。

余白の色、枠線の色と太さ、文字の色、余白の幅はソースに説明書きしてあるそれぞれの数値や色の値を変えれば変わります。

• 参考サイト　；　Dynamic Drive CSS Library
  
• 関連記事　　； 面白い画像の見せ方をするには？
  
• 関連記事　　； Lightbox JS v2.0
  
• 関連記事　　； 画像カタログ
  
• 関連記事　　； クリックポップアップ画像