Skip to content

📏 友だち追加バナーの表示位置を調整する方法

おみせコネクトのトラッキングタグに位置調整タグを追記する

友だち追加バナーの表示位置を調整するには、既に設定済のおみせコネクトトラッキングタグに、追加で、位置調整用のタグを貼り付けます。

BASEの HTMLタグ管理App を使用している場合

トラッキングタグの設定方法
HTMLタグ管理Appを起動し、既に設定済のおみせコネクトトラッキングタグを編集し、トラッキングタグの上部に位置調整用のタグを追記します。
追加する位置調整用タグは次項で説明します。
トラッキングタグの設置位置

BASEの HTML編集App を使用している場合

HTML編集Appによるトラッキングタグの設定方法[非推奨]
HTML編集Appのエディタを起動し、既に設置済のおみせコネクトのトラッキングタグを探します( </body> 閉じタグの直前に記載しているはずです)。
見つかったら、おみせコネクトトラッキングタグの上部に、位置調整用のタグを追記します。追加する位置調整用タグは次項で説明します。

HTML編集Appのエディタ

LINEアイコンバナーの位置調整用タグ

LINEアイコンバナー(アイコンのみ)

LINEアイコンバナー(アイコンのみ)

LINEアイコンバナー(アイコン+テキスト)

LINEアイコンバナー(アイコン+テキスト)

バナー位置調整用タグ(6行すべて貼り付けます)

<style type="text/css">
#oc-plugin-wrapper { bottom: 20px !important; right: 24px !important; }
@media screen and (max-width: 600px) {
  #oc-plugin-wrapper { bottom: 12px !important; right: 12px !important; }
}
</style>

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

2行目の bottom: 20px right: 24px が PC用の設定です。
4行目の bottom: 12px right: 12px が スマートフォン用の設定です。

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

LINEアイコンバナーでは、テキスト吹き出し💬があるため、左に大きく位置を変更すると、吹き出しが画面をはみ出してしまうことがあります

LINEアイコンバナーの位置調整の設定は以上です。

リッチデザインバナーの位置調整用タグ

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

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

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

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

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

リッチデザインバナー位置調整用タグ(6行すべて貼り付けます)

<style type="text/css">
#oc-plugin-icon { bottom: 24px !important; right: 24px !important; }
@media screen and (max-width: 600px) {
  #oc-plugin-icon { bottom: 12px !important; right: 12px !important; }
}
</style>

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

2行目の bottom: 24px right: 24px が PC用の設定です。
4行目の bottom: 12px right: 12px が スマートフォン用の設定です。

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

リッチデザインバナーのアイコン位置調整の設定は以上です。