手作り石鹸のネットショップです。

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

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

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

  1. [ショップ作成] → [デザイン設定] → SHELF(有料版)の[デザイン編集]から共通の[HTML/CSS編集]をクリック
  2. 下記を変更します。変更箇所はページ内に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>
    
  3. 変更しましたら、[更新]ボタンをクリック。
  4. サイトにアクセスして変更が反映されている事を確認します。