SNSのリンクボタンを表示したいです。方法を教えてください。 – makeshop よくある質問

SNSリンクボタンをショップページへ表示するための記述を追加してください。

＜表示例＞

フッターや左のメニューなどにSNSのリンクボタンを追加する方法についてご紹介します。

（１）ボタン用のアイコン（画像）を用意し、ファイルサーバーに画像をアップロードしてください。

■makeshopサポート記事
画像やCSSファイルをアップロードしたい
https://www.support.makeshop.jp/design/?p=1215

（２）SNSのリンクボタンを表示させたい位置に、ソースを記述してください。

＜HTML例＞

<ul class="social-list">
	<li class="social-list-instagram">
	<a target="_blank" href="https://www.instagram.com/#/"><img src="/images/original_design_default/samplesource/10/icon-instagram.png" alt="instagram"></a>
	</li>
	<li class="social-list-x">
	<a target="_blank" href="https://twitter.com/#/"><img src="/images/original_design_default/samplesource/10/icon-twitter.png" alt="X"></a>
	</li>
	<li class="social-list-facebook">
	<a target="_blank" href="https://www.facebook.com/#/"><img src="/images/original_design_default/samplesource/10/icon-facebook.png" alt="facebook"></a>
	</li>
</ul>

デザインテンプレート「WIDELY」のアイコンを表示させたソースの例です。

それぞれ　#の位置にSNSのアカウントを記述してください。

Instagram：https://www.instagram.com/アカウント/
X：https://twitter.com/アカウント/
Facebook：https://www.facebook.com/アカウント/

（３）アイコンを横に並べるなどのレイアウトは、CSSを記述して調整してください。

＜CSS例＞

.social-list {
  display:flex;
  justify-content:center;
}
.social-list li {
  margin:0 5px;
}

など

※旧Twitterのロゴについて

デザインテンプレートでは旧Twitterのロゴを表示しています。
Xのロゴはメイクショップでは提供していません。差し替えはショップ様でおこなってください。
フリー素材やアイコンフォントのサイトからダウンロードができます。

ご対応が難しい際には、有償とはなりますが、制作代行サービスのご用意があります。
なお、SNSのリンクボタンがあらかじめ設置されているテンプレートもありますので、
テンプレートの変更も合わせてご検討ください。

＜SNSボタンのあるテンプレートの例＞

クリエイターモード【Advance】

クリエイターモード【Shiro】

※旧Twitterのロゴについて

関連記事