⚙️
【クリエイターモード】LINEアイコンバナーの表示位置調整方法
この記事は、以下の機能をご利用中の方向けの記事です。
- makeshop ショップデザイン「クリエイターモード」を利用中
- LINE友だち追加バナーの「LINEアイコンバナー」を利用中
![LINEアイコンバナー(アイコンのみ)](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/77126f4b-848e-4b3c-abaa-4b5609e06040/5aa6b42886242788396bb2953fa48df9.png)
![LINEアイコンバナー(アイコン+テキスト)](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/96f9a01b-57d7-488d-af93-08ea03811140/6784f6f9c578b40ca627f9f4b7f0bbca.png)
設定方法
makeshop管理画面にアクセスし、左メニューの「テンプレート選択・編集」をクリックし、ショップデザインページを開きます。
現在適用しているテーマの「編集」ボタンをクリックしてください。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/d298c0f3-b267-483e-833e-e4c67f8ba344/9bb9a712bb4e46d40eb4c2a362a6aecb.png)
左側のメニューの「全ページ共通」をクリックします。
「全ページ共通」の設定ページが開いていることを確認し、「CSS」と書かれたテキストエリアを一番下までスクロールします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/b3b7a939-149d-4940-8f19-b4e0931257a7/033b6e74417ce5373f325a279853ce38.png)
一番下に位置調整用のタグを貼り付けます。4行全てコピーして貼り付けてください。
位置調整用タグ
#oc-plugin-wrapper { bottom: 20px !important; right: 24px !important; }
@media screen and (max-width: 600px) {
#oc-plugin-wrapper { bottom: 12px !important; right: 12px !important; }
}
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/2149ae78-b27d-43d4-8423-2270e86d0d8d/df263f0a1c90286d150ab7028d4d2169.png)
バナー位置調整用タグの、数値の部分を変更します。
1行目の が PC用の設定です。
3行目の が スマートフォン用の設定です。
の数値を変えると上下の位置を調整できます。「下からXX px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右からXX px」の意味なので数値を大きくすると左へ寄ります。
LINEアイコンバナーでは、テキスト吹き出し💬があるため、左に大きく位置を変更すると、吹き出しが画面をはみ出してしまうことがあります
設定が完了したら「保存」ボタンをクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/48e998a7-344f-4e66-b2a9-e76d39b53349/a1dc659aba60036867d03edbb34943f0.png)
LINEアイコンバナーの位置調整の設定は以上です。
ご自身でショップにアクセスし、表示位置を確認してください。