[戻る]
No.3413

SNSボタン表示の上下揃え

target eshopさん  投稿日:2019/02/19(Tue) 15:38
key

ソーシャルエリアにつきまして質問があります。

当ショップではフッターにSNSボタンを表示していますが、各ボタンの上下揃えがズレて表示されてしまいます。(facebookが少し下でtwitter,google+が少し上です。)
これを揃えて並べたいのですがやり方がわからず困っています。
恐れ入りますがどなたかお知恵を頂けませんでしょうか。
※ソーシャルエリアの設定は「初期値に戻す」にしました。
宜しくお願いいたします。

Re: SNSボタン表示の上下揃え

おたすけマイショップさん  2019/02/19(Tue) 17:45 No.3414
key

ソーシャルエリアのボタン位置につきましては、お手数をかけますが現状は以下のスタイルを追加していただくことで調整できます。

.fb_iframe_widget {
vertical-align: top;
}

ご利用の上級モードにてスタイルを追加する場合は以下の手順で追加してください。

1.デザイン設定(店長ナビ>拡張設定)を開きます。
2.適用中テンプレート(背景オレンジ)の[CSS]をクリックします。
3.[design.css]の[編集]ボタンを押します。
4.登録画面の最下部へスタイルを追加して保存すれば完了です。

[補足]
 標準モードをではこちらの事象は発生いたしませんが、上級モードを通常使用しており標準モードに
 切替を行うと参照するデータが異なるためショップページのデザイン等が崩れる場合がございます。
 上級モードを引き続きご利用いただく場合は上記スタイルの追加にてご対応をお願い致します。

尚、今後前述のスタイル追加が不要となるようなテンプレート側の対応を行うことを検討させていただきます。


Re: SNSボタン表示の上下揃え

target eshopさん  2019/02/19(Tue) 19:23 No.3415
key

>おたすけマイショップさん

迅速なご回答有難う御座いました。
希望通りに行きました。
今後とも宜しくお願いします。


Re: SNSボタン表示の上下揃え

target eshopさん  2019/02/20(Wed) 13:42 No.3418
key

すいません。続きがありました(汗)。
2点あります(滝汗)。

1)商品一覧ページでは希望通り行ったのですが商品詳細ではツィートボタンのみ、ボタンが示されず文字表示のみになりました(上下揃えは上手く行っています)。商品一覧と同じソーシャルエリアを参照していると思うのですが。

2)PCの商品一覧ページでは最初の質問の問題は解消されたのですがスマートフォンだと効果がないようです。

上記2点につきまして、ご教授頂ければと思います。お手数ですが宜しくお願いいたします。


Re: SNSボタン表示の上下揃え

おたすけマイショップさん  2019/02/20(Wed) 19:49 No.3419
key

こちらも上級モード特有の内容となります。
商品詳細ページにて[ツイート]ボタンが文字となってしまう現象につきましてはお手数をかけますが以下の手順にて一部内容を修正することで画像での表示となります。

1.デザイン設定(店長ナビ>拡張設定)を開きます。
2.フリーエリア一覧(デザイン設定>レイアウトタブ)を開きます。
3.ソーシャルエリアの[編集]ボタンを押します。
4.ソーシャルエリア内の一部コードを以下の様に変更して保存すれば完了です。
<!--===== Twitter =====-->
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ja">ツイート</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!--===== / Twitter =====-->



<!--===== Twitter =====-->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ja">ツイート</a><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
<!--===== / Twitter =====-->

お手数をかけますが以上を参照いただきご対応をお願い致します

次にスマートフォンページにて各ボタンの並びにズレが生じる件については以下のスタイルを追加していただきますようお願いいたします。

div.fb-like.fb_iframe_widget.fb_iframe_widget_fluid {
display: inline-block;
}

※追加方法は前回と同じ方法でお願い致します。


ご案内は以上です。

ご面倒をおかけし大変失礼いたしました。
今後は初期値の修正等を含め対応させていただきます。


Re: SNSボタン表示の上下揃え

target eshopさん  2019/02/21(Thu) 12:45 No.3422
key

上手く行きました。有難う御座いました!



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』