ブログに面白い反映をするタグを探しています

質問

• 現在2ヶ月前から運営しているFC2ブログに面白い反映をするタグを探しています。ジャパスクリプトを使用しないタグが望ましいです。ブログのプロフィール欄に画像を載せる予定で、最初は画像が見えず、モーションが起こったときに画像と解説が表示される設定を考えています。既に知っているHPで反映しているタグがありますが、最近教えていただいたHPでは反映しないタグがあります。また、IEでもFirefoxでも反映するタグが望ましいです。他の画像に関するタグやHPも知りたいです。
• 現在2ヶ月前から運営しているFC2ブログに面白い反映をするタグを探しています。ジャパスクリプトを使用しないタグが望ましいです。ブログのプロフィール欄に画像を載せる予定で、最初は画像が見えず、モーションが起こったときに画像と解説が表示される設定を考えています。既に知っているHPで反映しているタグがありますが、最近教えていただいたHPでは反映しないタグがあります。また、IEでもFirefoxでも反映するタグが望ましいです。他の画像に関するタグやHPも知りたいです。
• FC2ブログを2ヶ月前から運営しており、面白い反映をするタグを探しています。ジャパスクリプトを使用しないタグが望ましいです。ブログのプロフィール欄に画像を載せる予定で、最初は画像が見えず、モーションが起こったときに画像と解説が表示される設定を考えています。既に知っているHPで反映しているタグがありますが、最近教えていただいたHPでは反映しないタグがあります。また、IEでもFirefoxでも反映するタグが望ましいです。他の画像に関するタグやHPも知りたいです。

回答No.11

756co

まとめてみます。

-------------------------------------------------------------

http://www.intactmotor.com/hobby-interest/css-popup/

このサイトで紹介されているものについては、
以下のようになります。

◆スタイルシート

/* 画像をポップアップ表示させるためのスタイル */
.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:30px;
left:20px;
}

/* Aタグの装飾スタイル */
.btm1 a {
background-color: #E8E8E8;
padding: 0.3em;
color: #111111;
text-decoration: none;
border: solid 1px #999999;
}

.btm1 a:hover {
background-color: #333333;
color: #FFFFFF;
text-decoration: underline;
}

◆HTMLタグ

<span class="popup"><span class="btm1">
<a href="リンク先アドレス" target="_blank">(押しちゃダメ)<img src="画像のアドレス（ポインタしたときに表示したい画像）" /></a>
</span></span>

-------------------------------------------------------------

http://garage.mods.jp/ex/css-popup/

こちらのサイトで紹介されている、
「画像をポインタしたら画像がポップアップで表示される」ものについては以下の通りです。

◆スタイルシート

.popup_a img.pop {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup_a a:hover {
position:relative;
}

.popup_a a:hover img.pop {
top:-256px;
left:0;
}

◆HTMLタグ

<div class="popup_a">
<a href="リンク先アドレス"><img class="pop" src="画像のアドレス（ポインタしたときに表示したい画像）" /> <img src="画像のアドレス（最初から表示させておきたい画像）" /> </a>
</div>

-------------------------------------------------------------

ボタンの背景や文字色についてはスタイルシートで
好きな色に変更してください。
カラーコードで指定できます。
http://www.finitojapan.com/cltable.html
http://iroempitsu.net/zukan/tl-hexdec.htm

/* 通常表示 */
.btm1 a {
background-color: #E8E8E8;　　←　背景色
padding: 0.3em;
color: #111111;　　←　文字色
text-decoration: none;
border: solid 1px #999999;
}

/* ポインタされたとき */
.btm1 a:hover {
background-color: #333333;　←　背景色
color: #FFFFFF;　　　←　文字色
text-decoration: underline;
}

余談ですが
アップロードした画像を背景に指定することもできます。
その場合は以下のように書きます。
（画像を使う場合は、　background-color:#******;　の記述を消してください）

background-image:url('画像のアドレス');

◆セルタグについて

これについては、もう少し詳しく説明していただけますか？
「セルタグ」というのはどういった意味でしょう？
ボタンをtableタグを使って配置させているのですか？
できれば、そのタグもお知らせください。

お礼

回答有難う御座います

御蔭様で、非常に分かり易く
ポップアップの設定としては反映しました

ただ、その画像の配置の事で
また少し問題が出ました
それは、前回も書いたんですがスタイルシートの所で
.popup a:hover img{
top:30px;
left:20px;
}
この部分に対して
.popup a:hover img{
top:-300px;
left:20px;
}
こう設定したら
希望通り、この様にボタンの上に画像が出ました
仮に、画像名をＡＢＣと例えると

---------------------------
Ａ　　　　Ｂ

---------------------------
ボタン　　ボタン
---------------------------

しかし、Ｃの場合のみ

--------------------------
Ｃ　

---------------------------
ボタン　
---------------------------

この様に、スペースが空いてしまいました
ちなみに画像のピクセル数を調べると

正確に反映した所は、ＡとＢで
縦横が、共に約４００の、ほぼ正方形
又は、縦が約３００の横が約４００
しかし、スペースが空いた画像はＣで
縦が２００代半ばの横が４００弱でした

この現象は、画面上のＨＴＭＬタグで
ＡとＢに関しては、縦を全て２００代後半で揃えたんですが
その数字だと、Ｃの場合
画像が大きく出過ぎる為、Ｃのみ縦の数字を小さく変えました

すると上記で書いた様にＣのみスペースが空いた訳なんです
ちなみにＣに関しては
結果としては、大き過ぎるんですが
縦の数字をＡとＢに合わせると、問題なく位置も反映しました

ただ…出来ればＣは小さい画像で反映させたいんですが…

最後にセルタグに関してなんですが
質問する側が、こんな事を書いては大変失礼かも知れないんですが
実は、この質問の前(？)に
趣旨が違うと判断して違うスレで質問してました

それで、違う方からアドバイス頂いた物が、あるんですが
ここで書いてしまうと大変長い文章に、なります
それで、大変失礼ながら
ここを見て頂いて良いでしょうか？
http://oshiete1.goo.ne.jp/qa5367534.html