📏
友だち追加バナーの表示位置を調整する方法
カスタムCSSを貼り付けて表示位置を調整する
友だち追加バナーの表示位置を調整するには、Shopify の「カスタムCSS」機能を使います。
次項で紹介する位置調整用のCSSを貼り付けます。
テーマにカスタムCSSを追加する![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/4c21200c-2587-4a08-abd8-a941af8a7180/0f2adf472a33a9ec2dbf989fbf528e33.png)
- Shopify Adminで [オンラインストア] > [テーマ] の順に移動します。
- [カスタマイズ] をクリックします。
- [テーマ設定] をクリックします。
- [カスタムCSS] をクリックします。
- コードを追加します。
- [保存] をクリックします。
![](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/4c21200c-2587-4a08-abd8-a941af8a7180/0f2adf472a33a9ec2dbf989fbf528e33.png)
LINEアイコンバナーの位置調整用CSS
![LINEアイコンバナー(アイコンのみ)](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/0d0e47a4-0343-414f-8dd8-499b584bf62e/5aa6b42886242788396bb2953fa48df9.png)
![LINEアイコンバナー(アイコン+テキスト)](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/991472fc-26e7-46cc-b658-a46bbae2a3e7/6784f6f9c578b40ca627f9f4b7f0bbca.png)
バナー位置調整用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;
}
}
バナー位置調整用CSSの、数値の部分を変更します。
前半2〜3行目の が PC用の設定です。
後半7〜8行目の が スマートフォン用の設定です。
の数値を変えると上下の位置を調整できます。「下からXX px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右からXX px」の意味なので数値を大きくすると左へ寄ります。
LINEアイコンバナーでは、テキスト吹き出し💬があるため、左に大きく位置を変更すると、吹き出しが画面をはみ出してしまうことがあります
LINEアイコンバナーの位置調整の設定は以上です。
リッチデザインバナーの位置調整用CSS
![リッチデザインバナーアイコン](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/f02abee9-3cdd-485f-bed2-260bdae3f6f2/5fb3405292db0eddbc6437a749027dd8.png)
![リッチデザインバナーのパネル領域](https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/dolphin/a81f4baa-3018-43dc-b255-9ab68a11d992/81e28dd3a039c1f2e6113c459b056be3.png)
リッチデザインバナーでは、「アイコン」ではない「パネル領域」の場所を変更することはできません。「アイコン」の位置のみ調整可能です。
リッチデザインバナー位置調整用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;
}
}
位置調整用CSSの、数値の部分を変更します。
前半2〜3行目の が PC用の設定です。
後半7〜8行目の が スマートフォン用の設定です。
の数値を変えると上下の位置を調整できます。「下からXX px」の意味なので数値を大きくすると上へ寄ります。
同じく は左右の位置を調整します。「右からXX px」の意味なので数値を大きくすると左へ寄ります。
リッチデザインバナーのアイコン位置調整の設定は以上です。