ソーシャルアイコンへのリンク設定方法 - SHELF （有料版）

ソーシャルアイコンへのリンク設定方法（旧）

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

SHELF（有料版）ではソーシャルアイコンへリンクを設定する事ができます。（サンプルサイトでは画面上部のアイコン）
ここではそのリンク設定方法を解説します。

[ショップ作成] → [デザイン設定] → SHELF（有料版）の[デザイン編集]から共通の[HTML/CSS編集]をクリック

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

変更前：

<ul class="sns-list">
  <li class="sns-list__unit">
    <a href="">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  <li class="sns-list__unit">
    <a href="">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  <li class="sns-list__unit">
    <a href="">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  <li class="sns-list__unit">
    <a href="">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-pinterest-p fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  <li class="sns-list__unit">
    <a href="">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
</ul>

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

<ul class="sns-list">
  <li class="sns-list__unit">
    <a href="twitterのリンク先URL">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  <li class="sns-list__unit">
    <a href="facebookのリンク先URL">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  <li class="sns-list__unit">
    <a href="google＋のリンク先URL">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  <li class="sns-list__unit">
    <a href="pinterestのリンク先URL">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-pinterest-p fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  <li class="sns-list__unit">
    <a href="instagramのリンク先URL">
      <span class="fa-stack fa-md">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
</ul>