ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > 大きな疑問コーナー > title - CSSポップアップ画像

CSSポップアップ画像

CSSポップアップ画像は、CSSだけで画像や文字の上にマウスを乗せると、そのページ上で画像が大きく表示されるにする方法です。画像の下にテキストを記入することもできます。

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

つくり方

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 とマイナスにすれば上にポップアップさせられます。

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



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
はじめまして
参考にさせていただきました。ちゃんとできて感動しています
はじめまして
どこにポップアップ画像を使っているんだろう?と探したら相互リンクがポップアップになってました!やっぱりポップアップって楽しいですよね。
はじめまして
参考にさせていただきました!
そのままコピーしただけだと、反映しなくて焦りましたが、
「  ・・・・余白の色」とかいう文字を消したらなんとかできてホッとしています。
ありがとうございました(*^-^*)

そのほか
いろいろとわかりやすい情報がたくさんで非常に参考になります!

サバ子さんへ
なんとかできてお役に立ててよかったです!!
ブログ初めて一ヶ月!
るんばば様

はじめまして、ブログを初めて今日でちょうど一ヶ月のはっちと申します。
今まではロム専門で、サイト(ブログ)を運営するのは初めてです。
まさに、私のような超初心者のためにあるかのようなるんばば様のブログには
本当にお世話になっております。
プラグイン部分の折りたたみ、スクロールバーも、全てるんばば様のご説明のおかげで設置することができました。
今日は、ポップアップ画像に挑戦してみました。
大きな画像のまま載せるとブログのデザインが崩れてしまうし、かといって
小さくするとせっかくの迫力が半減してしまう気がして、今までは、
画像の一部分だけを切り取って展示していましたが、
おかげさまで、大きな画像を、ブログのデザインをくずことなく展示することができました。
ありがとうございました。
これからも、参考にさせていただきます。
まずは御礼まで

はっち 拝
はっちさんへ
はじめまして、はっちさん。自分もずっとロム専でしたが、ちゃんとブログを作ったのはこのブログが始めてです。少しでもお役に立てているようでよかったです!!
画像の見せ方は本当に悩みますよね!はっちさんの言うように大きな画像だと崩れるし、小さい画像は物足りないです。
だからこの画像表示方法はいいですよね!画像をクリックしなくてもいいので、見る人にとってもめんどくさくない所もいいと思います。あとは文字でも画像がポップアップする所ですね。
お礼のコメントを本当にありがとうございました。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/594-cd69ce30   

Template Designed by DW99