- ベストアンサー
Highslide JSのコントローラーについて質問です。
Highslide JSのコントローラーについて質問です。 http://2dpuppet.web.fc2.com/top.html 上記ページのギャラリーにおいて、画像を拡大した際に表示されるコントローラー(オンマウスで浮かび上がります)が変なリストのままなおりません。 どこをどうすれば画像のようなボタン式になるでしょうか? 初心者ですが、どうかご教授願います。
- みんなの回答 (6)
- 専門家の回答
質問者が選んだベストアンサー
とりあえずなんでスタイルが崩れるのかも動かない理由もだいたいは分かりました。 が、修正箇所が多いことや色々と思うことがあるので置いておきます。 正直なところ、あなたがやりたい事に知識が圧倒的に追いついていません。 初めてなのですから当然ですが、逆に言えば初めての人が インラインフレームやらCSS、JavaScriptを使うということが無理があるように思えます。 簡単なページならコピー&ペーストでもいけるでしょうが あなたが作っているようなサイトだとコピー元に少し手を加える必要があります。 ですので提案としては二つ。 1.慣れている人にホームページの作成を委託する。 2.JavaScriptやCSSを使わず、まずは本当に簡単なホームページから作成し、理解を深める。 以上のどちらかをおすすめします。
その他の回答 (5)
- fujillin
- ベストアンサー率61% (1594/2576)
No1、No2です。 正直に言って、私には質問者様がおっしゃっているのがどこなのか、未だにわかりません。 それを確認する意味からも、No1で特定しようとしましたが、それは無視されたままの状態です。 無視されたままのままなので… >これではコントローラーはなおらないままなのでしょうか。 >もしそうなら、正しい表記をご教授願いたいです。 と言われても、エスパーでもない私には、正しい表記どころか何をしたいのかもわからないままです。 No3様もおっしゃっているように、私の環境でもHighslide JSが動作していることは確認できません。(←#1にも書いてありますが) 想像では、そもそもの設置方法が間違っていると思われます。(何をしたいのか不明なのでわかりませんが) それなので、情報量が変わらない以上No1と同じ回答しかできません。 ここでの短い文章での回答よりも、多くのサイトで設置の方法を解説していますので、それらを確認しながら、まずは動作するように設置することが先決のように思います。(これまた想像ですが、現状は、多分動作していません) 他の要素を入れたり、レイアウトをいじくる前に、まずはご自分で、動作できるように設置できていることを確認することが重要です。 http://es.rojo.jp/js/es_js22.html http://www.koikikukan.com/archives/2007/01/18-005102.php http://blog.le-coeur.net/archives/253# http://www.photoclip.net/blog/2010/02/06/highslide-js%E3%81%AEhighslide-editor%E3%81%AF%E3%81%99%E3%81%94%E3%81%8F%E4%BE%BF%E5%88%A9/ もちろん、本家の解説が一番情報が多いです。(全てあるはず) あるいはDLしたものの中にも設置方法の説明があるはずだと思いますが? http://highslide.com/
補足
それは大変失礼致しました・・・。 fujilin様が仰った箇所です。 こちらの画面では全て正常で、正直混乱しています。 最初は、HPを作って、そこにただHighslide JSを設置しただけでした。 その後、設置したインラインフレーム内から外まで画像がズームしないという状況に見舞われましたので前回の質問をするに至りました。 そもそもデザインが崩れているのは、Highslide JSのせいなのかもわかりません。 これから、一度Highslide JS関係のものをを全て外してみます。 その上でご確認をお願いできますでしょうか? 色んな参考サイトを見て設置してみたのですがうまく設置できずに困ったりもしました。 上記のURLのサイトも何度か見ていますが、うまくいかなかったり・・・。 とりあえず、Highslide JSのCSSやスプリクトを外してみます。
- yuki4499
- ベストアンサー率62% (10/16)
CSSになんか変なゴミがついてたので補足 ↓に修正しておいてください。 http://2dpuppet.web.fc2.com/highslide/highslide.css
お礼
別の友人から見たページのSSを見ました。 自分の見ているページとはまったく違った位置にボックスがあったりして、どうなっているのかわかりません。 自分のページでは確かにデザインどおりにしか(ファイアフォックスでも多少のズレ程度で)表示されないので戸惑ってます。。。 どうしたら正しく表示されるようになるのでしょうか・・・。
補足
えっと、これをTOPのCSSに追加しておくといいのでしょうか?
- yuki4499
- ベストアンサー率62% (10/16)
質問内容ではなかったのでスルーしてましたが、初めからエラーが相当数出ていました。 FF、IE、Opera、スレイプニル、クロームで確認しましたがスタイルも崩れますしHighslide JSが質問者様の言うように作動していたことは一度も確認できませんでした。 別ページでやってると思って途中から気にしていませんでしたが。 ちなみにHTMLチェックとかしてみるとこうなりました。 http://2dpuppet.web.fc2.com/top.html を XHTML1.0 Transitional としてチェックしました。 109個のエラーがありました。このHTMLは -557点です。タグが 20種類 52組使われています。文字コードは Shift JIS のようです。 実際細かい警告を無視したとしてもbodyが二個あったりheadにbodyがあったり”が変な位置にあったりと HTMLが滅茶苦茶な状態になっています。 本題のコントローラーについては <link type="text/css" rel="stylesheet" http://2dpuppet.web.fc2.com/highslide/highslide.css" /> を追加すれば直りますが上記の理由によりまともに動作するかは保証できません。 イラスト同様、いきなり上手なHPを作るということは不可能に近いことなので、あまり凝ったことはせずに初めはシンプルな形式にした方が良いと思われます。
お礼
もうどこをどうすれば正しくなるのかわかりません・・・助けてください・・・。
補足
私の画面からは正常に反映されていたのでどうなっているのかよく把握できかねます・・・。 コントローラーはどのへんに追記すればよろしいでしょうか?
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。回答から離れていってしまうけど… >ファイアフォックスだと崩れてしまうのは把握していました。 他のブラウザでも同様です。FF、IE、Operaもな同様でした。IE6は透過pingに対応していないので余計ですね。 >エラーが出るというのははじめて聞きました。 これもどのブラウザでも出ています。(数は違うかも知れませんが) ちなみに、Opera10の場合だと、 CSSで19個の警告とエラー、スクリプトで2個のエラー(動作するとエラーが増えます)が出ます。 文字数制限があるので、以下一部のみ。ご参考まで。 (最後の2つがスクリプトエラーです) --------------------------------------------------------------- CSS - http://2dpuppet.web.fc2.com/2dpuppet/bace.css Linked-in stylesheet Invalid value for property: cursor Line 109: cursor: url(http://2dpuppet.web.fc2.com/highslide/graphics/zoomin.cur), pointer; --------------------------------------------------------------- CSS - http://2dpuppet.web.fc2.com/2dpuppet/bace.css Linked-in stylesheet Invalid value for property: font-size Line 114: font-size: 10pxt; --------------------------------------------------------------- CSS - http://2dpuppet.web.fc2.com/top.html Inlined stylesheet Invalid value for property: cursor Line 1: ighslide img {cursor: url(../highslide/graphics/zoomin.cur), pointer !important; --------------------------------------------------------------- CSS - http://2dpuppet.web.fc2.com/top.html Inlined stylesheet Invalid value for property: cursor Line 1: ighslide img {cursor: url(../highslide/graphics/zoomin.cur), pointer !important; --------------------------------------------------------------- JavaScript - http://2dpuppet.web.fc2.com/top.html Event thread: DOMContentLoaded Error: name: TypeError message: Statement on line 52: Cannot convert undefined or null to Object stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace --------------------------------------------------------------- JavaScript - http://2dpuppet.web.fc2.com/top.html Event thread: load Error: name: TypeError message: Statement on line 52: Cannot convert undefined or null to Object stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace ---------------------------------------------------------------
補足
こういったものを初めて使うので、以前こちらで質問させていただいた時にこの形になりました。 http://okwave.jp/qa/q5822176.html なのでよくわかりません・・・すみません。 これではコントローラーはなおらないままなのでしょうか。 もしそうなら、正しい表記をご教授願いたいです。
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問の部分がどこを言っているのか良く分からないけれど… Galleryとあるところの画像(kohane-top1-s.jpg)のことだろうか? クリックしても大きな画像(kohane-top1.jpg)が表示されるだけで、 <a href="~~"><img src="~"></a> のリンクタグで別画像に遷移しているだけと思われます。(Highslideが動作しているとは思えない) 他にはそれらしきものは見当たらないけれど…?? ご提示のトップページ(?)も画像同士や画像と文字が重なってしまったりするけれど、これでいいのかしらん? (それとも、実験中ということなのかな) また、このページはIE6だとスクリプトエラーが何回か出るみたい。
補足
ファイアフォックスだと崩れてしまうのは把握していました。 初めてHPを作ったのですが、両方で崩れない方法がよくわからず、とりあえずIE対応の形になっています。 エラーが出るというのははじめて聞きました。 やりたい事は、画像が少し見づらいのですが、拡大した際にオンマウスで出るコントローラーのアイコンを表示したいと思っています。 現在は、アイコンではなく変なリスト形になってしまっているので・・・。
お礼
丁寧なアドバイスありがとうございます。 実は、その慣れてる人にCSSを使うよう叩き込まれたのですが(CSSでやるべきだ、と)私には早いようなので、難しい事は控えるようにします。 とりあえず、他の友人がHTMLで代理で作ってくれると言ってくれたので今その最中です。 それが完成しましたら、また色々考えたいと思います。
補足
なんとか、友人のアドバイスの下、正しいページが自分でも作る事ができました。 色々とありがとうございました。 ただ、イラストを表示するのはどうしてもJavaScriptを使いたいのですが・・・。 それも、参考に頂いたサイトどおりにスムーズに表示する事ができました。 しかし、また、インラインフレームから出てくれないという事態が再びきてしまって困ってます。 これだけ完成させたいと願っています。 どうかご教授願えませんでしょうか? 以前のアドバイスどおりやってもフレームからは出ませんでした。 http://2dpuppet.web.fc2.com/