ソーシャルアイコンの変更方法

ソーシャルアイコンを既存のアイコンから変更する方法をご紹介します。（ソーシャルアイコンに限らずカラーミーキットにあるアイコンはどれでもご利用いただけます。）

カラーミーキットアイコンの項目から使用したいアイコンをクリックし、表示されたCSSをコピーします。

【カラーミーキットアイコンの項目はこちら：https://shop-pro.jp/?mode=tmpl_framework#document_section_6】
[ショップ作成] → [デザイン設定] → MODEの[デザイン編集]から共通の[HTML/CSS編集]をクリックし、CSS編集にペーストします。
845行目あたりがMODEにて使用されているアイコンのCSSになりますので、このあたりにペーストするのが良いでしょう。

例えば、instagramのアイコンを追加したい場合には下記を追加します。
```
.icon-b.icon-instagram { background-position: -112px -192px; }
.icon-w.icon-instagram { background-position: -112px -192px; }
.icon-lg-b.icon-instagram { background-position: -168px -288px; }
.icon-lg-w.icon-instagram { background-position: -168px -288px;}
```
次にHTML編集からclass名を変更する事でアイコンを変更します。
例えばアイコンをpinterestからinstagramへ変更する場合には、4において以下の修正を行います。
▼修正前
```
<li><a href=""><i class="icon-lg-b icon-c_pinterest"></i></a></li>
```
▼修正後
```
<li><a href=""><i class="icon-lg-b icon-instagram"></i></a></li>
```

■PCサイトのソーシャルアイコン変更項目となります
185行目

<{ ↓↓↓↓↓---------- ソーシャルアイコン - 設置箇所 ----------↓↓↓↓↓ }>

<{ ソーシャルアイコンになります。<a href="リンク先URL">へ該当URLを設置してご利用下さい。 }>

<{ 不要の場合には<ul>----</ul>を<!-- <ul>----</ul> -->のようにコメントアウトしていただければ表示されません。 }>


<ul class="header_nav_global_social inline">
<li><a href=""><i class="icon-lg-b icon-c_twitter"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_facebook"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_google"></i></a>/li>
<li><a href=""><i class="icon-lg-b icon-c_pinterest"></i></a></li>
</ul>
<{ ↑↑↑↑↑---------- //ソーシャルアイコン - 設置箇所 ----------↑↑↑↑↑ }>

■スマートフォンサイトのソーシャルアイコン変更項目となります
220行目

<{ ↓↓↓↓↓---------- ソーシャルアイコン - 設置箇所 ----------↓↓↓↓↓ }>
<{ <a href="リンク先URL">へ該当URLを設置してご利用下さい。 }>
<{ 不要の場合には<ul>----</ul>を<!-- <ul>----</ul> -->のようにコメントアウトしていただければ表示されません。 }>

<ul class="header_nav_global_social inline visible-phone">
<li><a href=""><i class="icon-lg-b icon-c_twitter"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_facebook"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_google"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_pinterest"></i></a></li>
</ul>
<{ ↑↑↑↑↑---------- //ソーシャルアイコン - 設置箇所 ----------↑↑↑↑↑ }>