📏
友だち追加バナーの表示位置を調整する方法
おみせコネクトのトラッキングタグに位置調整タグを追記する
友だち追加バナーの表示位置を調整するには、既に設定済のおみせコネクトトラッキングタグに、追加で、位置調整用のタグを貼り付けます。
BASEの を使用している場合
![トラッキングタグの設定方法](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/42dfbe6c-6b5a-4e79-8319-d2e194c94718/cdbda6d10135f9b7d81961a99a2ba846.png)
HTMLタグ管理Appを起動し、既に設定済のおみせコネクトトラッキングタグを編集し、トラッキングタグの上部に位置調整用のタグを追記します。
追加する位置調整用タグは次項で説明します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/debc427c-453f-49e8-8c52-4963bc83712e/d6ae897e00a34d82181b8957564d1d22.png)
BASEのを使用している場合
![HTML編集Appによるトラッキングタグの設定方法[非推奨]](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/6ca98edf-7976-43ba-984e-882a7170859e/cdbda6d10135f9b7d81961a99a2ba846.png)
HTML編集Appのエディタを起動し、既に設置済のおみせコネクトのトラッキングタグを探します( 閉じタグの直前に記載しているはずです)。
見つかったら、おみせコネクトトラッキングタグの上部に、位置調整用のタグを追記します。追加する位置調整用タグは次項で説明します。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/19186398-21eb-4d6d-b8d8-733a57539ce0/7823bda58f99bfffea0ed83808776019.png)
LINEアイコンバナーの位置調整用タグ
![LINEアイコンバナー(アイコンのみ)](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/db962818-e4bd-4893-8763-df7f52b681f8/5aa6b42886242788396bb2953fa48df9.png)
![LINEアイコンバナー(アイコン+テキスト)](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/cc47b870-7718-419e-905d-d80db31c027d/6784f6f9c578b40ca627f9f4b7f0bbca.png)
バナー位置調整用タグ(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行目の が PC用の設定です。
4行目の が スマートフォン用の設定です。
の数値を変えると上下の位置を調整できます。「下からXX px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右からXX px」の意味なので数値を大きくすると左へ寄ります。
LINEアイコンバナーでは、テキスト吹き出し💬があるため、左に大きく位置を変更すると、吹き出しが画面をはみ出してしまうことがあります
LINEアイコンバナーの位置調整の設定は以上です。
リッチデザインバナーの位置調整用タグ
![リッチデザインバナーアイコン](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/b69c7c2e-3366-4f42-a000-5df69d8c6fbe/5fb3405292db0eddbc6437a749027dd8.png)
![リッチデザインバナーのパネル領域](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/b395b2c7-a164-4132-abca-1764c180d7a0/81e28dd3a039c1f2e6113c459b056be3.png)
リッチデザインバナーでは、「アイコン」ではない「パネル領域」の場所を変更することはできません。「アイコン」の位置のみ調整可能です。
リッチデザインバナー位置調整用タグ(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行目の が PC用の設定です。
4行目の が スマートフォン用の設定です。
の数値を変えると上下の位置を調整できます。「下からXX px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右からXX px」の意味なので数値を大きくすると左へ寄ります。
リッチデザインバナーのアイコン位置調整の設定は以上です。