カート
ユーザー
絞り込む
カテゴリー
コンテンツ
  • ホーム
  • ソーシャルアイコンの設置方法

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

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




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

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

 


 

修正方法

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

HTML編集(5箇所)

 

■ 11行目付近

変更前

<{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}>





■ 216行目付近

変更前

<{if $visible_sns_flg}>
  <ul class="p-sub-header__social-nav">
    <{if $twitter_url != ""}>
    <li>
      <a href="<{$twitter_url}>">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#twitter"></use></svg>
      </a>
    </li>
    <{/if}>
    <{if $facebook_url != ""}>
    <li>
      <a href="<{$facebook_url}>">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#facebook"></use></svg>
      </a>
    </li>
    <{/if}>
    <{if $instagram_url != ""}>
    <li>
      <a href="<{$instagram_url}>">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#instagram"></use></svg>
      </a>
    </li>
    <{/if}>
    <{if $google_plus_url != ""}>
    <li>
      <a href="<{$google_plus_url}>">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#google-plus"></use></svg>
      </a>
    </li>
    <{/if}>
    <{if $pinterest_url != ""}>
    <li>
      <a href="<{$pinterest_url}>">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#pinterest-p"></use></svg>
      </a>
    </li>
    <{/if}>
  </ul>
<{/if}>



変更後

<{if $visible_sns_flg}>
<ul class="p-sub-header__social-nav">
    <{if $twitter_url}>
    <li>
      <a href="<{$twitter_url}>" target="_blank">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#twitter"></use></svg>
      </a>
    </li>
    <{/if}>
    <{if $facebook_url}>
    <li>
      <a href="<{$facebook_url}>" target="_blank">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#facebook"></use></svg>
      </a>
    </li>
    <{/if}>
    <{if $instagram_url}>
    <li>
      <a href="<{$instagram_url}>" target="_blank">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#instagram"></use></svg>
      </a>
    </li>
    <{/if}>
    <{if $youtube_url}>
    <li>
      <a href="<{$youtube_url}>" target="_blank">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#youtube"></use></svg>
      </a>
    </li>
    <{/if}>
    <!-- <li>
      <a href="">
        <svg class="c-social-icon" role="img" aria-hidden="true"><use xlink:href="#pinterest-p"></use></svg>
      </a>
    </li> -->
</ul>
<{/if}>





■ 833行目付近

変更前

<{if $visible_sns_flg}>
<div class="p-global-footer__heading u-visible--tablet">ソーシャル</div>
<ul class="p-global-footer__social-nav">
  <{if $twitter_url != ""}>
  <li>
    <a href="<{$twitter_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#twitter" aria-label="twitter"></use></svg>
    </a>
  </li>
  <{/if}>
  <{if $facebook_url != ""}>
  <li>
    <a href="<{$facebook_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#facebook" aria-label="facebook"></use></svg>
    </a>
  </li>
  <{/if}>
  <{if $instagram_url != ""}>
  <li>
    <a href="<{$instagram_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#instagram" aria-label="instagram"></use></svg>
    </a>
  </li>
  <{/if}>
  <{if $google_plus_url != ""}>
  <li>
    <a href="<{$google_plus_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#google-plus" aria-label="google+"></use></svg>
    </a>
  </li>
  <{/if}>
  <{if $pinterest_url != ""}>
  <li>
    <a href="<{$pinterest_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#pinterest-p" aria-label="pinterest"></use></svg>
    </a>
  </li>
  <{/if}>
</ul>
<{/if}>



変更後

<{if $visible_sns_flg}>
<div class="p-global-footer__heading u-visible--tablet">ソーシャル</div>
<ul class="p-global-footer__social-nav">
  <{if $twitter_url}>
  <li>
    <a href="<{$twitter_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#twitter" aria-label="twitter"></use></svg>
    </a>
  </li>
  <{/if}>
  <{if $facebook_url}>
  <li>
    <a href="<{$facebook_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#facebook" aria-label="facebook"></use></svg>
    </a>
  </li>
  <{/if}>
  <{if $instagram_url}>
  <li>
    <a href="<{$instagram_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#instagram" aria-label="instagram"></use></svg>
    </a>
  </li>
  <{/if}>
  <{if $youtube_url}>
  <li>
    <a href="<{$youtube_url}>" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#youtube" aria-label="youtube"></use></svg>
    </a>
  </li>
  <{/if}>
  <!-- <li>
    <a href="" target="_blank">
      <svg class="c-social-icon" role="img" aria-hidden="false"><use xlink:href="#pinterest-p" aria-label="pinterest"></use></svg>
    </a>
  </li> -->
</ul>
<{/if}>




■ 1115行目付近

以下を追加

<symbol id="youtube" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></symbol>




■  4〜9行目付近

以下は削除してください

<{* ソーシャルアカウントURL 設定 *}>
<{assign var="twitter_url" value=""}>
<{assign var="facebook_url" value=""}>
<{assign var="instagram_url" value=""}>
<{assign var="google_plus_url" value=""}>
<{assign var="pinterest_url" value=""}>



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

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