• ベストアンサー

HPにshadowboxを設置する方法を

HPにshadowboxを設置する方法を2回に亘ってご指導頂きました。一生懸命試みましたがうまくいきません。私が試みたタグの挿入、shadowboxの設置場所など、写真にしてみましたので、貼付してみますので、間違っている箇所をご指摘頂ければと思います。 GoLiveは自営業のHPを作るため8年前通信教育を受けてHPを立ち上げました。しかしcssなどの事になると理解が出来ていません。つたないHPでも多少の知識があるという事でクラス会のHP担当になっています。少しでも見栄えのするHPにしたいと頑張っている74才のばば様です。よろしくお願い致します。

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

  • ベストアンサー
  • salonpath
  • ベストアンサー率48% (194/399)
回答No.3

よかった、もう一歩ですね、頑張ってください。 エンコードは揃えたておいたほうが安全だと思います、文字化けするかもしれないです。 どんなサイト構造なのかイマイチつかめていないので shadowboxを置く階層を的確に説明できなくてすみません。 ホームページの一番上の階層(root)に shadowboxフォルダを1つ置いておけば、 H20や、H06などの中に1つづつ置かなくても大丈夫です。 ■http://www.同窓会.co.jp/ これが一番上の階層だとしたら h20やh06は以下の様になっていて http://www.同窓会.co.jp/h20 http://www.同窓会.co.jp/h06 その中にそれぞれindex.htmlがあり(*A) http://www.同窓会.co.jp/h20/index.html http://www.同窓会.co.jp/h06/index.html 各画像はこんな風な階層でしょうか http://www.同窓会.co.jp/h20/shasin1 http://www.同窓会.co.jp/h06/shasin1 想像だとshadowboxは、ここに置いてあると思います(*添付画像 左側の階層イメージ) http://www.同窓会.co.jp/h20/shadowbox http://www.同窓会.co.jp/h06/shadowbox この時のshadowbox.jsへのパスが <script type="text/javascript" src="shadowbox/shadowbox.js"></script>です これだとshadowboxフォルダを沢山用意しなければならず無駄なので http://www.同窓会.co.jp/shadowbox ↑に移動します。 その場合の(*A)からshadowbox.jsへのパスは(*添付画像 右側の階層イメージ) <script type="text/javascript" src="../shadowbox/shadowbox.js"></script> そうすればh20やh06それぞれの中にshadowboxを置かないで大丈夫です。 >「それともshadowboxは単独の階層の構成でなければ使えないのでしょうか?」 単独の階層の構成がよくからりません、ごめんなさい。 shadowboxは shadowbox.js以外にも必要なファイルが入っているので フォルダ毎管理した方がよいと思います。 >「然しGoLive上では、相変わらず名前をクリックしても画像が表示されてしまうのです」 GoLive内のプレビューだとshadowboxは動かないのかもしれないですね。 GoLiveでの表示・動作確認はGoLive内のプレビュー以外に 「ブラウザでプレビュー」が出来ると思います、 そちらでも画像だけが開いてしまいますか? ブラウザでプレビューのやり方 http://www.openspc2.org/reibun/GoLiveCS2/preview/001/index.html http://www.openspc2.org/reibun/GoLiveCS2/preview/004/index.html 解答になっているでしょうか…

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • salonpath
  • ベストアンサー率48% (194/399)
回答No.2

貼りつけてもらったhtmlのソースは、H20フォルダに入っている、H201012.htmlのモノですよね? ここのshadowbox.jsまでのパスが間違ってるかもしれないので <script type="text/javascript" src="shadowbox.js"></script> ↓ こう変更してもらってもよろしいですか? <script type="text/javascript" src="shadowbox/shadowbox.js"></script> ------------------------- あと、例えば 出席者 <a href="shasin1/matumoto1.gif" rel="shadowbox">松本先生</a> に title="松本先生"を追加すると、開いた画像の左上に松本先生と表示されます。 ↓ 出席者 <a href="shasin1/matumoto1.gif" rel="shadowbox" title="松本先生">松本先生</a>

babanobue
質問者

お礼

全て、全てうまくいきました。今は達成感いっぱいです!上の階層からはいるとshadowboxがweb上で働かなかったのは、私のミス、リンクの付け替えを忘れていました。名前の表示もバッチリでました。 ここに到達するまでいろいろな事を勉強させて頂きました。タグの偉大なこと!エンコードの大切さ、GoLive上でのプレビュー、その他いろいろありました。本当に有り難うございました。 近々クラス会があります。頑張って更に満足のいく新しいホームページを作成したいと思います。重ねて「本当に有り難うございました」

babanobue
質問者

補足

お陰様で一歩前進しました。ご指摘の様にH20フォルダの中のShadowbox.jsまでのパスを修正したところ、サイトのindex.htmlに表示されていた「無効なリンクが含まれている」のマークは消えました。 然しGoLive上では、相変わらず名前をクリックしても画像が表示されてしまうのですが、ふと思いついてH20のフォルダを単独でアップロードしてみたらweb上では見事に画面上に表示されました。「やっと!」の思いで全員の名前をクリックして試しました。 パスの修正の他に試みた事はGoLive の編集→環境設定→エンコーディグ→Unicodeがutf_8になっている事を確認、日本語のShift_jisにチェックが入っていたので外しました。【関係ないこと?】 しかしHPを最初から開いていくとH20フォルダの中身は単独でアップロードしたものと同じなのですが、こちらではGoLive上と同じように画像が開いてしまいます。 同窓会のHPはまず06回生フォルダの中に、06.site があり包括するindex.htmlがあり、このsiteの中にクラス会開催ごとのフォルダが作られていてそれぞれにindex.htmlが構成されています。H20のフォルダはその中の一つです。【shadowboxのフォルダを06.siteのindex.htmlと同じ階層に置き、H20の<head>の間に入れた<scrip・・・・・・>の中のパスをそこにつなげればいいのでしょうか?→この場合タグの表示は?。<scriptype="text/javascript" ??????/src=shadowbox/src=shadowbox.js>】 【それともshadowboxは単独の階層の構成でなければ使えないのでしょうか?】 又、画像の左上に名前を表示する件は”松本先生”で試してみましたが、web上で松本先生のテキストが消えてしまい、次の名前をクリックしたらそこに「"松本先生">松本先生」と出てしまいました。これは私のタグの置き方が間違っている為と思われますが、再度注意深くやってみます。 まずはweb上で成功した事をご報告して「ベストアンサー」「お礼」を申し上げる前にもう一度【 】間の事について教えて下さい。重ねてお手数をおかけしますがよろしくお願い致します。 web上で成功した時はとても嬉しかったです。本当にご親切にご指導頂き有り難うございました。

全文を見る
すると、全ての回答が全文表示されます。
  • salonpath
  • ベストアンサー率48% (194/399)
回答No.1

せっかくの画像ですが小さくなってしまうようでよくわかりませんでした。ごめんなさい。 ちなみに現状は、リンクのある名前をクリックすると画像だけが開く状態でしょうか?

babanobue
質問者

補足

早速に回答ありがとうございます。現状はリンクのある名前をクリックすると画像だけが開く状態です。 タグの部分を下記にコピーしてみました。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="Adobe GoLive" /> <title>H201012</title> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({language: 'ja', players:['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']});</script> <link rel="stylesheet" type="text/css" href="shadowbox-css.css"> </head> 名前の部分。<nobr></nobr>に挟まれた部分は同じな状態で数人はいりますが略してあります。 <div style="position:absolute;top:16px;left:32px;width:704px;height:195px;-adbe-c:c"> <div align="left"> <p>出席者 <a href="shasin1/matumoto1.gif" rel="shadowbox">松本先生</a></p> <p><nobr><a href="shasin1/isii.gif" rel="shadowbox">・石井靖二</a></nobr></p> href="shasin1/okayama.gif" rel="shadowbox">・岡山 薫</a></nobr></p> <p><nobr><a href="shasin1/simizu.gif" rel="shadowbox">・清水孝雄</a></nobr></p> href="shasin1/takai.gif" rel="shadowbox">・高井隆次</a></nobr></p> <p><nobr><a href="shasin1/nisiyama.gif" rel="shadowbox">・西山佑二</a><a href="shasin1/itou.gif" rel="shadowbox">・伊藤茂子(山本)</a></nobr></p> <p><nobr><a href="shasin1/hosino.gif" rel="shadowbox">・星野安男</a><a href="shasin1/yamamoto.gif" rel="shadowbox">・山本義男</a></a></nobr></p> </div> 階層 +ファイルH18 -ファイルH20  +ホルダshadowbox +ホルダshasin1 +ホルダshasin2 +H201012.html +ファイルH22 以上ですが・・・・・よろしくお願いします。   

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • shadowbox について

    最近「shadowbox」というJSが 3.0b にバージョンアップされ、それを使っている者です。 http://www.shadowbox-js.com/ そこで質問です。 画像とYOUTUBE動画はしっかりJSが働きますが、「shadowbox」のウリでもあるイメージマップとサイト表示ができません。 head内記述は以下の通りです。 <link rel="stylesheet" type="text/css" href="***/shadowbox/shadowbox.css"> <script type="text/javascript" src="***/shadowbox/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: "en", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'qtwmp', 'swf', 'flv'] }); </script> 「shadowbox.css」と「shadowbox.js」は公式HPで使用されている物をそのままコピーした物を使っています。 http://www.shadowbox-js.com/src/shadowbox.css http://www.shadowbox-js.com/src/shadowbox.js イメージマップについては、公式サイトのソースでは画像アドレスに対して「rel="shadowbox"」の記述が全くないのにJSが動作しているという謎仕様。 同じようにしたり、rel属性を付けても画像が普通に表示されるだけでJSが働きません。 htmlについては、リンクアドレスが「***.html」の場合のみJSが働きますが、「***.co.jp」などの場合は働きません。 色々調べたのですが、3.0bは最近公開された事もあってか、日本語で説明されたHPが見あたりません。 海外サイトを翻訳したりして調べても、そもそも当方はJS初心者なので理解に苦しんでおります。 おそらく「shadowbox.js」が原因だとは思うのですが、行数も多くどこの記述で何が変わるのかさえ判らない状態で困っております。 どなたか、無知な私にご教示願えないでしょうか。

  • HPをつくっています。みなさん改行はどうされていますか?

    DREAMWEAVER9にてHPを作成しております。 そこで疑問に思っていることがあるのですが、 文章を書いていくとき改行はenterでやっていてタグは<p>が挿入されています. 他に<br>がありますがみなさんはどちらをつかわれていますか? また他に質問があるのですが、 文章を読みやすいように3行ごとにすきまをあけていくのですが、 そのスキマが大きすぎるのです。 heigt150%でCSSしていますが、 ちょうどいい隙間にするにはどうすればよいでしょうか?

    • ベストアンサー
    • HTML
  • gooFreeHPのカウンター設置について

    gooFreeHPでHPを作り始めたのですが、 カウンターの設置ができずに困っています。 過去の質問を見たのですが、やっぱりできませんでした。 FrontPageで作成しています。 どなたか、gooFreeHPを使用してる方がいらっしゃいましたら、 教えてください。お願いします。 ちなみに、gooの説明は以下の通りです。 2.ホームページの本文中にタグを挿入して下さい ご自分のホームページの本文中(<BODY>~</BODY>)で、カウンターをレイアウトしたい場所に、以下のようなタグを挿入して下さい。 <IMG src="/perl-bin/counter/~***/?ndigit=5">「***」の部分を、1.で確認したご自分のユーザーIDに置き換えて使ってください。例えば、ユーザーIDがmilanoの方は、 <IMG src="/perl-bin/counter/~milano/?ndigit=5">になります。これだけでカウンターの設置は完了です。

    • ベストアンサー
    • HTML
  • 無料HPスペースでCGIが使るところ。。。

    必死に探して、広告無しの無料HPスペースは見つけたたのですが(広告が入ると見栄えが悪いので)、そこは、CGIが使えません。今まで、CGIを設置した事が無いので、今度こそやってみたいのですが、どこか無料HPスペース&広告無しでCGIが使える所は知りませんか?外国の無料HPスペースでも構いません。

  • PCと携帯から見るHP

    今、PCからと携帯から見る事のできるHPを使っています。タグ打ちをしています。PHPを使いたいのですがこれはHEADに入るのか、BODYに入るのか、また全ページにPHPを設置しなくてはならないのか。また使い方のコツなどありましたら教えてください。

    • 締切済み
    • PHP
  • テキストエリア、擬似フレーム等での背景画像表示方法

    使用ブラウザ:macのIE5.2&safari Goliveとタグの記述とを半々くらいでHP作成しております。 たいした難しいことはしていないのであまり詳しくはありません。 スクロールバー付きのボックスを使いたくて、<TEXTAREA>で背景画像付きのものを作ったのですが、なぜかmacでは表示されません。 他のサイトを見ても、winで背景画像付きのものが、 macでは画像が見えてません。 バグなのかよくわかりませんが、macでも見られる 背景画像有りのスクロール付きボックスを作りたいのです。 なにか方法はありますでしょうか? CSSでoverflowを使うというのではいけるのでしょうか? なにか訳のわからないことを言っていたら申し訳ありません。 この場合、Goliveにはこだわりません。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • プログラミングをしてHPを作成することはできるの?

    プログラミングをしてHPを作成することはできるのですか? 私は簡単なHPを作った事はあるのですが タグを手打ちしたり、専用ソフトをでタグを挿入したりである程度手作業でサイトを作成したのですが 知り合いは、ソース自動生成プログラムと言うのを作って、手作業での操作は一切やらずに、 ローカルのデータベースから必要な情報を読み取って ホームページを作成してると言ってたのですが そんな事ってあり得ますか? また、そのような事が出来るプログラミング言語は何なのでしょうか? その人のHPはページ数が1000件以上あります。

  • サイトにアクセス解析を2つ設置しても大丈夫ですか?

    自分サイトに無料HPレンタル先から借りたアクセスタグを貼りつけて、 アクセス解析を設置しました。 しかし、購入したHPビルダーの中に「かんたんアクセス解析」がある事を知って、 (レンタル先から借りたアクセス解析より詳しく調べれられるそうで)これもやりたくなりました。 自分サイトの同じ頁に各々異なるアクセス解析ものを設置したいですが、 PC的に支障をきたしてしまう事はありますでしょうか。問題は無いでしょうか? またHPビルダーのアクセス解析が利用できない事が起こった場合、 原因はどんな事が考えられるか知りたいです。 (例えばサイトに検索避けタグを入れているとか…) 今日中にアクセス解析を設置したいので、教えて頂ければ有り難く思います。 どうぞよろしくお願い致します!

  • アクセスカウンタの設置をしたいのですが・・・。

    はじめまして。この度初めてHPを作成しています。サイトにアクセスカウンターを設置したいのですがタグの入力知識が無い為どのように入力していいか分からなく困ってます。CGIはプロバイダからのカウンタを設置しようと思っていまして、入力の仕方などはプロバイダのサイトで入力方法が載っていますので分かるのですが、根本な事が分からない為、うまく設置することができませんでした。何度か試しましたが・・・・。 ちなみにプロバイダは生協インターネットです。 すみません、よろしくお願いします。

  • スタイルシート(CSS)の質問です

    スタイルシート(CSS)初心者ですが、教えて下さい。 HPを作成しております。 HP内を検索する「サイト内検索CGI」を設置しております。 検索枠(フォーム)を下記CSSタグ入力しております。 style="border:1px #999999 solid" とあるサイトで、角が丸くなっているフォームを見ました。 CSSでフォーム角を丸くする事は可能でしょうか? もしくは画像を使えば可能でしょうか? どうぞ宜しくお願いします m(_"_)m

    • ベストアンサー
    • HTML

専門家に質問してみよう