⚙️
【ベーシックモード】リッチデザインバナーの表示位置調整方法
この記事は、以下の機能をご利用中の方向けの記事です。
- makeshop ショップデザイン「ベーシックモード」を利用中
- LINE友だち追加バナーの「リッチデザインバナー」を利用中
![リッチデザインバナーアイコン](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/91d503a7-1933-4e09-88ca-cfa523a6916d/5fb3405292db0eddbc6437a749027dd8.png)
![リッチデザインバナーのパネル領域](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/ff1a3d78-eee7-485b-8793-b2571f245cdf/81e28dd3a039c1f2e6113c459b056be3.png)
リッチデザインバナーでは、「アイコン」ではない「パネル領域」の場所を変更することはできません。「アイコン」の位置のみ調整可能です。
設定方法(PC用デザイン)
makeshop管理画面にアクセスし、左メニューの「テンプレート選択・編集」をクリックし、ショップデザインページを開きます。
「PC」用の設定になっていることを確認し(①)、「共通CSS管理」(②)をクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/ff0f68f1-3478-4295-b761-c85fb08f450b/129e666a71f6cf9cea574ae036fbbdf0.png)
「共通CSS設定」のテキストエリアを一番下までスクロールします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/4a92e302-4804-4842-b63d-47dc70b84088/1c04250209232e099649c72fa79b8c07.png)
一番下に位置調整用のタグを貼り付けます。
位置調整用タグ
#oc-plugin-icon { bottom: 24px !important; right: 24px !important; }
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/4e69db02-25de-4101-81fb-8a1a7a57750b/e3945d20d01e377fc3c167aa2416a1ee.png)
バナー位置調整用タグの、数値の部分を変更します。
の数値 を変えると上下の位置を調整できます。「下から px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右から px」の意味なので数値を大きくすると左へ寄ります。
設定が完了したら「保存」ボタンをクリックします。
設定方法(スマホ用デザイン)
上部「スマホ」ボタン(①)をクリックし、現在使用しているテンプレートの「編集」ボタン(②)をクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/213c23da-7898-4eb9-a9ca-c47ee770a8d9/78a6d185c71f94d8842103011e253e4a.png)
「共通CSS管理」をクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/f8c05cec-44b9-4975-853d-489ee2918e42/161a22ec9532bff5ec13dc656eaafbd6.png)
PC用デザイン設定と同様に、「CSS編集」のテキストエリアを一番下までスクロールし、タグを貼り付けます。
(タグはPC用と同じものです)
位置調整用タグ
#oc-plugin-icon { bottom: 24px !important; right: 24px !important; }
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/320cd650-3214-4c00-b328-df41606c0417/90263dc83b4d0fbf00bd92ef0518fdc2.png)
バナー位置調整用タグの、数値の部分を変更します。
の数値 を変えると上下の位置を調整できます。「下から px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右から px」の意味なので数値を大きくすると左へ寄ります。
設定が完了したら「保存」ボタンをクリックします。
LINEアイコンバナーの位置調整の設定は以上です。
ご自身でショップにアクセスし、表示位置を確認してください。