プロが教える店舗&オフィスのセキュリティ対策術

以前にも似た様な質問を、しましたが
反映しなかった為、再投稿します

現在FC2ブログを運営してから
2ヶ月が経過しました
ちなみにOSはビスタで、ブラウザはFirefox3.5です

それで、面白い反映を、するタグを探してるんですが
出来ればジャパスクリプトを使用しない物が有難いです

結論から言うと
ブログのプロフィール欄に
ある画像を載せようと思ってます
しかし、ただ載せるだけじゃ面白く無いんで
最初は画像が見えず、モーションを起こした時等に
画像と解説が出る様な設定を考えてます

それで私も色々調べたんですが
私が知ってるHPは、こういうHPです
http://www3.ocn.ne.jp/~uri-o313/yumesato/tag/1/m …
http://www3.ocn.ne.jp/~uri-o313/yumesato/tag/3/d …
ちなみに上記HPに載ってるタグは反映してます

そして、以前の投稿で教えて頂いたHPですが
反映しないタグが
http://www.intactmotor.com/hobby-interest/css-po …

ソース
<div class="popup">
<a href=""><img class="pop" width="128" height="128" alt="firefox icon"

src="http://garage.mods.jp/blog/image/icns/firefox.png" /> <img width="128" height="128" alt="サ

ムネイル" src="http://garage.mods.jp/blog/image/icns/firefox.png" /> </a>
</div>

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

ソース
<span class=”popup”>
<a href=”http://www.intactmotor.com/out/ranking-more1″ target=”_blank”>(押しちゃダメ)<img

src=”http://www.intactmotor.com/wp-content/uploads/20 …” width=”280″ height=”

180″ /></a>

この2つです
どう反映しないのかと言うと
この2つを自分のブログ記事に入れたんですが
いずれも最初から画像が表示されており
画像が隠れた状態では表示されません

ちなみに私は普段Firefoxを使用ですが
IE6に切り替えても同じでした

それと、もう1つ聞きたいんですが
主に画像系が希望なんですが
他に、こういうタグを知りませんか?
あるいは、載ってるHPを御存知無いでしょうか?

尚、現在使用してるタグは
画像にカーソルを載せると、文字が出るタグです

それで、通常はIEしか
反映しないのかも知れませんが
出来ればFirefoxでも反映するタグが有難いです

こういうタグ、一応、自分でも探しましたが
どう表現して良いかが分からなかった為…
つまり、どういう言葉で検索すれば
見つかるかが分からなかった為
探せませんでした

従って、自分で探せ…と言う方
検索する言葉を教えて頂ければと思います

この最後の質問に関しては
今迄全く回答が無かったです

A 回答 (17件中1~10件)

><font title="文字"><span class="btm1">解説</span></font>



これだとどこにもスタイルのクラスが指定されていませんので…


ここまで扱ってきたスタイルシート・HTMLタグでは、
画像(imgタグ)がひとつのブロックだったので簡単でしたが

文章をひとつのブロックとするには <div>で囲めばいいかと思います。

----------------------------------------------------
/*文章ポップアップのためのスタイル*/

.popup_txt div.txt2 {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup_txt {
position:relative;
text-decoration: none;
}
.popup_txt a:hover {
text-decoration: none;
}
.popup_txt a:hover div.txt2 {
top:10px;
left:20px;
text-decoration: none;
color:#009144;
background:#ffec67;
padding:10px;
}


◆HTMLタグ

<div class="popup_txt">
<a href="#"><div class="txt2">
ポップアップで表示させたい内容
</div>ここにポインタするとポップアップ</a>
</div>

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


ポップアップで表示させたい内容の中に
Aタグでリンクを貼ることはできません。
(タグが崩れます)

また、表示される文章の位置・装飾については
以下を参考に書き換えてください。

.popup_txt a:hover div.txt2 {
top:10px;   ←←← 表示位置・上下
left:20px;   ←←← 表示位置・左右
text-decoration: none;
color:#009144;   ←←← 文字色
background:#ffec67;  ←←← 背景色
padding:10px;
}

文字色、背景色は必要ない場合記述しなくても大丈夫です。
    • good
    • 0
この回答へのお礼

回答有難う御座います
返答が遅くなって申し訳ありません

実は今回の内容
事情が、あって今迄通りで行く事に、なりました
ただ、勉強の意味で
次回以降で試そうと思います

それと、ここ迄色々御世話に、なりました
これで、このスレでの質問は全て終了に、なります
本当に有難う御座いました
尚、ポイントの事なんですが
私の気持ちとしては、10000ポイント位
差し上げたい所なんですが
以前にも書いた通り、ここでは最高20ポイントしか付けられません

そこで、この文章内で
気持ちだけ書かせて頂きます

「最高良回答10000pt」

お礼日時:2009/11/19 22:14

成功しましたか。

良かったです。

◆スタイルの違い

これは単なる私の書き損じです。


/*誤*/
.popup img , popup_d img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

/*正*/
.popup img , .popup_d img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

↑では 誤の方の「popup_d」に ピリオド( . )がありません
( . )は「これはクラス名です」ということを示すようなものです。


/*誤*/
.popup a:hover , .popup_d a hover {
position:relative;
}

/*正*/
.popup a:hover , .popup_d a:hover {
position:relative;
}

↑では 「popup_d a:hover」の コロン( : )があるかないかです。
a:hover は bodyタグの属性である alink="" と似たような働きをします。 
    • good
    • 0
この回答へのお礼

回答有難う御座いました

これで今回質問の主旨は全て解決という事に、なります
ただ、これで最後に、なると思いますが

今回の主旨としてはアイコンにカーソルを合わせた時
画像をポップアップで出したい…でした
ただ、一部、画像にカーソルを合わせた時に
文字が出る設定の部分も、あるんですが

その応用でアイコンにカーソルを合わせた時
文字が出る設定も考えました
ただ、タグとしては、今迄の応用で考え
<font title="文字"><span class="btm1">解説</span></font>
と入れたんですが反映しませんでした

ちなみに画像に合わせた時の文字は
<font title="文字">画像URL</font>
で作りました

お礼日時:2009/11/01 14:15

たびたび申し訳ありません



タグについて注意を書かせていただきましたが
私側でコピー&ペーストしたときに変換されてしまっただけのようです。

以下のふたつは無視してください。

上から二行目 半角カッコ > が & gt; になっています

下から六行目、最下行 半角カッコ < が & lt; になっています


大変失礼いたしました
本当にすみませんでした
    • good
    • 0

申し訳ございません、


前回の回答で 私の書いたスタイル・HTMLタグにミスがありました。

以下は直したものですので大丈夫だと思います。
もし、また駄目でしたらお教えください。

.popup img , .popup_d img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover , .popup_d a:hover {
position:relative;
}

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

.popup_d a:hover img{
top:-200px;
left:20px;
}


↑この top:-200px の数値は
ご自分で位置を確かめながら調整してくださいね。


◆タグ
すみません、全角文字ではなく閉じ忘れなどですね


上から二行目 半角カッコ > が & gt; になっています
上から七行目 ダブルクオーテーションが閉じられていません
下から六行目、最下行 半角カッコ < が & lt; になっています


<table border="10"><tr><th>見出し</th><td colspan="2">名前</td></tr>中略<tr><th>見出し</th& gt;<td><font title="噴出し文字"><a href="画像URL" target="_blank"><img src="画像URL" alt="画像名前" border="0" width="" height="170" /></a></font></td><td><font title="噴出し文字"><a href="画像URL" target="_blank"><img src="画像URL" alt="画像名前" border="0" width="" height="170" /></a></td></tr><tr><th>見出し< /th><td><span class="popup">
<a href="img src="画像1URL" target="_blank">解説1<br>解説2<img src="画像1URL" alt="画像名前" border="0" width="" height="170" /></a></span></td><td><span class="popup"><a href="画像2URL" target="_blank"><table border=8><tr><td>解説3<br>解説4</td></tr>& lt;/table><img src="画像2URL" alt="" border="0" width="" height="270" /></a></span></font></td><tr><th> 見出し</th><td><span class="popup"><span class="btm1"><a href="画像3URL" target="_blank">解説5<br>解説6<img src="画像3URL" alt="" border="0" width="" height="270" /></a></span></span></td><td><font title="噴出し(?)文字"><table border=8><tr><td>解説7</td></tr></table>& lt;/tr></td></table>
    • good
    • 0
この回答へのお礼

回答有難う御座います

結論から言うと、やっと反映しました(笑)

“すみません、全角文字ではなく閉じ忘れなどですね”
なるほど…そういう事でしたか?

ただ、これも私の勉強不足だと思うんですが
前回のスタイルシートと今回のスタイルシートと
何処を変えられたんでしょうか?

と言うのが、自分で1文字ずつチェックしたんですが
何処も変わってる感じがしなく
それでもスタイルシートに入力したら反映した訳で
それで、何処を変えられたんだろう?…と…

ちなみに、これが前回で
.popup img , popup_d img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover , .popup_d a hover {
position:relative;
}

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

.popup_d a:hover img{
top:-200px;
left:20px;
}

これが今回です
.popup img , .popup_d img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover , .popup_d a:hover {
position:relative;
}

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

.popup_d a:hover img{
top:-200px;
left:20px;
}

お礼日時:2009/10/26 21:04

補足にあるタグの中の、 画像1 画像2 画像3 は


それぞれ 画像A 画像B 画像C と置き換えて考えてよかったでしょうか。


以前の回答にも書きましたが
スタイルシートに何かを記述しても、 HTML内にクラス名を指定したタグがなければ意味をなしません。


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

.popup a:hover , .popup_d a hover {
position:relative;
}

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

.popup_d a:hover img{
top:-200px;
left:20px;
}

↑を見ていただいて分かるように、 新たなクラス名「popup_d」が加わっています。

クラス名「popup_d」を 画像3(画像C)に指定しましたか?


補足に書いていただいたタグには見受けられませんでしたが、

<span class="popup_d"><span class="btm1"><a href="画像3URL" target="_blank">解説5<br>解説6<img src="画像3URL" alt="" border="0" width="" height="270" /></a></span></span>

↑こう書きかえることで大丈夫だと思います。


それから、大きなお世話なのですが

今回書いていただいたタグには、全角文字が混ざっていました。
今は全角文字が入っていても、ブラウザ側が対応してくれますが
タグを書くときは半角入力で書くことをお勧めします。

ブログに書いているのなら、
投稿欄にいきなりタグを書いていくのではなく
テキストエディタ(メモ帳でも構いません)などに下書きしてから
コピーした方が確認もしやすくていいのではないでしょうか。

terapadなどのテキストエディタを使えば、
タグの色分けの機能がありとても分かりやすいです。
HTMLやCSS(スタイルシート)の勉強をするのなら、持っていて邪魔にはならないと思いますよ。

参考URL:http://www5f.biglobe.ne.jp/t-susumu/library/tpad …
    • good
    • 0
この回答へのお礼

回答有難う御座います
“画像A 画像B 画像C と置き換えて…”

ハイ構いません

“クラス名「popup_d」を 画像3(画像C)に指定しましたか?”
これは意味が分からず、出来てませんでした

“大きなお世話…タグには、全角文字が混ざっていました。”
えっ?全角が入ってましたか?
それは失礼しました、自分では全て半角で入れたと思ってたんで…
ちなみに、何処に入ってたでしょうか?

でも、大きな御世話なんて事は、ありません
有難う御座いました

ただ…やはり反映しません
詳細を言うと、今回御指摘の「popup_d」
なんですが、反映させたい画像タグを見たら
「popup」だったんで「_d」を付け加えたんです
そしたら、何と画像が最初から出てるんです

私がタグ等を間違ったかと思い
今回のスタイルシートとHTMLタグも
両方コピーして貼り付けましたが、やはり同じでした

しかも…「_d」を取ったら
前の様に画像が消え…しかし、当然ですが
ポップアップで出る画像は、元の隙間の空いた位置です
一応、念の為、私のコピーして入れた
スタイルシートと、HTMLタグを載せてみました

.popup img , popup_d img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover , .popup_d a hover {
position:relative;
}

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

.popup_d a:hover img{
top:-200px;
left:20px;
}


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

<span class="popup_d"><span class="btm1"><a href="画像3URL" target="_blank">解説5<br>解説6<img src="画像3URL" alt="" border="0" width="" height="170" /></a></span></span>

お礼日時:2009/10/25 23:11

>正確に反映した所は、AとBで


>縦横が、共に約400の、ほぼ正方形
>又は、縦が約300の横が約400
>しかし、スペースが空いた画像はCで
>縦が200代半ばの横が400弱でした

>この現象は、画面上のHTMLタグで
>AとBに関しては、縦を全て200代後半で揃えたんですが
>その数字だと、Cの場合
>画像が大きく出過ぎる為、Cのみ縦の数字を小さく変えました


画像A、画像Bの縦幅サイズを200後半でそろえた、ということは
 例: <img src="a.jpg" heigth="280" />

↑このようにタグを書いたということでしょうか。
この場合、とくに横幅(width="")を指定してやらなくても
おそらく縦と同じ比率で縮小され、表示されると思います。(ブラウザによりますが)


元のサイズが 600×400の画像を
imgタグで <img src="~~~.jpg" height="300" />と書いたら
ブラウザで 300×200のサイズで表示される、ということです。


>縦の数字をAとBに合わせると、問題なく位置も反映しました

↑ここで答えが出ているかと思いますが…。


要するに、ボタンと画像の底辺の距離を揃えたいということですよね。

画像Cの表示位置を変えれば問題は解決すると思います。
(3つの画像の上辺は揃わなくなりますが。)

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

↑これで指定しているのは、
ポインタしたときに表示される画像の左上の隅の部分です
ペイントソフトなどで 0.0 と表示されるところです。

したがって、画像Cを縮小したうえで
画像A、画像Bと同じような位置(ボタンから画像の底辺の距離)に表示させたい場合、

top:-200px;
left:20px;

↑これくらいに指定したらいいのではないかと思います。
その際は もちろん、以前に説明したようにクラス名を変えて
新たなスタイルを書き加える必要があります。

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

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

.popup a:hover {
position:relative;
}

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

↑この書き方ですと、クラス名「popup」にしか反映しませんが
複数のクラス名に反映させるやり方もあります。


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

.popup a:hover , .popup_d a hover {
position:relative;
}

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

.popup_d a:hover img{
top:-200px;
left:20px;
}

複数のクラス名を書くには、コンマ(,)で区切ります。
上記のように書くと、 通常表示時の画像の位置については
クラス名「popup」「popup_d」のどちらについても同じスタイルを指定し、

ポインタしたときに画像が表示される位置については別の位置を指定しています。


◆セルタグについて

この質問に対しては、他の方々が丁寧に教えてくださっているようですので
私の方からの発言は控えます。

ただ、私でしたら

「もとから書き続けていたテーブル」と
「新たに画像セルも追加したテーブル」を

まとめて大きなテーブルに入れる方法をとります。

<table>
<tr><td>
 もとから書いていたテーブル
</td></tr>
<tr><td>
 画像を入れるセルを加えたテーブル
</td></tr>
</table>

もとから書いていたテーブルに何かを加えていくのは
自分でも面倒で、レイアウトが崩れる恐れもありますし

確かに、セルの中にテーブルを作る方法は負荷もありますが
私にとっては、いちばん分かりやすい・整理しやすい方法です。

それか、
ひとつのtdタグの中で、スタイルシートで幅を指定しながら
要素を置いていく、という方法もありますが
 (多くのブログテンプレートではこの方法が用いられます)
 
この方法についてはスタイルシートを勉強してからの方がいいかもしれませんね。

この回答への補足

回答有難う御座います

“要するに、ボタンと画像の底辺の距離を揃えたいということですよね。”
あっ、ハイその通りです

画像の底辺と言えば分かり易かったんですね
失礼しました

ただ、その場合だと今回書いた頂いた
.popup img , popup_d img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover , .popup_d a hover {
position:relative;
}

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

.popup_d a:hover img{
top:-200px;
left:20px;
}

これを、そのまま入れるという事でしょうか?
恐らく違う意味なんだと思いますが
これだと残念ながら反映してません…

つまり、前の位置から移動してません…
つまり画像の上の位置が揃ってて
下の位置はズレた状態です

補足日時:2009/10/25 15:12
    • good
    • 0
この回答へのお礼

そして、上記スタイルシートを入れた状態で
HTMLタグを紹介すると<table border="10"><tr><th>見出し</th><td colspan="2">名前</td></tr>中略<tr><th>見出し</th><td><font title="噴出し文字"><a href="画像URL" target="_blank"><img src="画像URL" alt="画像名前" border="0" width="" height="170" /></a></font></td><td><font title="噴出し文字"><a href="画像URL" target="_blank"><img src="画像URL" alt="画像名前" border="0" width="" height="170" /></a></td></tr><tr><th>見出し</th><td><span class="popup"><a href="img src="画像1URL" target="_blank">解説1<br>解説2<img src="画像1URL" alt="画像名前" border="0" width="" height="170" /></a></span></td><td><span class="popup"><a href="画像2URL" target="_blank"><table border=8><tr><td>解説3<br>解説4</td></tr></table><img src="画像2URL" alt="" border="0" width="" height="270" /></a></span></font></td><tr><th>見出し</th><td><span class="popup"><span class="btm1"><a href="画像3URL" target="_blank">解説5<br>解説6<img src="画像3URL" alt="" border="0" width="" height="270" /></a></span></span></td><td><font title="噴出し(?)文字"><table border=8><tr><td>解説7</td></tr></table></tr></td></table>

です
ただ、中略の文字の所は
中略前のタグが何列も上に並んでると考えて下さい
この説明で分かるでしょうか?

お礼日時:2009/10/25 15:13

まとめてみます。




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

http://www.intactmotor.com/hobby-interest/css-po …

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



◆スタイルシート


/* 画像をポップアップ表示させるためのスタイル */
.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タグを使って配置させているのですか?
できれば、そのタグもお知らせください。
    • good
    • 0
この回答へのお礼

回答有難う御座います

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

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

---------------------------
A    B

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

しかし、Cの場合のみ

--------------------------
C 

   

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

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

正確に反映した所は、AとBで
縦横が、共に約400の、ほぼ正方形
又は、縦が約300の横が約400
しかし、スペースが空いた画像はCで
縦が200代半ばの横が400弱でした

この現象は、画面上のHTMLタグで
AとBに関しては、縦を全て200代後半で揃えたんですが
その数字だと、Cの場合
画像が大きく出過ぎる為、Cのみ縦の数字を小さく変えました

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

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

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

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

お礼日時:2009/10/23 23:16

>◆ボタンの枠が(色)が付かない



これはボタンでもテーブルでもなく、ただのテキストに装飾を加えています。
これもまたスタイルシートで設定していますね。

通常のとき、そしてポインタしたときのスタイルは以下のように設定されています。


.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;
}


↑をスタイルシート編集欄へ貼り付けてください。


そして、 ↓のように<span>タグを追加してください

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




余談ですが

値を変更すると、テキストなのにボタンのように見せることできます
-------例↓-------------------------------
.btm1 a {
background-color: #ffafef;
padding: 2px;
color: #815490;
text-decoration: none;
border: outset 4px #5984bd;
}

.btm1 a:hover {
background-color: #ffd8f9;
color: #7c0060;
text-decoration: none;
border:inset 4px #0063a4;
}
------------------------------------------


 ↑に書いたふたつのスタイルは
  スタイルシート編集欄に同時に置かないようにしてください。
  クラス名が同じなので、どちらか片方にしておきましょう。
  (クラス名を変えるなら大丈夫です)



ここまでで、
>◆セル枠全体に反映
への対策はクリアでしょうか?

もし、テーブルタグを使いたいのであれば
次回にお答えします。



>◆同じページで違う場所に反映は?

クラス名を変え、スタイルも書き加えます。


.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}
.popup img{
display:block;
position:absolute;
}
.popup a:hover {
position:relative;
}

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


↑の例に挙げたもので説明すると

「popup」がクラス名です。

HTMLタグの中で、「popup」とクラス名をつけられたもの全てに対して設定を反映します。



画像の表示される位置を変えたいという場合は
クラス名と位置の値を変更して、新たにスタイルを書き込みます。

クラス名は、スタイルシート内に同じものがないようにしてください。

ここではわかりやすく、 popup_b とします。


.popup_b img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}
.popup_b img.popup{
display:block;
position:absolute;
}
.popup_b a:hover {
position:relative;
}
.popup_b a:hover img{
top:-50px;   ←← 上下方向
left:200px;   ←← 左右方向
}



タグには「popup_b」というクラス名をつけます。

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


top と left で
ポインタしたときに画像が現れる位置を指定していますので
ここの数値を好きなように変えてください。

top:50px; と書けば 「もとの場所から 上へ50px移動」
top:-50px; と書けば 「もとの場所から 下へ50px移動」

また、

left:50px; と書けば 「もとの場所から 左へ50px移動」
left:-50px; と書けば 「もとの場所から 右へ50px移動」

という意味になります。


スタイルシートは、HTMLだけでは表現しきれない装飾を付け加えることが出来るので便利です。

この回答への補足

いつも丁寧に回答して頂いてスイマセン…
にも関わらず
スタイルシートも、ほとんど理解出来ない状態なのに
毎回の様に色々質問してしまい
申し訳ありません

ただ、私自身、理解もせずに
返答して頂いたタグを、そのまま入力してしまい
混乱気味に、なって来た感じが、しますんで
少し整理しようと思います

そこで今回、この様に質問します

◆まず、以前聞いたのが
このHP
http://www.intactmotor.com/hobby-interest/css-po …
と、このHPだったんですが
http://garage.mods.jp/ex/css-popup/

まず上のHPの方が、今回に該当しそうなんで
それで表現すると

スタイルシートとHTMLタグの方は
どれを入力すれば良いでしょうか?
と言うのが、両者のタグを入力した様にも思えましたんで…

◆ボタンアイコンの方は
御蔭様で、反映しました
ただ、表示を見て感じたんですが
このボタン表示、例えば
文字は赤、バックは青の様に色は付けられるでしょうか?

◆セルタグに関してなんですが
-------------------------------------
|見出し|解説解説…
-------------------------------------
|見出し|画像画像画像|画像画像画像
-------------------------------------
|見出し|ボタン   |ボタン
-------------------------------------

以前にセルタグは、上記の様な感じと書きましたが
実は、そのスタイルシートで
変な反映が出てるんです

ただ、セルに関連して…
という意味じゃないと思いますが
それは、ボタンと飛び出す画像の位置関係なんです
ここでは、ボタンと画像の表示だけ書きますが

補足日時:2009/10/21 09:16
    • good
    • 0
この回答へのお礼

長くなったんで、2つに分けました

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

と上下の段に2つと1つを表示してますが
以前に教えて頂いた
.popup a:hover img{
top:30px;
left:20px;
}
この
スタイルシートだと

---------------------------
ボタン  ボタン
---------------------------
画像   画像

と、ボタンの下に画像が出てました
そしてボタンの位置としては
全てのボタンに対して、同じ位置に画像が出てます

しかし、今回、ボタンの上に画像表示させ様と
.popup a:hover img{
top:-300px;
left:20px;
}

この様に設定すると
他のボタンと画像は

画像   画像

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

この様に、丁度良い位置に表示されます
しかし、上段、左のボタンのみが
この様に、異常に距離が空いた位置に画像が出て

画像

   

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

後の2つは丁度良い位置に出てました
ちなみに-300に関しては
これより少ない数字だと
アイコンに画像が重なってた感じだったんで…
これは、どうしてでしょうか?

お礼日時:2009/10/21 09:15

成功しましたか、良かったです。


こちらも説明ベタでご迷惑おかけしました
少しでもお役に立てたのなら嬉しいです。

何度もすみませんが、訂正があります。

回答No.8の中に書いた

.popup img.popup1{
display:block;
position:absolute;
}

↑は不要なものですので消してください。
(自分でテストしていたときに書いたもので、消すのを忘れていました)


スタイルシートとHTMLの関係については
わかりやすい解説サイトがたくさんありますし書籍もいっぱいあります。

「スタイルシート」 「初心者」 「解説」などの単語でネット検索してみて
ご自分で分かりやすいと思えるものを見つけてください。

http://saru-html.pupu.jp/css1.shtml
http://park16.wakwak.com/~html-css/css/index.html
http://www.d3.dion.ne.jp/~tiyoko01/style/style2. …


大抵のブログサービスはスタイルシートを外部ファイルとして読み込みます。
FC2では HTML編集欄に<link type="text/css" rel="stylesheet" href="<%css_link>" /> という記述があります。
これが外部スタイルシートを読み込むためのリンクです。
そうですね、パソコンソフトにはいろいろな設定ファイルがたくさんあります
それと似ているところはありますね。


>上の下のタグの違い

うまく説明できるかわかりませんが
例に挙げていた上のタグについて、少し説明してみます。


上のタグは スタイルシートで設定した popup_a というスタイルを
divで囲んだ範囲内に反映させています。

下のタグも同様に、 popup のスタイルを設定しているのです。


popup_a で囲まれた中 <div class="popup_a">~~</div> にあるimgタグの位置を指定しているのが↓のスタイルです

.popup_a img.pop {
display:block;    ←← 表示させます、という意味
top:-10000px;    ←← 10000px下の方に
left:-10000px;    ←← 10000px右の方に
position:absolute;  ←← もともと表示される場所を指定
}

↑を簡単な説明にすると
popup_aで囲まれた中にある、popというクラス名が付いたimgタグの画像を
「画像がされるはずの場所から、10000px下、10000px右に表示させる」ということです。

画像が表示されるはずの場所とは imgタグが書かれた場所です。

つまり、画像は消えたわけではなく
画面の外に表示されていて見えなくなっているだけということです。


そして、 ↓でポインタしたとき画像の位置を指定しています。

.popup_a a:hover img.pop
{
top:-256px;  ←← 256px下の方に
left:0;    ←← 左右については動かさない
}

↑これを言葉にすると
ポインタしたら「画像がされるはずの場所から、256px下に表示させる」という意味です。



うまく説明できずにすみません。


スタイルシートの勉強はおすすめします
覚えてしまうと簡単です。
HTMLタグよりわかりやすいかもしれません。

ある程度わかるようになってきたら、今回の例のものも見直してみてください。
上のタグと下のタグの違いがはっきりわかるようになりますよ。

今回は私自身にもとても勉強になりました
ありがとうございました^^

この回答への補足

回答有難う御座います
御蔭様で、現在完成目前迄来ました

ただ、スイマセン…私自身が説明を忘れてて
新たな疑問が出て来たんで
もう少し御付き合いして頂けるでしょうか?

まず今回のタグに関してなんですが
実は、この様なセル設定に使用したかったんです

-------------------------------------
|見出し|解説解説…
-------------------------------------
|見出し|画像画像画像|画像画像画像
-------------------------------------
|見出し|ボタン   |ボタン
-------------------------------------

尚、上記では解説が2つ書いてますが
これは、長い文章と考えて下さい
そして、画像に関しては、複数ではなく
セル内一杯の大きさだと考えて下さい

ただ、上記タグに関しては、ここで書くと長くなる為
必要で、あれば言って頂ければ、次回に書かせて頂きまが
ここからが質問なんです

◆ボタンの枠が(色)が付かない

http://www.intactmotor.com/hobby-interest/css-po …
ここのHP内では(押しちゃダメ)のボタンに枠が付いてます
しかし、私の記事に入力した所、反映せず文字だけでした

恐らくですが、この枠に何か入れてるんだと思いますが
一応、現在は<table border=5><tr><td>画像</td>…</tr></table>
で作り、つまりセルの中に小さいセルを作り
その中にボタンの文字を入れてる状態で

見た目にはボタンがセルの枠で浮き出てる様に作ってます

これをHPの様に作る方法は無いんでしょうか?

補足日時:2009/10/18 14:47
    • good
    • 0
この回答へのお礼

スイマセン…文字数に引っかかった為、2つに分けました

◆セル枠全体に反映

この説明なんですが、上記で書いてるボタンを見て頂くと
ボタンの横にスペースが空いてるのが分かると思います
これは、分かり易くする為に、少し大袈裟に空けたんですが

上で、ボタンマークに関してセルの枠を付けたと書きました
従って、本来なら、ボタンに触れた時に
隠れた画像が出て来て欲しいんです

しかし、現在の設定だと、ボタンだけではなく
ボタン枠外で、セル内の開きスペースに触れても
画像が出て来るんです

つまりボタンだけでなく、ボタンの周りに触れても出て来ると…
これは設定が悪いんでしょうか?


◆同じページで違う場所に反映は?

今回はスタイルシートとHTMLの中に
御指摘のタグを入れました

それでスタイルシートの場合は
特に入れる場所に指定も無く、1つ入れたら
他に記事を複数作っても
同HTMLを入れると反映する事も知りました

これは試験的にですが、新規の記事を作って試したからです

ただ…そうすると不思議なんですが
今回の様に、記事の中に同じ反映の場合は
今回の設定で良いと思いました

しかし、例えば…ですが
これが同じ記事で、画像が出る場所を変えたい場合は
どうなるんでしょうか?

つまり、今回の場合は2つ以上並べた画像が
全て同じ位置…つまり、ボタンの下に画像が出る状態ですが
もし、記事のスペースの関係で
1つ目の画像はボタンの下、2つ目のボタンは画像の上…
みたいな感じで設定したい場合は、どうすれば良いんでしょうか?

お礼日時:2009/10/18 14:48

ふたつとも実行させるためには、それぞれのスタイルシート設定が必要です。



以下をスタイルシート編集欄へ貼り付けしてください
(スタイルシート編集欄の一番下あたりに)

---------------------------------------------------------------
.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}
.popup img.popup1{
display:block;
position:absolute;
}
.popup a:hover {
position:relative;
}

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

.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>



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


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


これで大丈夫だと思いますが…。

だめだったらまたご連絡くださいm(__)m


なお、ポインタしたときに画像が表示される位置については

top: **px;
left: **px;

↑この値を変更することで好きな位置に出来ます。

http://www.scollabo.com/banban/ref/refcss_05.htm …

この回答への補足

回答有難う御座います
御指摘のHTLMとスタイルシートの
両タグを入力しましたが
どうやら、やっと成功した様です(笑)

ただ、上のタグの方は、IEでは一応場所としては成功なんですが
Firefoxだと、画像の出る場所が少しズレてました
しかし、下のタグだと両者でも問題なく反映しました
本当に、ここ迄色々御世話に、なりました
…と、ここで今回
新たな疑問と今後の勉強方法に関して質問します

まず1つ目、HTMLタグに関してなんですが
今回の上と下のタグに関しては、何が、どう違うんでしょうか?

2つ目、スタイルシートなんですが
今回、入力する場所は何処でも良いとの事で
しかも反映した訳ですが
これは、どうして入力する場所が何処でも大丈夫なんでしょうか?

この質問は、以前に背景画像を
スタイルシートで変えたと書きました
その時には、最初に設定してあったテンプレートのタグに対して
入れ替える様に、自分の画像タグを設定して反映しました
ですから私は、決まった位置に入力しないとダメだと思ったんです

でも決まった場所じゃなくても大丈夫な理由って何でしょうか?

これは私のイメージですが、パソコンの場合フリーソフトや
ウィルスソフト含めて、色々なソフトを入れる場合
プログラムファイルズにメインが入り

補足日時:2009/10/17 00:14
    • good
    • 0
この回答へのお礼

長くなって文字制限に掛かった為、分けました
それとは別に設定等が必要な場合は
設定ファイルが別の所に保存されてる場合が、あります
何か、このパターンで言うと
スタイルシートがプログラムファイルズみたいに
感じたんですが…

3つ目、今回反映した影響で
少し気持ちが落ち着いたんでしょうか?
最初に御説明頂いた、No.4の解説ですが
当時は何が言いたいのか?…つまり
何が書いてあるのかが全く雲を掴む様な状態でした

しかし、今読むと、理解は、まだ出来ませんが
把握位は出来て来た様に思えます
ただ、私も今回、自分で言うのも変なんですが
相当苦戦しました
でも、良い経験を、したと思ってます
そこで、今迄はHTMLタグしか使用しませんでしたが
今後はスタイルシートも勉強して、ブログに反映させたいと思います

しかし、問題は、その方法です
実は、No.4でも書いて頂いてるHPなんですが
書いてる説明でも、イメージ位は分らなくは無いです
でも、反映具合が画像等で載ってなく
解説の文章しか載ってない為、今1つ分かり難いです

そこで聞きたいんですが
初心者でも分かる様な解説HPって御存知無いでしょうか?
また、自分で探す時、どういう言葉を入れれば
ヒットし易いと思いますか?

最後に、ここ迄丁寧に教えて頂いて感謝してます
ただ、まだ終了してませんが
もし、自由に発行出来るなら
この質問の終了時点で、1000ポイント位
差し上げたい所です

しかし、最高20ポイントしか出来ませんから
それで御勘弁を…(笑)

お礼日時:2009/10/17 00:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!