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


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. サイトにアクセスして変更が反映されている事を確認します。

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