カラーミーショップをBootstrap化する方法

Pocket

カラーミーショップのhead内にコードを追加する方法で書いたように、カラーミーショップではついにhead内への記述が可能になりました。

ということはBootstrapのCDNを入れてやればいとも簡単にレスポンシブ化が可能ということ!ではさっそくやってみましょう。

カラーミーショップにBootstrapを追加

こちらの記事に書いたように、head内にコードを追加するためのページへ移動します。

そのあとPCショップの設定の欄に以下のようにBootstrapのCDNコードを記述。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

ソースコードを見てみるとご覧の通り、バッチリ適用されています。
カラーミーショップをBootstrap化する方法

カラーミーショップでBootstrapのコンポーネントが使える!

もちろんBootstrapで用意されている様々なコンポーネントも使い放題。スライダーやタブで切り替えるパネル、ツールチップなんかも使えます。
カラーミーショップをBootstrap化2