カラーミーショップにてサイト制作中（その6）Bootstrapの実装方法

ネットショップ運営サービスの「カラーミーショップ」にてECサイトを制作中です。

制作中に気づいた点・感じたことなどを書きます。
今回はその6回目。
カラーミーにBootstrapを導入する手順の解説です。

＊カラーミーショップ

head内にコードを記入

まず、カラーミーの設定画面で「集客」→ 「検索エンジン対策」と開き、

headタグ内フリースペース「PCショップ用の設定」に下のコードを記入します。

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- カラーミーのデフォルトjQueryを1度無効にして新しいものを読み込む -->
<script type="text/javascript">
    $.noConflict();
</script>
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

中段のJSのコードはカラーミーのデフォルトjQueryを1度無効にする手法です。
詳しくは過去記事を読まれてください。

関連記事カラーミーショップにてサイト制作中（その1）HTMLとjQueryのバージョンに注意

2016.12.07

共通HTML最下段にコードを記入

次に、使用中のテンプレート編集画面を開き、

「共通」箇所で上級モードのHTML/CSS編集を開きます。

HTML編集の最下段に以下のコードを記入します。

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

これでカラーミーでBootstrapが使えるようになります。

関連記事カラーミーショップにてサイト制作中（その7）ショップブログプラスのカスタマイズ

2016.12.07

関連記事カラーミーショップにてサイト制作中（その5）ショップ運営には販促用カレンダーが便利

2017.04.21

関連記事カラーミーショップにてサイト制作中（その4）カラーミーキットとは？

2016.12.07

関連記事カラーミーショップにてサイト制作中（その3）トップと枝ページのレイアウトを変える

2016.12.07

関連記事カラーミーショップにてサイト制作中（その2）オリジナルデザインとスライドショー

2016.12.07

関連記事カラーミーショップにてサイト制作中（その1）HTMLとjQueryのバージョンに注意

2016.12.07