ノウハウ

fc2のブログで画像をポップアップ出来る方法がやっと解りました。いろんなサイトを参考にさせて頂きました
例えば　文字でポップアップさせたい時は
ここにマウスをもってくる

こんな風に画像がポップアップします
そして小さな画像の上にマウスを持ってくると
ここに↓の上にマウスを持ってくる

北びわこ号
こんな風に画像がポップアップします
私も年のせいか忘れっぽいので備忘録のつもりで作成方法を書いておきます
皆さんも良ければ参考にして下さい
《作成方法》
1.管理画面の環境設定からテンプレートの設定画面を開きます、そして下のほうのスタイルシートの編集をします。（HTML編集ではありません）

• 編集する前に今適用しているテンプレートを念のため複製ボタンで予備を作成してから編集してください

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

/

• ▼画像のポップアップ表示▼*/

.thumbnail{
position: relative;
z-index: 0;
}.thumbnail:hover{
background-color: transparent;
z-index: 50;
}.thumbnail span{
position: absolute;
background-color: lightyellow;　　
padding: 1px;
left: -1000px;
border-left: #edffdb 1px solid;
border-top: #edffdb 1px solid;
border-right: #666666 3px groove;
border-bottom: #666666 3px groove;　　
visibility: hidden;
color: black;　　
text-decoration: none;
}.thumbnail span img{
border-width: 0;
padding: 2px;　　
}.thumbnail:hover span{
visibility: visible;
top: -50px;　　　
left: -100px;
}
/

• ▲画像のポップアップ表示▲*/

張り付けたら

「更新」をクリックします。
これで準備ＯＫです
　次は新しい記事を書く時に
　　文字でポップアップさせたい時は
　　以下の様に記述します
<a class="thumbnail">href=""ブログ上の文字<img src="画像のアドレス" width="横幅" height="縦幅">
＊ブログ上の文字は・・・・ここにブログに表示する文字を書きます
＊画像のアドレスは・・・管理画面のツールからファイルのアップロード画面を開き使用する画像を右クリックす　れば確認できます
　　　http://blog-imgs-42.fc2.com/○/○/○/○○○○/○○○○.jpg　こんな感じです
＊横幅・縦幅は・・・・　表示する画像の大きさです　　　＜例＞　width="600" height="400"

　　画像上にマウスを持ってきた時にポップアップさせたい時は
　　　　　　以下の様に記述します
<a class="thumbnail" href=""><img src="画像のアドレス" width="横幅" height="縦幅" border="0" /><span><img src="画像のアドレス" />
画像の下の文字</span></a>

＊２つの画像のアドレスは同じものです・・最初はブログに表示する画像でサイズを指定してください
　　　　　　　　　　　　　　　　　　　２つ目はポップアップされる画像です、サイズの指定もできます。
　
＊画像の下の文字はポップアップされた画像の下に表示される文字です
これで記事を作って保存すればポップアップ画像のが入った記事ができます
≪参考≫
ポップアップされた時の表示位置を変える場合は、ソースの一番下の.thumbnail:hover spanにある、top: -50px
left: -200px;の数字を変えると位置も変わります。
それぞれ元の画像の位置からのtopは上からの距離とleftは左からの距離の数字になっています。
元の画像から下に表示したい場合は　top: -50px　を top: 20pxの様に　−を消して下さい　
元の画像から右に表示したい場合は　left: -200px　を　left: 100pxの様に　−を消して下さい　
あとスタイルシートが解る人は　余白の色、枠線の色と太さ、文字の色、余白の幅は自由に変更できます
以上です・・・私もスタイルシートはほとんど素人ですけど、試行錯誤して何とか出来ました
　　　　　　　皆さんも頑張ってください

この記述だと読みづらいので下のＵＲＬにアクセスしてください
http://kita521.blog53.fc2.com/blog-entry-310.html