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

ご注意：こちらの設定方法は上級者モードでのご案内になります。初心者モードをご利用中の場合は、上級者モードへの切替をお願いいたします。【切替方法はこちら】

PACKではソーシャルアイコンへ変更する事ができます。（サンプルサイトでは画面上部のアイコン）
ここでは 例としてアイコンをpinterestからinstagramへ変更する方法を解説します。ソーシャルアイコンに限らずカラーミーキットにあるアイコンはどれでもご利用いただけます。

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

   .icon-b.icon-instagram, .icon-w.icon-instagram {
     background-position: -112px -192px;
   }
   .icon-lg-b.icon-instagram, .icon-lg-w.icon-instagram {
     background-position: -168px -288px;
   }
   

3. 次にHTML編集からclass名を変更する事でアイコンを変更します。
   282行目および809行目あたりに、以下の変更を行います。
   
   ▼変更前

       <li class="social__unit">
         <a href="<{$social_link_pinterest}>"><i class="icon-lg-b icon-c_pinterest"></i></a>
       </li>

   ▼変更後

       <li class="social__unit">
         <a href="<{$social_link_instagram}>"><i class="icon-lg-b icon-instagram"></i></a>
       </li>

4. 下記を変更します。変更箇所はページ内に1カ所
   （ページ内検索にて「ソーシャルアイコン - 設置箇所」で探すと便利です。）
   
   変更前：

   <{assign var="social_link_twitter" value=""}>
   <{assign var="social_link_facebook" value=""}>
   <{assign var="social_link_google" value=""}>
   <{assign var="social_link_pinterest" value=""}>
   

   変更後：上からtwitter・facebook・google+・instagramの順になります。

   <{assign var="social_link_twitter" value=""}>
   <{assign var="social_link_facebook" value=""}>
   <{assign var="social_link_google" value=""}>
   <{assign var="social_link_instagram" value=""}>
   

5. 変更しましたら、[更新]ボタンをクリック。
6. サイトにアクセスして変更が反映されている事を確認します。