おみせコネクトご利用ガイド

⚙️【クリエイターモード】LINEアイコンバナーの表示位置調整方法 ​

この記事は、以下の機能をご利用中の方向けの記事です。

  • makeshop ショップデザイン 「クリエイターモード」 を利用中
  • LINE友だち追加バナーの 「LINEアイコンバナー」 を利用中
LINEアイコンバナー（アイコンのみ）

LINEアイコンバナー（アイコンのみ）

LINEアイコンバナー（アイコン＋テキスト）

LINEアイコンバナー（アイコン＋テキスト）

設定方法 ​

makeshop管理画面にアクセスし、左メニューの「テンプレート選択・編集」をクリックし、ショップデザインページを開きます。
現在適用しているテーマの「編集」ボタンをクリックしてください。

テンプレート選択・編集


左側のメニューの「全ページ共通」をクリックします。
「全ページ共通」の設定ページが開いていることを確認し、「CSS」と書かれたテキストエリアを一番下までスクロールします。

CSS最下部


一番下に位置調整用のタグを貼り付けます。4行全てコピーして貼り付けてください。

位置調整用タグ ​

css
#oc-plugin-wrapper { bottom: 20px !important; right: 24px !important; }
@media screen and (max-width: 600px) {
 #oc-plugin-wrapper { bottom: 12px !important; right: 12px !important; }
}

タグ貼り付け例
バナー位置調整用タグの、数値の部分を変更します。

1行目の bottom: 20px right: 24px が PC用の設定です。
3行目の bottom: 12px right: 12px が スマートフォン用の設定です。

bottom: XXpx の数値を変えると上下の位置を調整できます。「下からXX px」の意味なので数値を大きくすると上へ寄ります。
同じく right: XXpx は左右の位置を調整します。「右からXX px」の意味なので数値を大きくすると左へ寄ります。

LINEアイコンバナーでは、テキスト吹き出し💬があるため、左に大きく位置を変更すると、吹き出しが画面をはみ出してしまうことがあります


設定が完了したら「保存」ボタンをクリックします。

更新ボタン
LINEアイコンバナーの位置調整の設定は以上です。
ご自身でショップにアクセスし、表示位置を確認してください。