⚙️
【クリエイターモード】リッチデザインバナーの表示位置調整方法
この記事は、以下の機能をご利用中の方向けの記事です。
- makeshop ショップデザイン「クリエイターモード」を利用中
- LINE友だち追加バナーの「リッチデザインバナー」を利用中
![リッチデザインバナーアイコン](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/71a910ea-a14f-4d04-96e1-73a8ab0bc2f7/5fb3405292db0eddbc6437a749027dd8.png)
![リッチデザインバナーのパネル領域](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/169ea649-9b18-4143-8bad-fd0defcbeb6f/81e28dd3a039c1f2e6113c459b056be3.png)
リッチデザインバナーでは、「アイコン」ではない「パネル領域」の場所を変更することはできません。「アイコン」の位置のみ調整可能です。
設定方法
makeshop管理画面にアクセスし、左メニューの「テンプレート選択・編集」をクリックし、ショップデザインページを開きます。
現在適用しているテーマの「編集」ボタンをクリックしてください。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/ad2cb099-9575-4d6f-95be-01ddc50a9d5b/9bb9a712bb4e46d40eb4c2a362a6aecb.png)
左側のメニューの「全ページ共通」をクリックします。
「全ページ共通」の設定ページが開いていることを確認し、「CSS」と書かれたテキストエリアを一番下までスクロールします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/84834719-84cf-453f-b2f4-b03b205aedf3/033b6e74417ce5373f325a279853ce38.png)
一番下に位置調整用のタグを貼り付けます。4行全てコピーして貼り付けてください。
位置調整用タグ
#oc-plugin-icon { bottom: 24px !important; right: 24px !important; }
@media screen and (max-width: 600px) {
#oc-plugin-icon { bottom: 12px !important; right: 12px !important; }
}
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/1796e46e-cd01-48c8-b513-7d2ebb1538d0/3984b543c2948a9da74505aa22d7d27e.png)
位置調整用タグの、数値の部分を変更します。
2行目の が PC用の設定です。
4行目の が スマートフォン用の設定です。
の数値を変えると上下の位置を調整できます。「下からXX px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右からXX px」の意味なので数値を大きくすると左へ寄ります。
設定が完了したら「保存」ボタンをクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/b2e89f5c-7809-4d3d-8083-9f7857b53189/eb92bf6d4f1e422d4733d1ae45944a5f.png)
LINEアイコンバナーの位置調整の設定は以上です。
ご自身でショップにアクセスし、表示位置を確認してください。