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

質問

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

回答No.7

756co

何度も煩わせてしまってすみません。
こちらの説明不足です。

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/2009/09/osuna.gif" 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-popup/
両者共、全くの反映無しなんです

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

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

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

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