Skip to content

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

この記事は、以下の機能をご利用中の方向けの記事です。

  • makeshop ショップデザイン 「ベーシックモード」 を利用中
  • LINE友だち追加バナーの 「リッチデザインバナー」 を利用中
リッチデザインバナーアイコン

リッチデザインバナーアイコン

リッチデザインバナーのパネル領域

リッチデザインバナーのパネル領域

リッチデザインバナーでは、「アイコン」ではない「パネル領域」の場所を変更することはできません。「アイコン」の位置のみ調整可能です。

設定方法(PC用デザイン)

makeshop管理画面にアクセスし、左メニューの「テンプレート選択・編集」をクリックし、ショップデザインページを開きます。
「PC」用の設定になっていることを確認し(①)、「共通CSS管理」(②)をクリックします。

PC用デザイン設定


「共通CSS設定」のテキストエリアを一番下までスクロールします。

共通CSS管理


一番下に位置調整用のタグを貼り付けます。

位置調整用タグ

css
#oc-plugin-icon { bottom: 24px !important; right: 24px !important; }

CSS最下部


バナー位置調整用タグの、数値の部分を変更します。

bottom: 24px の数値 24 を変えると上下の位置を調整できます。「下から 24 px」の意味なので数値を大きくすると上へ寄ります。
同じく right: 24px は左右の位置を調整します。「右から 24 px」の意味なので数値を大きくすると左へ寄ります。

設定が完了したら「保存」ボタンをクリックします。

設定方法(スマホ用デザイン)

上部「スマホ」ボタン(①)をクリックし、現在使用しているテンプレートの「編集」ボタン(②)をクリックします。

スマートフォンCSS


「共通CSS管理」をクリックします。

スマートフォンCSS管理


PC用デザイン設定と同様に、「CSS編集」のテキストエリアを一番下までスクロールし、タグを貼り付けます。
(タグはPC用と同じものです)

位置調整用タグ

css
#oc-plugin-icon { bottom: 24px !important; right: 24px !important; }

スマートフォンCSS編集


バナー位置調整用タグの、数値の部分を変更します。

bottom: 24px の数値 24 を変えると上下の位置を調整できます。「下から 24 px」の意味なので数値を大きくすると上へ寄ります。
同じく right: 24px は左右の位置を調整します。「右から 24 px」の意味なので数値を大きくすると左へ寄ります。

設定が完了したら「保存」ボタンをクリックします。


リッチデザインバナーの位置調整の設定は以上です。
ご自身でショップにアクセスし、表示位置を確認してください。