ソーシャルアイコンの設定方法
MODEでは、2021年3月31日より、管理画面の「ショップ作成」>「ショップ情報」>トップページから、
ソーシャルアイコンを設定できるようになりました。詳しくはこちら >>
このページでは管理画面からソーシャルアイコン追加を行うための、既存テンプレートのアップデート方法を説明しています。
※2021年3月31日以降に追加されたテンプレートについては、以下の修正を行う必要はありません。
※2021年3月31日より前に追加されたテンプレートにて、既にご自身でソーシャルアイコンを設置されていた方はこちら
修正方法
1. [ショップ作成] → [デザイン] → MODEの[テンプレート編集]から共通の[HTML/CSS編集]をクリック
2. 以下の通りにHTMLとCSSを編集します
HTML編集（2箇所）
■ 200行目付近
変更前
<{* ↓↓↓↓↓---------- ソーシャルアイコン - 設置箇所 ----------↓↓↓↓↓ *}>
<{* ソーシャルアイコンになります。<a href="リンク先URL">へ該当URLを設置してご利用下さい。 *}>
<{* 不要の場合には<ul>----</ul>を<!-- <ul>----</ul> -->のようにコメントアウトしていただければ表示されません。 *}>
<ul class="header_nav_global_social inline">
<li><a href=""><i class="icon-lg-b icon-c_twitter"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_facebook"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_google"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_pinterest"></i></a></li>
</ul>
<{* ↑↑↑↑↑---------- //ソーシャルアイコン - 設置箇所 ----------↑↑↑↑↑ *}>
変更後
<{* ↓↓↓↓↓---------- ソーシャルアイコン - 設置箇所 ----------↓↓↓↓↓ *}>
<{* ソーシャルアイコンになります。<a href="リンク先URL">へ該当URLを設置してご利用下さい。 *}>
<{* 不要の場合には<ul>----</ul>を<!-- <ul>----</ul> -->のようにコメントアウトしていただければ表示されません。 *}>
<ul class="header_nav_global_social inline">
<{if $twitter_url}>
<li>
<a href="<{$twitter_url}>" target="_blank"><i class="icon-lg-b icon-c_twitter"></i></a>
</li>
<{/if}>
<{if $instagram_url}>
<li>
<a href="<{$instagram_url}>" target="_blank"><i class="icon-lg-b icon-instagram"></i></a>
</li>
<{/if}>
<{if $facebook_url}>
<li>
<a href="<{$facebook_url}>" target="_blank"><i class="icon-lg-b icon-c_facebook"></i></a>
</li>
<{/if}>
<{if $youtube_url}>
<li>
<a href="<{$youtube_url}>" target="_blank"><i class="icon-lg-b icon-youtube"></i></a>
</li>
<{/if}>
<!-- <li><a href=""><i class="icon-lg-b icon-c_pinterest"></i></a></li> -->
<{* ↑↑↑↑↑---------- //ソーシャルアイコン - 設置箇所 ----------↑↑↑↑↑ *}>
■ 235行目付近
変更前
<{* ↓↓↓↓↓---------- ソーシャルアイコン - 設置箇所 ----------↓↓↓↓↓ *}>
<{* <a href="リンク先URL">へ該当URLを設置してご利用下さい。 *}>
<{* 不要の場合には<ul>----</ul>を<!-- <ul>----</ul> -->のようにコメントアウトしていただければ表示されません。 *}>
<ul class="header_nav_global_social inline visible-phone">
<li><a href=""><i class="icon-lg-b icon-c_twitter"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_facebook"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_google"></i></a></li>
<li><a href=""><i class="icon-lg-b icon-c_pinterest"></i></a></li>
</ul>
<{* ↑↑↑↑↑---------- //ソーシャルアイコン - 設置箇所 ----------↑↑↑↑↑ *}>
変更後
<{* ↓↓↓↓↓---------- ソーシャルアイコン - 設置箇所 ----------↓↓↓↓↓ *}>
<{* ソーシャルアイコンになります。<a href="リンク先URL">へ該当URLを設置してご利用下さい。 *}>
<{* 不要の場合には<ul>----</ul>を<!-- <ul>----</ul> -->のようにコメントアウトしていただければ表示されません。 *}>
<ul class="header_nav_global_social inline visible-phone">
<{if $twitter_url}>
<li>
<a href="<{$twitter_url}>" target="_blank"><i class="icon-lg-b icon-c_twitter"></i></a>
</li>
<{/if}>
<{if $facebook_url}>
<li>
<a href="<{$facebook_url}>" target="_blank"><i class="icon-lg-b icon-c_facebook"></i></a>
</li>
<{/if}>
<{if $instagram_url}>
<li>
<a href="<{$instagram_url}>" target="_blank"><i class="icon-lg-b icon-instagram"></i></a>
</li>
<{/if}>
<{if $youtube_url}>
<li>
<a href="<{$youtube_url}>" target="_blank"><i class="icon-lg-b icon-youtube"></i></a>
</li>
<{/if}>
<!-- <li><a href=""><i class="icon-lg-b icon-c_pinterest"></i></a></li> -->
</ul>
<{* ↑↑↑↑↑---------- //ソーシャルアイコン - 設置箇所 ----------↑↑↑↑↑ *}>
CSS編集
以下を追加してください。(927行目付近）
icon-b.icon-instagram { background-position: -112px -192px; }
.icon-w.icon-instagram { background-position: -112px -192px; }
.icon-lg-b.icon-instagram { background-position: -168px -288px; }
.icon-lg-w.icon-instagram { background-position: -168px -288px; }
.icon-b.icon-youtube { background-position: -128px -160px; }
.icon-w.icon-youtube { background-position: -128px -160px; }
.icon-lg-b.icon-youtube { background-position: -191px -240px; }
.icon-lg-w.icon-youtube { background-position: -191px -240px; }
3. 変更しましたら、[更新]ボタンをクリック
4. サイトにアクセスして変更が反映されている事を確認します。
※指定している行数は目安です。カスタマイズ状況によっては行数が異なる場合があります。
