【FC2】マウスポインターどこに入れれば良い??

前へ 次へ
このQ&Aのポイント
  • FC2のマウスポインターの設定方法について、初心者のために説明してください。
  • XTMLの編集やスタイルシートの編集に関わらず、マウスポインターのタグは<BODY>タグ内に入れる必要があります。
  • 具体的なマウスポインターのタグは<SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/starmouse.js"></SCRIPT>です。
回答を見る
  • ベストアンサー

【FC2】マウスポインターどこに入れれば良い??　

OKWAVE・FC2ユーザーフォーラム・GOOなど、時間を費やして調べたのですが、初心者のタメ、結局解決に至らなかったので教えてください!!! ジャバスクリプト・DHTMLなどの用語もよく見かけましたが・・・・*汗* まず、 (1)XTMLの編集・スタイルシートの編集どちらに入れたら良いのでしょうか?? (2)<BODY>～</BODY>内に入れると書いてありましたが、入れても変わり　ません　実際どこに入れれば良いのでしょうか?? 私が入れたいマウスストーカーのタグは <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/starmouse.js"></SCRIPT>　です。(サイトにあったものをそのままコピペした物。) ↓これは私のスタイルシートです。↓ /************************************/ /* body */ body{ background-image: url(http://blog27.fc2.com/k/kaerinirorin/file/kkirat1.gif); background-position: left top; background-repeat: repeat; background-color: #FFFFFF; margin: 0; padding: 0; text-align: center; } #baseBlock { width: 760px; padding: 0px; margin: 0px auto; text-align: left; } /************************************/ BODYと書かれておりますが、このあたりで良ろしいでしょうか？？ どこに入れたら良いのでしょうか??? 解かる方、ご回答の程宜しくお願い致します<m(__)m>

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

ウチでも試してみましたが、 単に同じように<body>部分に貼り付けるだけで動作しました。 なので、＃１補足のソースの場所で問題ないと思います。 動作しない原因についてですが、 ＦＣ２を使っていないので、単なる推測ですが、 ・ページの更新がされていない ・外部のスクリプトの実行が拒否されるようになっている とかあるのかもしれません。 外部のスクリプトが実行できないのであれば、 starmouse.js をダウンロードして、 自サイトにアップして src= の部分をアップしたファイル名（http:から始まるフルパスで）に変更してみて下さい。

mikan2646
質問者

補足

ご回答、ありがとうございます!! そして、お返事が遅くなってしまい、申し訳ございません(m>□<)m(下)(下) マウスストーカー、、付ける事ができました!!!!!!　 キラキラ星は止めて、泡が下からふわふわ上がってくるものにしたのですが、、 大・大：大満足デス＼(≧U≦）/ 本当にありがとうございます!!! そこで、ひとつ気になる事があるのですが、、、 スクロールでページの下の方を読もうとすると、 泡(マウスストーカー)が消えてしまうのです。。。 どうしたらマウスストーカーが出来るようになったかと言うと、 ＤＬしたら、テキストドキュメントがあり、そこを読むと、 以下のようなソースがあったので、コピペして画像のＵＲＬをいれたら出来たのですが、 ↓はじめにお読み下さいの文章↓ 　gaiaxでお使いになる場合は同梱の画像ファイルとjsファイルをアップロードして下さい。 　ただし、ファイルがアップロードできる所を借りているのが条件です。 　　その際はjsファイルの　Image0.src="drop1.gif";この部分を 　httpから全て記入して下さい。 　jsファイルの編集はアップロードして編集画面でおこなうか、右クリックで編集を選んで下さい。 gaiax以外でお使いの方は画像ファイルをアップロードした後 以下のソースをコピーしてお使い下さい。画像はご自由に入れ替えて下さい。 <body> <script language="JavaScript"> <!-- Image0=new Image(); Image0.src="drop1.gif";　←ここに入れたい画像のURLを入れました★ Amount=8; Ymouse=-50; Xmouse=-50; Ypos=new Array(); Xpos=new Array(); Speed=new Array(); rate=new Array(); grow=new Array(); Step=new Array(); Cstep=new Array(); nsSize=new Array(); ns=(document.layers)?1:0; WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight; (document.layers)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ Ymouse=(document.layers)?evnt.pageY-20:event.y-20; Xmouse=(document.layers)?evnt.pageX:event.x; } (document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse; for (i=0; i < Amount; i++){ Ypos[i]=Math.random()*WinHeight-Ymouse; Xpos[i]=Xmouse; Speed[i]=Math.random()*3+1; Cstep[i]=0; Step[i]=Math.random()*0.1+0.05; grow[i]=4; nsSize[i]=Math.random()*20+5; rate[i]=Math.random()*0.5+0.1; } if (ns){ for (i = 0; i < Amount; i++){ document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>"); } } else{ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < Amount; i++){ document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">'); } document.write('</div></div>'); } function MouseBubbles(){ var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop; var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft; for (i=0; i < Amount; i++){ sy = Speed[i]*Math.sin(270*Math.PI/180); sx = Speed[i]*Math.cos(Cstep[i]*5); Ypos[i]+=sy; Xpos[i]+=sx; if (Ypos[i] < -40){ Ypos[i]=Ymouse; Xpos[i]=Xmouse; Speed[i]= 6+Math.random()*3; grow[i]=4; nsSize[i]=Math.random()*15+7; } if (ns){ document.layers['sn'+i].left=Xpos[i]+wscrll; document.layers['sn'+i].top=Ypos[i]+hscrll; } else{ si[i].style.pixelLeft=Xpos[i]+wscrll; si[i].style.pixelTop=Ypos[i]+hscrll; si[i].style.width=grow[i]; si[i].style.height=grow[i]; } grow[i]+=rate[i]; Cstep[i]+=Step[i]; if (grow[i] > 24) grow[i]=25; } setTimeout('MouseBubbles()',12); } MouseBubbles(); //--> </script> </body> これの、どこか(数字とか?)を変更すれば、ページの下に行っても泡が見えるようになるのでしょうか？？ もしお分かりになれば是非宜しくお願い致します。 重ね重ねすみませんっ。。 でも、ひと段落しました。。 本当にうれしいです(人´∀｀)．☆．。．:*・

その他の回答 (2)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

#2>これの、どこか(数字とか?)を変更すれば、ページの下に行っても泡が見えるようになるのでしょうか？？ ウチでは、WinＩＥ６で試していますが、スクロールしても大丈夫でした。 画面の下の方にスクロールした後、画面をマウスクリックしてみて下さい。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

HTML の編集の方です。

mikan2646
質問者

補足

ご回答ありがとうございます!!! それだけでも的が絞れて嬉しいです(///ω///) ↓これが私のブログのHTMLの前半なのですが、どの辺に入れたら良いのでしょうか？？ 　 どのサイトも<BODY>～</BODY>としか説明が無く、実際は良くわかりません。 試しに何箇所か入れましたがダメでした・・ ちなみに、<body>の下に私が入れたいマウスストーカーのタグ↓を入れてあります。 アドバイス、是非宜しくお願い致します！！！！ **マウスストーカーのタグ** <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/starmouse.js"></SCRIPT> **私のブログのHTML** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- FC2カウンター ここから --> <script language="JavaScript" type="text/javascript" src="http://counter1.fc2.com/counter.php?id=578867"></script><noscript><a href="http://counter.fc2.com/" target="_blank" title="FC2カウンター">FC2カウンター</a></noscript> <!-- FC2カウンター ここまで --> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <link href="<%css_link>" rel="stylesheet" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml"> <title><%blog_name><%sub_title></title> </head> <body> <SCRIPT type="text/javascript" src="http://www9.ocn.ne.jp/~aki2nd/dhtml/sample/starmouse.js"></SCRIPT> <div id="baseBlock"> <div id="headBlock1"> <a href="<%url>"><div id="headBlogName"><%blog_name></div></a> <div id="headIntroduction"><%introduction></div> </div> <div id="headBlock2"> <!-- search --> <form method="get" action=""> <img src="http://blog27.fc2.com/template/pink/image/header_search.gif" width="68" height="18" /> <input id="search" name="search" size="20" class="search" /> <input type="submit" value="go" class="button" /> </form> <!-- /search/ --> </div> <div id="menuBlock"> <!--plugin--> <!--plugin_first--> <div class="menuBlockBase"> <div class="menuBlockHead" style="text-align:<%plugin_first_talign>">◎ <%plugin_first_title></div> <div class="menuBlockBody"> <div class="menuText"> <p style="text-align:<%plugin_first_ialign>"> <%plugin_first_description> </p> <%plugin_first_content> <p style="text-align:<%plugin_first_ialign>"> <%plugin_first_description2> </p> </div> </div> </div> <!--/plugin_first--> <!--plugin_second--> <div class="menuBlockBase"> <div class="menuBlockHead" style="text-align:<%plugin_second_talign>">◎ <%plugin_second_title></div> <div class="menuBlockBody"> <div class="menuText"> <p style="text-align:<%plugin_second_ialign>"> <%plugin_second_description> </p> <%plugin_second_content> <p style="text-align:<%plugin_second_ialign>"> <%plugin_second_description2> </p> </div> </div> </div> <!--/plugin_second-->

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • 背景画像

    つい先日もこちらで教えていただいたのですが、また分からないのでよろしくお願いします。ビルダー11を使っています。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> </style> </head> <BODY background="080aosirobudou_300.jpg" style="background-repeat:no-repeat"> htmlで全体を真ん中にして、画像はリピートしないようにしていますが 画像の下半分が切れてしまいます。画像を小さくするしかないでしょうか？（加工OKなものを使っています）それと出来れば画像を右端によせたいのですが、上記htmlに <STYLE TYPE="text/css"> <!-- BODY{background-image:url(画像url); background-position:right} --> </STYLE> とすると、画像やスタイルがつぶれます。どうすればよいのでしょうか？ただいま勉強中のため、できましたら素人にも分かりやすく答えていただければありがたいです。よろしくお願いします。

  • FC2ブログ テンプレートのCSS編集について

    こちらのテンプレート http://labyrinth2014.blog.fc2.com/ 記事が長くなると、右サイドメニューの背景が 下部のフッターから離れてしまいます。 この背景は画像になっていますが、記事の長短に関わらず、 フッターまで伸ばすには（繋がるように）どうしたらよいでしょうか。 /* 全体の幅 -------------------------------------------------*/ #container{ text-align: left; width: 950px; padding: 0px; border-right:1px solid #ddd; border-left:1px solid #ddd; margin:0 auto; line-height: 110%; background-color: #fff; } /* 右カラムの幅 -------------------------------------------------*/ #right{ float : left; width : 280px; overflow: hidden; background-color: #eee; background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/gray3.png); background-repeat:repeat; } /* メインの幅 -----------------------------------------------*/ #main { float : left; width : 670px; margin:0px; padding: 0px; overflow: hidden; } ・ ・ ・ 中略 ・ ・ ・ /* サイド右側*/ .sidetitle{ color: #333; font-size:16px; font-weight : bold; text-align: left; background: url(http://blog-imgs-35.fc2.com/w/e/b/weboook/whiteline.png) repeat; padding: 5px 5px 6px 8px; margin : 0px 0px 0px 0px; } .sideblock{ font-size:12px; line-height: 150%; padding: 10px 5px 10px 5px; margin-bottom:15px; } .side ul { padding: 0px; margin : 0px; } .side li { list-style-type : none; display:block; text-align: left; font-size: 12px; color:#333333; line-height: 130%; } .side li a { padding:6px 5px 5px 10px; display:block; border-bottom:1px solid #ddd; } .side li a:hover{ background-image : url(http://blog-imgs-35.fc2.com/w/e/b/weboook/bgGray.png); background-repeat:repeat; text-decoration:none; padding:7px 4px 4px 11px; } よろしくお願いします。

  • 背景画像がきれます

    以前お聞きしたのですが、再度問題が出たのでよろしくお願いします。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> <!-- BODY{background-image : url(画像url); background-position:right top;} --> </style> </head> <BODY background="画像url" style="background-repeat:no-repeat"> でhtml書くと希望通り右上に画像が出たのですが、ずいぶん画像を小さくしなければなりません。もう少し大きくすると画像が切れてしまいます。今の状態で（小さい画像）では、実際サイトを見ると小さく画像の部分だけ区切ったような感じに見えます。どうすれば画像が区切ったような感じにならないのでしょうか？上記htmlが間違っているのでしょうか？それともう少し大きくして画像が切れない方法はないのでしょうか？よろしくお願いします。

  • ホームページの背景画像が途切れてしまう。

    こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------

  • ページの一番上にできた余分な余白の消し方

    ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSでの影の付け方

    http://radiocaroline.jp/ 上記のサイトのようにコンテンツ表示領域と 背景領域の間のグラデーション部分はどのように 設定すればいいのでしょうか？ 現在真ん中780px固定で左右を背景画像にしてます。 <style type="text/css"> <!-- body { background: #000000; margin: 0px; padding: 0px; text-align: center; color: #ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-image: url(images/bg.gif); background-repeat: repeat; } .oneColFixCtrHdr #container { width: 780px; background: #000000; margin: 0px auto; text-align: left; } .oneColFixCtrHdr #header { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #header h1 { margin: 0px; padding: 0px 0px; } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer p { margin: 0px; padding: 5px 0px; } #left { background-color:#000000; width:530px; float:left; } #right { background-color:#000000; width:250px; float:left; } .style2 { color: #FFFFFF; font-size: 80%; } .style1 {font-size: 60%; color: #CCCCCC; } .style6 {color: #CCCCCC} .style7 {font-size: 70%} --> </style>

  • ブラウザ間のCSSの表示違いにつきまして

    現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部（float boxの上）に隙間のようなものができてしまって困っています・・・ CSSは以下になります。 #content { width: 680px; margin: 0 10px; padding: 0; background-image: url(../img/content-back.jpg); background-repeat: repeat-y; text-align: center; overflow: auto; text-align: center; } #left { float: left; width: 456px; margin: 0; padding: 50px 0; text-align: center; } #right { float: right; width: 224px; margin: 0; padding: 50px 0; background-color: #000000; text-align: center; } #footer { height: 60px; margin: 0 10px; padding: 0; background-image: url(../img/footer-back.jpg); background-repeat: repeat-x; text-align: center; clear: both; } CONTENTを親要素として、その中にleftとrightボックスを作成しました。 なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ（auto）にしたくて・・・ どなたか解る方いらしたらご教示お願いします！

    • ベストアンサー
    • HTML
  • Firefoxだけ文字の大きさの制御がきかないんです。

    全体的なテキストの大きさは指定せずに、h2だけ大きさを指定しました。 tdに.menuBarBgを、h2に.menuBarのclass指定したところがあります。 IE6、NN7.2では大きさは制御されているのに、Firefoxではブラウザの「文字サイズ」を大きくすると、それなりに大きくなって、TDからはみ出てしまいます。 ほかのh2は変っても特別問題ないのですが、tdにバックイメージの画像を入れているので、はみ出すととってもおかしいんです。 どのようにしたら良いでしょうか。 body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-image: url(images/bg.gif); background-repeat: repeat-x; background-color: #FFFFFF; } h2{ font-size: 16px; color: #333333; text-align: left; padding: 0; } /* News title */ .menuBarBg{ background-image: url(images/menubg.gif); background-repeat: no-repeat; } .menuBar{ text-indent: 35px; margin: 0; padding: 6px; }

    • ベストアンサー
    • HTML
  • FC2のスタイルシートで背景を変えたい!!!!

    宜しくお願い致します!!! いろいろなサイトでたくさん時間を費やして調べたのですが、 その通りにやってるつもりなのですが、自分の好きな背景に変更できません。+゜(。>д<。)゜+。 背景は　body ですよね？？ ↓私のCSSの最初の部分↓ /************************************/ /* body */ body{ background-color: #FFFFFF; margin: 0; padding: 0; text-align: center; } #baseBlock { width: 760px; padding: 0px; margin: 0px auto; text-align: left; } ↑ ちなみに、私が入れたい背景は、img6f29afc806ki0s.gif 　デス。 今は、背景が白(非常にシンプル)です。 どうか、わかる方、宜しくお願い致します!!!!

  • CSSでレイアウトが崩れます

    CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する