⚙️
【ベーシックモード】LINEアイコンバナーの表示位置調整方法
この記事は、以下の機能をご利用中の方向けの記事です。
- makeshop ショップデザイン「ベーシックモード」を利用中
- LINE友だち追加バナーの「LINEアイコンバナー」を利用中
設定方法（PC用デザイン）
makeshop管理画面にアクセスし、左メニューの「テンプレート選択・編集」をクリックし、ショップデザインページを開きます。
「PC」用の設定になっていることを確認し（①）、「共通CSS管理」（②）をクリックします。
「共通CSS設定」のテキストエリアを一番下までスクロールします。
一番下に位置調整用のタグを貼り付けます。
位置調整用タグ
#oc-plugin-wrapper { bottom: 20px !important; right: 24px !important; }
バナー位置調整用タグの、数値の部分を変更します。
の数値 を変えると上下の位置を調整できます。「下から px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右から px」の意味なので数値を大きくすると左へ寄ります。
LINEアイコンバナーでは、テキスト吹き出し💬があるため、左に大きく位置を変更すると、吹き出しが画面をはみ出してしまうことがあります
設定が完了したら「保存」ボタンをクリックします。
設定方法（スマホ用デザイン）
上部「スマホ」ボタン（①）をクリックし、現在使用しているテンプレートの「編集」ボタン（②）をクリックします。
「共通CSS管理」をクリックします。
PC用デザイン設定と同様に、「CSS編集」のテキストエリアを一番下までスクロールし、タグを貼り付けます。
（タグはPC用と同じものです）
位置調整用タグ
#oc-plugin-wrapper { bottom: 20px !important; right: 24px !important; }
バナー位置調整用タグの、数値の部分を変更します。
の数値 を変えると上下の位置を調整できます。「下から px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右から px」の意味なので数値を大きくすると左へ寄ります。
LINEアイコンバナーでは、テキスト吹き出し💬があるため、左に大きく位置を変更すると、吹き出しが画面をはみ出してしまうことがあります
設定が完了したら「保存」ボタンをクリックします。
LINEアイコンバナーの位置調整の設定は以上です。
ご自身でショップにアクセスし、表示位置を確認してください。