HPにshadowboxを設置する方法を

解決済

質問者：babanobue
質問日時：2010/05/14 11:42
回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： salonpath
回答日時：2010/05/15 23:00

よかった、もう一歩ですね、頑張ってください。

エンコードは揃えたておいたほうが安全だと思います、文字化けするかもしれないです。
どんなサイト構造なのかイマイチつかめていないので
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 …
http://www.openspc2.org/reibun/GoLiveCS2/preview …

解答になっているでしょうか…

- 0
- 件

通報する

No.2

回答者： salonpath
回答日時：2010/05/15 01:31

貼りつけてもらった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>

この回答への補足

お陰様で一歩前進しました。ご指摘の様に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上で成功した時はとても嬉しかったです。本当にご親切にご指導頂き有り難うございました。

補足日時：2010/05/15 19:19

通報する

- 0
- 件

通報する

この回答へのお礼

全て、全てうまくいきました。今は達成感いっぱいです！上の階層からはいるとshadowboxがweb上で働かなかったのは、私のミス、リンクの付け替えを忘れていました。名前の表示もバッチリでました。

ここに到達するまでいろいろな事を勉強させて頂きました。タグの偉大なこと！エンコードの大切さ、GoLive上でのプレビュー、その他いろいろありました。本当に有り難うございました。

近々クラス会があります。頑張って更に満足のいく新しいホームページを作成したいと思います。重ねて「本当に有り難うございました」

通報する

お礼日時：2010/05/16 17:02

No.1

回答者： salonpath
回答日時：2010/05/14 17:39

せっかくの画像ですが小さくなってしまうようでよくわかりませんでした。

ごめんなさい。

ちなみに現状は、リンクのある名前をクリックすると画像だけが開く状態でしょうか?

この回答への補足

早速に回答ありがとうございます。現状はリンクのある名前をクリックすると画像だけが開く状態です。
タグの部分を下記にコピーしてみました。

<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
以上ですが・・・・・よろしくお願いします。
　　