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

グループから探す

コンテンツを読む

営業日カレンダー

2024年12月
日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

2025年1月
日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

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

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>