カートを見る
カートを見る

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

ご注意：こちらはテンプレート編集（上級者モード）のご案内になります。

ソーシャルアイコンの位置の説明 サイト左側
ソーシャルアイコンの位置の説明 フッター



Blockでは、2021年3月31日より、管理画面の「ショップ作成」>「ショップ情報」>トップページから、
ソーシャルアイコンを設定できるようになりました。 詳しくはこちら >>
このページでは管理画面からSNSアイコン追加を行うための、既存テンプレートのアップデート方法を説明しています。

※2021年3月31日以降に追加されたテンプレートについては、以下の修正を行う必要はありません。
※2021年3月31日より前に追加されたテンプレートにて、既にご自身でソーシャルアイコンを設置されていた方はこちら
 

修正方法

1. [ショップ作成] → [デザイン] → Blockの[テンプレート編集]から共通の[HTML/CSS編集]をクリック
2. 以下の通りにHTMLを編集します

HTML編集（4箇所）

■ 8行目付近

変更前 
<{assign var="visible_sns_flg" value=false}>
<{if $twitter_url != "" || $facebook_url != "" || $instagram_url != "" || $google_plus_url != "" || $pinterest_url != ""}>
<{assign var="visible_sns_flg" value=true}>
<{/if}>
変更後 
<{assign var="visible_sns_flg" value=false}>
<{if $twitter_url || $facebook_url || $instagram_url || $youtube_url}>
<{assign var="visible_sns_flg" value=true}>
<{/if}>

■ 200行目付近

変更前 
<{if $visible_sns_flg}>
  <div class="l-sns-navi">
    <ul class="l-sns-navi-list u-opa">
      <{if $facebook_url != ""}>
      <li class="l-sns-navi-list__item">
        <a href="<{$facebook_url}>" target="_blank">
          <i class="icon-lg-b icon-facebook" aria-label="Facebook"></i>
        </a>
      </li>
      <{/if}>
      <{if $instagram_url != ""}>
      <li class="l-sns-navi-list__item">
        <a href="<{$instagram_url}>" target="_blank">
          <i class="icon-lg-b icon-instagram" aria-label="instagram"></i>
        </a>
      </li>
      <{/if}>
      <{if $twitter_url != ""}>
      <li class="l-sns-navi-list__item">
        <a href="<{$twitter_url}>" target="_blank">
          <i class="icon-lg-b icon-twitter" aria-label="Twitter"></i>
        </a>
      </li>
      <{/if}>
      <{if $youtube_url != ""}>
      <li class="l-sns-navi-list__item">
        <a href="<{$youtube_url}>" target="_blank">
          <i class="icon-lg-b icon-video" aria-label="Youtube"></i>
        </a>
      </li>
      <{/if}>
      <{if $pinterest_url != ""}>
      <li class="l-sns-navi-list__item">
        <a href="<{$pinterest_url}>" target="_blank">
          <i class="icon-lg-b icon-pinterest" aria-label="pinterest"></i>
        </a>
      </li>
      <{/if}>
    </ul>
    <{/if}>
  </div>

変更後 
<{if $visible_sns_flg}>
<div class="l-sns-navi">
  <ul class="l-sns-navi-list u-opa">
    <{if $facebook_url}>
    <li class="l-sns-navi-list__item">
      <a href="<{$facebook_url}>" target="_blank">
        <i class="icon-lg-b icon-facebook" aria-label="Facebook"></i>
      </a>
    </li>
    <{/if}>
    <{if $instagram_url}>
    <li class="l-sns-navi-list__item">
      <a href="<{$instagram_url}>" target="_blank">
        <i class="icon-lg-b icon-instagram" aria-label="instagram"></i>
      </a>
    </li>
    <{/if}>
    <{if $twitter_url}>
    <li class="l-sns-navi-list__item">
      <a href="<{$twitter_url}>" target="_blank">
        <i class="icon-lg-b icon-twitter" aria-label="Twitter"></i>
      </a>
    </li>
    <{/if}>
    <{if $youtube_url}>
    <li class="l-sns-navi-list__item">
      <a href="<{$youtube_url}>" target="_blank">
        <i class="icon-lg-b icon-video" aria-label="Youtube"></i>
      </a>
    </li>
    <{/if}>
    <!-- <li class="l-sns-navi-list__item">
      <a href="" target="_blank">
        <i class="icon-lg-b icon-pinterest" aria-label="pinterest"></i>
      </a>
    </li> -->
  </ul>
</div>
<{/if}>

■ 605行目付近

変更前 
<{if $visible_sns_flg}>
    <ul class="l-footer-sns-list u-opa">
      <{if $instagram_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$instagram_url}>" target="_blank">
          <i class="icon-lg-b icon-instagram" aria-label="instagram"></i>
        </a>
      </li>
      <{/if}>
      <{if $facebook_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$facebook_url}>" target="_blank">
          <i class="icon-lg-b icon-facebook" aria-label="Facebook"></i>
        </a>
      </li>
      <{/if}>
      <{if $twitter_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$twitter_url}>" target="_blank">
          <i class="icon-lg-b icon-twitter" aria-label="Twitter"></i>
        </a>
      </li>
      <{/if}>
      <{if $youtube_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$youtube_url}>" target="_blank">
          <i class="icon-lg-b icon-video" aria-label="Youtube"></i>
        </a>
      </li>
      <{/if}>
      <{if $pinterest_url != ""}>
      <li class="l-footer-sns-list__item">
        <a href="<{$pinterest_url}>" target="_blank">
          <i class="icon-lg-b icon-pinterest" aria-label="pinterest"></i>
        </a>
      </li>
      <{/if}>
  </ul>
<{/if}>

変更後 
<{if $visible_sns_flg}>
    <ul class="l-footer-sns-list u-opa">
    <{if $instagram_url}>
    <li class="l-footer-sns-list__item">
      <a href="<{$instagram_url}>" target="_blank">
        <i class="icon-lg-b icon-instagram" aria-label="instagram"></i>
      </a>
    </li>
    <{/if}>
    <{if $facebook_url}>
    <li class="l-footer-sns-list__item">
      <a href="<{$facebook_url}>" target="_blank">
        <i class="icon-lg-b icon-facebook" aria-label="Facebook"></i>
      </a>
    </li>
    <{/if}>
    <{if $twitter_url}>
    <li class="l-footer-sns-list__item">
      <a href="<{$twitter_url}>" target="_blank">
        <i class="icon-lg-b icon-twitter" aria-label="Twitter"></i>
      </a>
    </li>
    <{/if}>
    <{if $youtube_url}>
    <li class="l-footer-sns-list__item">
      <a href="<{$youtube_url}>" target="_blank">
        <i class="icon-lg-b icon-video" aria-label="Youtube"></i>
      </a>
    </li>
    <{/if}>
    <!-- <li class="l-footer-sns-list__item">
      <a href="" target="_blank">
        <i class="icon-lg-b icon-pinterest" aria-label="pinterest"></i>
      </a>
    </li> -->
  </ul>
<{/if}>

■ 1~7行目付近

以下は削除してください 
<{* ソーシャルアカウントURL 設定 *}>
<{assign var="twitter_url" value="twitter-url"}>
<{assign var="facebook_url" value="facebook-url"}>
<{assign var="instagram_url" value="instagram-url"}>
<{assign var="youtube_url" value="youtube-url"}>
<{assign var="pinterest_url" value="pinterest-url"}>

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

※指定している行数は目安です。カスタマイズ状況によっては行数が異なる場合があります。

ショッピングガイド

SHIPPING 配送・送料について

東京急便
配送は東京急便にてお届けいたします。

送料は全国一律525円頂いております。
１回のお買い上げ商品の合計金額が10,000円以上の場合は送料が無料となります。

RETURN 返品について

不良品
商品到着後速やかにご連絡ください。商品に欠陥がある場合を除き、返品には応じかねますのでご了承ください。
返品期限
商品到着後７日以内とさせていただきます。
返品送料
お客様都合による返品につきましてはお客様のご負担とさせていただきます。不良品に該当する場合は当方で負担いたします。

PAYMENT お支払いについて

銀行振込
購入後にお送りさせて頂きますご注文確認メールに記載されております弊社指定の銀行口座へ、ご請求金額をお振り込み下さい。
クレジット
分割払い、リボ払い可能です。
※支払い回数はクレジットカード会社によって異なります。
ペパボ店長
ペパボ店長

「Block」はカラーミーショップを利用しています。

カラーミーショップ Copyright (C) 2005-2023 GMOペパボ株式会社 All Rights Reserved.