⚙️

【クリエイターモード】リッチデザインバナーの表示位置調整方法

この記事は、以下の機能をご利用中の方向けの記事です。
  • makeshop ショップデザイン「クリエイターモード」を利用中
  • LINE友だち追加バナーの「リッチデザインバナー」を利用中
リッチデザインバナーアイコン
リッチデザインバナーアイコン
リッチデザインバナーのパネル領域
リッチデザインバナーのパネル領域
⚠️
リッチデザインバナーでは、「アイコン」ではない「パネル領域」の場所を変更することはできません。「アイコン」の位置のみ調整可能です。

設定方法

makeshop管理画面にアクセスし、左メニューの「テンプレート選択・編集」をクリックし、ショップデザインページを開きます。
現在適用しているテーマの「編集」ボタンをクリックしてください。
 
左側のメニューの「全ページ共通」をクリックします。
「全ページ共通」の設定ページが開いていることを確認し、「CSS」と書かれたテキストエリアを一番下までスクロールします。
 
一番下に位置調整用のタグを貼り付けます。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; } }
 
位置調整用タグの、数値の部分を変更します。
 
2行目の が PC用の設定です。
4行目の が スマートフォン用の設定です。
 
の数値を変えると上下の位置を調整できます。「下からXX px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右からXX px」の意味なので数値を大きくすると左へ寄ります。
 
設定が完了したら「保存」ボタンをクリックします。
 
LINEアイコンバナーの位置調整の設定は以上です。
ご自身でショップにアクセスし、表示位置を確認してください。