ホームページのテンプレートを二種類使いたいときstyle.cssはどうアップしたら？

質問

ホームページビルダー１０とＦＦＦＴＰを使用しています。

初心者なのですが、先日フリーでダウンロードしたテンプレートの
使い方をようやく少しわかり、初めてテンプレートを使って
自分のサイトのＴＯＰページを変えてみました。

それでＴＯＰが変わったので、他のページもテンプレートを使いたいのですが、別のテンプレートをダウンロードして使いたいのです。
その場合、ビルダーで編集はできても、サーバにアップするときに、
style.cssはＴＯＰで使ってるstyle.cssファイルがアップされてしまっているので、新しいテンプレのファイルをアップすることができません（上書きされてしまう）
なので、ＴＯＰ以外のほかのページはデザインが崩れてしまい正しくテンプレの表示ができません。

こういった場合どうしたらいいでしょうか？
複数の種類のstyle.cssをサーバにアップする方法があれば教えてください。
もしくは他の方法でしかできないのであれば教えていただけれると嬉しいです。よろしくお願いいたします。

回答No.4

metis · ベストアンサー

No.2です。
ちょっと難解になるかもしれませんが、ウェブページを表示する為に行う大体の流れを説明しますね。

・ブラウザがsstop.htmlを送って、とサーバに指示する
・サーバはsstop.htmlをブラウザに送り返す
・ブラウザがsstop.htmlの中を読み進めると、style.cssというスタイルシートを読む、との指示があったので、これを送って、とサーバに指示する
・サーバはstyle.cssをブラウザに送り返す
大体こんな流れになってます。
ですので、HTMLファイルの名前自体は、変更してもページを表示するには何の問題も有りません。

…が、そもそも最初の手順で、sstop.htmlを送って、とブラウザが指示する部分に問題が発生します。
元々のテンプレートでは、そのファイルはindex.htmlだったわけですから、説明書きには、「このページを呼び出すために、index.htmlにリンクを貼る」という説明があったと思います。
この説明どおりにindex.htmlにリンクを貼ると、最初の段階で「index.htmlを送って」という指示になってしまい、正しく機能しません。
ですので、このリンクを「sstop.html」に切り替える必要があるわけですね。
ホームページビルダーで、変更したファイル名にリンクを貼りなおしてください。（一度リンクを解除する必要があるかも）
HTMLソースでは、<a href="index.html">文字列</a>のようになっており、この「index.html」の部分を変更する事になります。

また、テンプレートに付属していた他のページ等も、同様にリンクを貼りなおす必要があるかもしれません。（TOPに戻る、等のリンクがある場合。）

さて、長々と書いて来ましたが、最後に…。
sstop.htmlというファイル名から察するに、SSを掲載するページなのですよね。
SS用のファイルが多く出来て、場合によっては挿絵等でファイル数が膨大になってしまうかもしれないので、ssというフォルダを作成し、その中に全部放り込んでしまうのが楽で良いかもしれません。

回答No.3

神崎 渉瑠（@taloo）

> たとえば、indexファイルのデザインを、ＴＯＰではなく
> 他のページに使いたい場合です。
> （今まではindexを、たとえばsstopと名前を変えてしまうと
> なんか使えなかったんですよ…）

スタイルシートファイルを変更すれば、HTMLファイルも変更する必要があります。
スタイルシートやHTMLのルールに則っていれば、どのように変更しても問題ありません。

回答No.2

metis

質問内容の確認です。
・現在は、サーバ上にあるstyle.cssをＴＯＰページにのみ利用している。
・他のページは、違うテンプレートを利用したいが、そちらに使われてるのも同じファイル名であるstyle.cssの為、サーバにアップしようとすると上書きされてしまう。
・ＴＯＰでは現状のstyle.cssを、その他ページでは新しいstyle.cssを使いたい。

以上でよろしいでしょうか。

その場合、「ファイル名を変える」「フォルダの中に入れてしまう」の２つがあります。
オススメは前者なので、前者で説明しますね。

新しいstyle.cssを他の全ページに適用するなら、現状あるＴＯＰページ用のstyle.cssのファイル名を変更するのが楽だと思います。（この方法が変更箇所が最も少なくなる）
まず、そのstyle.cssを、適当にリネームします。（top.css辺りが分かりやすくて良いでしょう）
次に、ＴＯＰページをホームページビルダーで開き、「HTMLソースの表示」を行います（分からなければ補足を）
中を読み進めると、以下のような記述があると思います。
<link rel="stylesheet" type="text/css" href="style.css">
（順序などに多少の違いがあるかもしれませんが、「<link」と有り、「href="style.css"」とあればそれで間違いないでしょう）
この、「href="style.css"」の部分で、実際に読み込むcssファイルを決めていますので、ここを「href="top.css"」と書き換えて保存します（style.cssのファイル名をtop.cssにした場合。それ以外にした場合は、そのファイル名を記述してください）。

これで書き換え作業は終わりです。
ＴＯＰ以外のページを、新たなstyle.sssで彩ってください。

なお、使いたいテンプレートが３つ、４つ…となった時にも、基本的にこの方法で可能になります。

補足

まさに質問のとおりの状況です！
style.cssの名前は変えてもＯＫだったのですね。
てっきり同じでないと…と思ってました…。
早速チャレンジしてみます！

とすると…ちょっともう一件だけ
教えて頂きたいのですが…
テンプレをダウンロードした中にある
indexページの名前もindexから変更してＯＫなのでしょうか…？

たとえば、indexファイルのデザインを、ＴＯＰではなく
他のページに使いたい場合です。
（今まではindexを、たとえばsstopと名前を変えてしまうと
なんか使えなかったんですよ…）

ついでみたいになってしまってすみません…！

回答No.1

sikiminomo

必ず「style.css」という名前にするという決まりは無いので
topページ以外で使うスタイルシートのファイル名を変えればいいと思います。
その場合、topページ以外のファイル内に書いてあるスタイルシート名も変更しなければなりません。

抽象的なファイル名では、将来分からなくなってしまうと思うので　topに使うなら　top.css
小説ページに使うなら　ss.css
とか、参照しているファイルがすぐ分かるような具体的な名前をお勧めしたいです。

お礼

上の四件のご回答を下さった皆様、教えて頂いて有難うございました！
（無事にできました！）