広報コンテンツ入門WORDSCONTACTFacebookのSNSボタンがずれるときの位置調整はCSSだけでOK!WEB運用TwitterFacebookはてブPocketLINE2018.12.03Facebookのいいねボタンやシェアボタンなどのソーシャルボタンは、今や必須のボタンです。そんなFacebookのボタンを付けた時に、他のソーシャルボタンとのズレが発生してしまいました。デザイン的によろしくないので、なんとかCSSだけで修正します。スポンサーリンク目次FacebookのSNSボタンがずれる現象Facebookのボタンの設置方法は二通りずれる原因は?CSSを記述してみるFacebookのSNSボタンがずれる現象WEBサイトを作っていると必ずと言っていいほど設置するソーシャルボタン。SNS連携というのは今や必須の技術ではないでしょうか。サイトを作っていてふと気づくことがあります。あれ、Facebookのソーシャルボタンだけずれてね?異常に気持ち悪いのと、どうみてもデザイン的にいけていないので直すことに。思った通りツボにはまったのでメモとして残します。Facebookのボタンの設置方法は二通りFacebookのSNSボタン設置方法は二通りです。Javascriptを使うものと、IFrameを使うものです。IFrameの仕様上、今後の対応として心配な方は、Javascript版を使いましょう。そのJavascript版が今回のズレを招いています。デザインのIFrameを取るか、今後の安心と動的なコンテンツのためにJavasciptを取るか悩むところです。今回の問題についてはJavascript版ですので、そちらで解説します。ずれる原因は?ずれる原因はこちらを見ていただくと一目瞭然です。指定した位置にそのコードを挿入することで表示しています。そのIFrameのソースコードを見てみると、次のような記述が・・・。bottom;だったのです。ここまで原因が分かればあとは対処するだけと思っていましたが、ここでも躓きました。IFrameの中のCSSって、変更できたっけ?CSSを記述してみるそもそも、Styleタグって、一番強いプロパティのはず。次のコードをCSSファイルに記述し試してみました。baseline;}はい、見事反映されません。思い出した「!important」ルール。そもそもCSSの優先順位はどうなっているのでしょうか。優先度は次の通りです。ブラウザデフォルト・スタイルシートユーザー・スタイルシートページ内のスタイルシートStyleタグに記述したスタイルまずはスタイルシート順では下に行くほど優先度が高くなります。一つ、後から上書きした方が強くなるという属性もあります。同じセレクタを使っている場合、同じプロパティは上書きされるということですね。この「!importan」ルールですが、これを付けるとスタイルを優先させるという動きがあるのです。これを使えば、IFrameのスタイルシートを上書きできるかも!ということでやってみました。!important;}はい、見事適用されちゃいました!やっとなおりました!これで、デザインも違和感の無いものになりました。damema.net空海人2018年現在、某企業にて経営企画室としての業務を行う一方、グループ会社のマーケティング、ブランディングなどをしています。WEB回りの事が大好きで、自身でプログラムをしながらマーケティングの知識を深めています。沖縄が大好きなのでいつかは移住したいなぁ。空海人をフォローするコメントを書き込むコメントをキャンセルメールアドレスが公開されることはありません。広報コンテンツ入門WORDSCONTACTホーム検索トップサイドバーカテゴリーSEO23WEB運用10コンテンツ入門3トレンド20マーケティング57仕事39広報4おすすめ。