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

質問

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

回答No.9

756co

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

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

回答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.html

大抵のブログサービスはスタイルシートを外部ファイルとして読み込みます。
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タグよりわかりやすいかもしれません。

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

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

お礼

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

◆セル枠全体に反映

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

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

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

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

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

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

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

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

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

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

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

補足

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

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

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

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

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

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

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

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

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

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

これをＨＰの様に作る方法は無いんでしょうか？