Bootstrapを基本のCSSとJavascriptに設定してみる

BootstrapをBloggerに設定していみます。

Bootstrapは、ボタンやリンクなど基本となる要素のCSSを予め用意してくれていてサイトをそれなりにかっこ良く見せてくれます。

まずは、サイトにアクセスして、Bootstrapをダウンロードします。



ダウンロードした、
bootstrap-theme.min.css
bootstrap.min.css
bootstrap.min.js
の３つを、Dropboxなどのサーバーへアップします。



話はそれますが、BloggerでCSSなどを外出しして使う場合、GoogleDriveまたはDropboxを使うと無料ですし便利です。

Dropboxの共有フォルダ（公開）にアップしたら、共有用URLをコピーします。



コピーしたら、BloggerへCSS、javascriptへのリンクを設定します。

テンプレートから、HTMLの編集をクリックします。



HTMLの編集ボタンをクリックしてHTMLを編集します。




head要素のすぐ上のGoogle Analytics用ののタグのすぐ上にCSSへのリンクを設定します。

CSSは後から読み込まれたものが優先して適用されますので、できるだけ下に。




jsファイルは、Bodyタグの終了間際に書いておきます。



これでBootstrapの設定が終了しました。

Bootstrapの例に従って、以下のように書いてみます。

<a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a>

するとこんな感じにボタン表示にしてくれたりします。

Sign up today