特殊(？)タグが反映しません

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

現在ＦＣ２ブログを運営してから
２ヶ月が経過しました
ちなみにＯＳはビスタで、ブラウザはＦｉｒｅｆｏｘ３.５です

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

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

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

そして、以前の投稿で教えて頂いたＨＰですが
反映しないタグが
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>

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

ちなみに私は普段Ｆｉｒｅｆｏｘを使用ですが
ＩＥ６に切り替えても同じでした

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

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

それで、通常はＩＥしか
反映しないのかも知れませんが
出来ればＦｉｒｅｆｏｘでも反映するタグが有難いです

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

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

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

No.7 回答者： 756co 回答日時： 2009/10/14 23:40

何度も煩わせてしまってすみません。

こちらの説明不足です。

HTMLのタグは
表示させたいところ（ブログ本文、HTML編集欄、プロフィール編集欄など）へそのまま貼り付けてOKです
---------------------------------------------------------------
<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>

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

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



スタイルシートは
スタイルシートは編集欄へ貼り付けます。

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

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:-190px;
left:-280px;
}
---------------------------------------------------------------


「スタイルシートはHTMLタグと組み合わせる」ということについては、

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

↑このように　popupというクラス名のスタイルシートを設定し、

↓貼り付けタグに指定していることで「組み合わせる」ということです。

<span class="popup">
　　　　~~~~~~~~~~~~~





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

↑これを貼り付けるのは、スタイルシート編集欄の中ならどこでも構いませんよ。


気をつける点といえば、

{　　}　このようなカッコの中に挟まらないようにするだけです。


body
{
～～～～～～～
～～～～～～～
}
h1,h2,h3
{
～～～～～～
～～～～～～
}

↑最初からいろいろな記述があると思いますが、

貼り付けるときは　もとからある　{　}　の中に入らないようしてください。



HTMLのタグ、スタイルシート
貼り付ける順番はどちらが先でも構いませんが
スタイルシートを先に更新しておいた方が確認しやすいかと思います。


それでも、スタイルシート編集欄の中のどこに貼り付ければいいかわからない場合は

HTML編集欄の　</head>　のすぐ上あたりに以下をコピー＆ペーストしてみてください。

<style type="text/css">
<!--
.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:30px;
left:20px;
}
-->
</style>

この回答へのお礼

“何度も煩わせて…こちらの説明不足です。”

とんでも無いです、私の方こそ相当勉強不足の様で
毎回丁寧に教えて頂いてるのに聞くばかりでスイマセン…

ただ…今回の結果なんですが
半分反映…つまり成功で、半分失敗です(笑)
尚、文字数制限の関係で
御紹介のタグを直接ここには入力出来ませんでしたが

私のブログで、今回御紹介のタグとスタイルシートを
御指摘通り、コピーして設定しました

尚、ＨＴＭＬの場所に関しては
御指摘の
“ＨＴＭＬ編集欄の　</head>　のすぐ上あたりに…”
が、ありませんでしたから
まだ試験的な意味も含めて、空いてる適当な場所に入力したのと
スタイルシートの方は、一番下に入力しました

そして詳細なんですが、御指摘のコピーを貼った結果は
Ｆｉｒｅｆｏｘ３.５とＩＥの両方で見たんですが
サムネイルの方は全く何の表示も無く
但し(押しちゃダメ)の方は
ＩＥでは文字の左上の方に、空欄(？)の画像と言うべきでしょうか

一応表示されました、しかし
ユーザーの多くがＩＥだと言っても
私の場合Ｆｉｒｅｆｏｘですから
それで反映されないのは意味が、ありません

ただ、試にと思い、まだ実行してなかった
http://garage.mods.jp/ex/css-popup/
のタグをＨＴＭＬとスタイルシートに入力すると
こちらは、両者(ＩＥで＆Ｆｉｒｅｆｏｘ)でも見事に反映しました
但し、このＨＰの方は
http://www.intactmotor.com/hobby-interest/css-po …
両者共、全くの反映無しなんです

勿論、私のブログでは反映しませんが
ＨＰにアクセスすると、ＩＥもＦｉｒｅｆｏｘも反映します

従って、今回の結論としては
今回御紹介のタグでの結果が、ＩＥでは空欄が反映
しかし、Ｆｉｒｅｆｏｘでは反映出来ず

このＨＰはＨＰ内と私のブログが両者で反映
http://garage.mods.jp/ex/css-popup/
しかし、このＨＰはＨＰ内では両者が反映
私のブログでは両者が反映せず
http://www.intactmotor.com/hobby-interest/css-po …

でした、従って半分解決と自己判断しました
これの原因って分りますか？

お礼日時：2009/10/15 19:43

No.6 回答者： 756co 回答日時： 2009/10/14 19:34

画像にあった　pink_2columnというのはテンプレート名なので気にしないでください。

編集するテンプレートの名前が表示されているだけです。

ただ、スタイルシートの入力部分について説明したかっただけです。
余計に混乱させてしまい申し訳ありません。

＞スタイルシートの編集画面の一番下に
＞前回御紹介のタグを入力した訳です

スタイルシートの編集部分へ貼り付けたのですね。
これで間違いありません。

それできちんと反映されないのはおかしいですね…


スタイルシート編集部分に以下を貼り付けが出来ているのなら
表示されるはずなのですが…。

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

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:-190px;
left:-280px;
}


FC2ブログで試してみたら、うまく表示されました。

↓のHTMLのタグはどこに入力していますか？

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

↑のタグの中では、ダブルクォーテーションが全角のところがありますね。

全角スペースも入っているようなので、直してみてください。

　”　→　"

この回答へのお礼

回答有難う御座います

分り難い反映の説明だったみたいでスイマセン
ただ“↓のHTMLのタグはどこに入力していますか？”
に関しては、前回書いた様に↓
「更に、今迄知りませんでしたから
“HTMLタグと組み合わせなければ意味をなしません。”
この事に関しても、何も設定出来てません

これは、どう設定したら反映するんでしょうか？」

という具合に、何も設定してません
そう考えると、現在反映して無いのは
恐らくダブルでの入力(？)が無いからでしょうか？

ただ、そうだとすると更に確認なんですが
まずＨＴＭＬタグを
ブログ本文記事入力欄の、本来反映させたい部分に入力
その後にテンプレート変更が反映する
スタイルシートの中に
上記のスタイルシート用のタグを入力という事でしょうか？

もし、そうだとすると
まず分らないのは、ＨＴＭＬタグの入力部分は
一応分ります
ただ、スタイルシートの入力欄では
何処にタグを入力すれば良いのか？…

という事なんです
変な話ですが、何処でも適当な場所に入れれば
反映という訳では無いと思いましたから…
その理由は、背景画像のスタイルシートタグでも
規定の場所に入力…但し、この時には
既に入っていたスタイルシートのタグを消して
全く同じ所に、自分の画像用スタイルシートタグとして
入力しましたから(笑)

お礼日時：2009/10/14 22:10

No.5 回答者： 756co 回答日時： 2009/10/14 11:47

スタイルシートはHTMLと全く別物ですが

HTMLタグと組み合わせなければ意味をなしません。

↓このようなスタイルシートは　「タグ」とは呼びません。
　　（私もわかりにくい説明を書いてしまいました。すみません。）

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

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:-190px;
left:-280px;
}

貼り付けたのはスタイルシートの編集部分ですか？

赤線で囲んだように、下の方にある編集部分です。

この回答へのお礼

回答有難う御座います

どうやら全然違う所に入力した様ですね(私が)
もっとも、反映しなかった時点で
消しましたから、問題無いとは思いますが…

画像を拝見すると
「スタイルシート」の前に「pink…」と
入ってるでしょうか？
私が入力したのが
「tmpl013_sacredForest のスタイルシート編集」欄です

ただ、スイマセン…
貴方には画像を付けて頂いたんですが
本来なら、私も画像を付けられれば一番分り易いと思います
しかし、この投稿欄では
回答者は新回答の度に画像を付けられますが
投稿者は１回しか付けられない為
もっと重要な画像の時の為に、現在は付けられず
申し訳ありません

結論から言うと、専門用語が分りませんから
この質問ではタグと呼ばせて下さい

今回入力したのは
テンプレートのスタイルシート編集画面です
というか、そのスタイルシートしか知らなかったからです

そのテンプレートの編集ページでは
ＨＴＭＬの編集画面とスタイルシートの編集画面の
２つが、ありますが
スタイルシートの編集画面の一番下に
前回御紹介のタグを入力した訳です
ただ、スタイルシートの編集画面の事が分かった…
つまり、存在を知ってたのは
以前にレスした
背景画像を自分の好きな画像に変えた時に使用したからです

更に「tmpl013_sacredForest のスタイルシート編集」欄
の直ぐ下には
「カスタマイズマニュアル」
という項目が、あるんですが
クリックすると、このページに行きます
http://blog.fc2.com/custom_manual/

従って、私の場合
スタイルシートの編集画面というのは
この画面しか知りませんし
検索で調べても、この画面の事しか見つかりませんでした
更には、今回の内容で調べようとしても
皆、テンプレートの…つまり背景画像や
文字や色の編集方法しか載ってませんでした

更に、今迄知りませんでしたから
“HTMLタグと組み合わせなければ意味をなしません。”
この事に関しても、何も設定出来てません

これは、どう設定したら反映するんでしょうか？

お礼日時：2009/10/14 14:58

No.4 回答者： 756co 回答日時： 2009/10/13 18:43

＞テンプレートの変更画面と解釈して良いんでしょうか？

そうです。
テンプレートの編集になります。

スタイルシートは背景画像はもちろん、文字の大きさ、色
また配置の設定などHTMLのデザインを補助できるようなものです。


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

↑この記述では、
popupのクラス名をつけられたimgタグの通常の位置を指定しています。
画像は消えているわけではなく画面の外に表示されているだけです。

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:-190px;
left:-280px;
}

↑この記述で、ポインターが乗ったときの画像表示位置を指定しています。


スタイルシートはCSSと呼ぶこともあります。
HTMLの知識に加え、CSSを覚えておくととても便利です
今回のこのタグについても、意味がわかってくるでしょう。
時間のあるときにでも、skyfangさんの教えてくださったサイトをじっくり読んでみてください。
http://www.tohoho-web.com/css/basic.htm


＞------------------------------------
＞画像　画像　ボタン
＞------------------------------------
＞
＞と、通常は画像を左に２枚並べておき
＞一番右は、クリック用等のアイコンを置きます
＞そして、そのアイコンにカーソルを合わせる等の
＞アクション時に、画像が出る様に設定したいんです
＞
＞可能でしょうか？

一番右のクリック用等のアイコン　とは画像ですか？
それともinputタグのボタンですか？

いずれにしろ、タグとCSSを書き換えれば可能だと思いますよ。

この回答へのお礼

回答有難う御座います

ただスイマセン…
どうも私自身が理解出来てないと思うんですが
言われた通り、前回御紹介して頂いた
このタグ
.popup img {
display:block;
top:-10000px;
left:-10000px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:-190px;
left:-280px;
}

を“そこへ　↓をそのままコピー＆ペーストしてください
一番下の方でいいでしょう。”
に貼りました
勿論、ＦＣ２ブログのテンプレート編集欄の
一番下に…です

しかし、ブログ本文を見ると
何の反映も、してません
当然、反映してるか、どうかを確認したのは
ブログの本文ですが…

尚、当然ですが、念の為にと思い
ＨＴＭＬタグの反映する本文記事にも
同タグは貼りましたが
これは、文字が、そのまま表示されてるだけです

恐らくですが、私自身が理解出来ずに
反映出来て無いんだと思いますが…

お礼日時：2009/10/13 22:32

No.3 回答者： 756co 回答日時： 2009/10/13 11:09

補足読みました。

＞<div class="popup">
このタグで指定されているクラスはCSSに書き加える必要があります。

FC2ブログのテンプレート編集に
スタイルシートの入力ボックスがありますよね。
（○○○のスタイルシート編集とあるテキストボックスです）

そこへ　↓をそのままコピー＆ペーストしてください
一番下の方でいいでしょう。

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

.popup a:hover {
position:relative;
}

.popup a:hover img{
top:-190px;
left:-280px;
}

これはポイントされたら画像が現れるようにするためのものです。
これがなければ意味がありません。


それと、

＞<span class=”popup”>
＞<a href=”　　″ target=”_blank”>(押しちゃダメ)<img src=”　　” width=”280″ height=”180″ /></a>

↑では　ダブルクォーテーションが全角になっています
すべて半角に変えてください。

　”　→　"

<span>タグも閉じた方がいいでしょう。

</a>のすぐうしろに　</span>を書き加えてください。


アドレス（http://～）の前にスペースが入っているので
それも消した方がいいですね。

この回答へのお礼

回答有難う御座います

これは私の解釈が違ってたらスイマセン
“FC2ブログのテンプレート編集…スタイルシートの入力…ありますよね。”
この事なんですが、これは
テンプレートの変更画面と解釈して良いんでしょうか？

つまり、私は以前
ＦＣ２ブログに付いて(？)るテンプレートを
背景に設定してましたが
現在は、自分の好きな写真を背景に設定してるんですが
その設定画面の事ですか？
http://blog.fc2.com/custom_manual/#m001

もし、そうだとすると
そこで設定を変えて、記事本文に反映すると
いう事でしょうか？
まだ試しても、いない状態で
しかも推測で返答してスイマセン
何か、ここで設定変更しても
背景等が変わるイメージしか無いんですが…

それと、今回の投稿で書き忘れたんですが
今回の目的なんですが
最初に画像を表示せず…と書きました

ただ、正確に言うと、こういう事なんです

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

と、通常は画像を左に２枚並べておき
一番右は、クリック用等のアイコンを置きます
そして、そのアイコンにカーソルを合わせる等の
アクション時に、画像が出る様に設定したいんです

可能でしょうか？

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

No.2 回答者： noname#140925 回答日時： 2009/10/12 19:48

不精せずに、先ずは基礎知識を身につけてください。

[参考]とほほのＷＷＷ入門
http://www.tohoho-web.com/www.htm

使えるタグの一覧も上記サイトに羅列されています。

この回答へのお礼

申し訳ありませんが
不精なんて、してません
自分をフォローする、つもりは無いですが
簡単に言えば、こういうタグに関しては
初心者だという事だけです

それと、御紹介のＨＰなんですが
これも申し訳ありません
何処を、どう見れば今回の質問が該当するのかが分かりません

一応、スタイルシートのページで見ましたが
http://www.tohoho-web.com/css/index.htm
ただ、タグが並んでるだけで何も分かりませんでした

お礼日時：2009/10/12 21:34

No.1 回答者： 756co 回答日時： 2009/10/12 19:17

CSS（スタイルシート）は書き加えましたか？

この回答へのお礼

回答有難う御座います

実は投稿した後で気付いたんですが
この反映はＨＴＭＬでは無く
スタイルシートでの反映なのか？…という事でした

但し、スタイルシートだったとしても
一応探したんですが
ＦＣ２ブログの場合、記事本文で反映させる方法が
全く分かりません

ちなみにＦＣ２ブログでの説明と
検索でも調べましたが、私の探し方が悪いのか、どうか
全くヒットしませんでした
一応、私が分かるスタイルシートは
ブログの背景画像を変えるページで
ＨＴＭＬとスタイルシートが選べる(？)事だけです

この場合は、どうすれば良いんでしょうか？

お礼日時：2009/10/12 21:31