3分でわかる!RailsアプリにBootswatchを適用する方法




RailsアプリにBootstrap導入したものの・・・

RailsアプリにBootstrapを導入する方法はマスターしましたね。

しかしながら、Bootstrapに触ったことがない初心者だと、

「結局これでどうすればいいの?」

と使い方がわかりません。

そこでおすすめなのが、

テンプレートを利用する方法

です。

 

世界には色々なテンプレートが用意されています。

自分でHTMLを書かずとも、あらかじめ用意されたスタイルでデザインできるのです。

中でもオススメなのが、

Bootswatch

です。

こちらにサイトには無料のテンプレートが豊富に掲載されています。

初心者、かつ、Bootstrapの効力を試したい方に最適ですね。

 

RailsアプリにBootswatchを適用する方法

RailsにBootstrapを導入完了している前提で話を進めていきます。

まだの方はBootstrap導入方法の記事を読んでみてください。

 

gemを追加

Bootswatch専用のgemを追加しましょう。

RailsアプリのGemfileに次の1行を追記。

gem 'bootswatch'

追加完了したら、上書き。

コマンドラインで

$ bundle install

を発動してアプリにgemをダウンロード。

 

application.scssにテーマを適用

あとはapplication.scssにBootswatchのテーマを適用するだけ。

ずばり次の2行をapplication.scssへ追記しましょう。

  @import "bootswatch/テーマ名/variables";
   @import "bootswatch/テーマ名/bootswatch";

鍵となるのは中央の「テーマ名」です。

こちらにはBootswatchのテーマ名を記入します。

Bootswatchのページを参考にして、導入したいテーマの名前を見つけましょう。

 

例えば、こちらのMintyというテーマならばmintySpacelabならばspacelabと記入します。

mintyの場合でいうと、先ほどの2行は

@import "bootswatch/minty/variables";
@import "bootswatch/minty/bootswatch";

になります。

テーマの頭文字を「小文字」にして記入すればいいのですね。

テーマ名を変更するだけでテーマを切り替えられますよ。

 

Bootstrapの効力を試したい方は使ってみてください。

 

それでは!

Lin

 

【参考文献】




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍




コメントを残す

メールアドレスが公開されることはありません。