Bootstrapとbootswatchの設定

質問

Bootstrapとbootswatchを使ってみたいと思い、ネットで調べながらやってみました。
Bootstrapまでは使えるようになったのですが、bootswatchが反映できていないようが気がします。

初期設定？まで行えるよう、具体的な手順を教えて頂けないかと思っております。

【行った手順】
1.Bootstrapをダウンロード
2.index.phpのhead箇所から bootstrap.min.css を読み込み

【使用したいテンプレート】
・bootswatchのSimplex

【疑問点】
「ダウンロード」に様々なファイルがあるのですが、どれが必要なのか、どうやったらbootswatchのSimplexが使えるようになるのか、分かっていません。

【回答の欲しい事柄】
index.phpに記入するhead部分のソースを教えて下さい。

【どのような結果を求めているか】
bootswatchのSimplexと同じ、もしくは同じようなページを自分のレンタルサーバーで表示できるようになりたい。

その他、何かアドバイスなどありましたら併せて頂けましたら幸いです。
よろしくお願い致します。

回答No.2

Woertet · ベストアンサー

＃１です。

＞（HTMLのソース自体、bootswatchから丸々コピペして貼り付けてます）
ええっと、HTMLは貼り付けないでください。
あくまでも利用するのはCSSです。

私がやった方法は以下のとおりです。
http://bootswatch.com/#gallery
で、SimplexのところのDownloadをクリックしました。私はブラウザにはGoogle Chromeを使っているのですが、クリックすると新しいタブでSimplexのCSSが現れます。（Downloadの右の▽をクリックして、現れるbootstrap.min.cssやbootstrap.cssのどちらかをクリックしてもいいです。）これを全部コピーしてテキストエディタで新しいファイルにペーストして、適当な名前で（私はbootswatch.cssとして）保存して、bootstrapのcssフォルダ（私はindex.htmでbootstrapを利用していますが、そのファイルからみると
./bootstrap/css（これがcssの場所を指す相対パスになります）
の中にアップロードしました。
bootstrapからダウンロードしたcss, js, imgフォルダをindex.phpと同じフォルダ内に入れているのならば、相対パスは
./cssになります。
index.htmのhead内で、
<link href="./bootstrap/css/bootswatch.css" rel="stylesheet">
と書きました。(もしbootstrap-responsive.cssなどを使うとしたらこのbootswatch.cssの行はそれより前になければなりません。)

もしcssの相対パスが./cssならば
<link href="./css/bootswatch.css" rel="stylesheet">
でいいでしょう。

あとはちょっとわかりませんが、文字コードなど影響があるのでしょうか？
できたらUTF-8を使った方がいいでしょう。

私は最近bootstrapを学習し始めたのですが、この質問ではじめてbootswatchがあるのを知りました。bootswatchでいくつかのテンプレートがあるので自分の管理しているサイトで利用させてもらいました。質問者さんに感謝です。

お礼

詳細なご回答、本当にありがとうございます。
また説明不足でお手数をお掛け致しました…。

>あくまでも利用するのはCSSです。
CSS自体をbootswatchからDLしていたのですが、「とりあえず見本と同じに！」と思い、SimplexのHTMLもコピーしていました。

詳細な手順を拝見しまして、書かれている通りに作業を行いました。

やはりSimplexでは被っていないH1タグの部分が、ヘッダーに固定されたナビの部分と被るのですが、その原因は分からずとも「設定ミスではなく正しい表示なのだ」と確信することができました。
これで安心して学習に励むことができます。

>この質問ではじめてbootswatchがあるのを知りました。
僅かでもこの質問から得るものがあったとお伺いして、少し気持ちが軽くなりました。
こちらこそ本当にありがとございます。

理解力が足らない私に、ご丁寧に対応して下さり本当に感謝の気持ちでいっぱいです。
語録が少なく歯痒いばかりですが、本当にありがとうございました。

回答No.1

Woertet

bootswatchのcssをbootstrapのcssと置き換えればいいんじゃないでしょうか。

＞index.phpのhead箇所から bootstrap.min.css を読み込み

をbootswatchのcssに変えればいいのです。

bootswatchのページに書いてあります。

Easy to Install
Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.

って。
最近身にしみたんですが、英語もおっくうがらずに読むほうがいいです。

参考URL：

http://bootswatch.com/

補足

ご回答ありがとうございます。

置き換えているんですが、デザインが崩れてしまっているんです。
（HTMLのソース自体、bootswatchから丸々コピペして貼り付けてます）

<h1>Simplex</h1>　←この部分がヘッダーに固定されているナビゲーションと被ってしまうんです。
色の配置もbootswatchの見本とは違っています。

ぐぐっているのですが、詳細な手順が書かれいてるウェブページが見当たらなくて…。
理解力が低くて本当に申し訳ないです。
それで、「必要なファイル」「ヘッダー部分」を見せてもらって、自分のサーバースペースでやってみようと思った次第でした…。