ソーシャルボタンの高さを揃えて横並びにするシンプルなスタイル(レスポンシブ対応)

ソーシャルボタン

ブログの拡散には必須となったFacebookやtwitterのソーシャルボタン。設置しようとすると、高さはバラバラだし、幅もむちゃくちゃだし、「規格揃えてくれ!!」と訴えたくなります。そこで各ボタンの高さを揃えて、綺麗に整列させるシンプルなスタイルを作りました。

HTML

各liの中にソーシャルボタンを設置します。

CSS

先ほどのliをinline-blockにして横に並べます。vertical-align: top;にして上を綺麗に揃えて終わりです。
text-align: left;を変えると、中央揃え、右揃えのボタンも作る事ができます。
@media screenは、小さな端末で一部SNSボタンがwidth:100%になり、レイアウトが崩れてしまうため設定しています。

各SNSボタンの横幅が違ったり、まだまだ調整する箇所は多いですが、取り急ぎこちらのCSSで、それなりに整ってみせることができると思います。

ソーシャルマーケティングを勉強するのにオススメの本


ソーシャルメディアと実際の人間社会がどのように関連するのか、認知心理学などを用いて解説しています。ユーザーがソーシャルメディアをどのような時に、どのような気持ちで使うのか広い視点が書かれている本です。

  • このエントリーをはてなブックマークに追加
« »

デザインとカメラとロードバイクと畑

© 2017 cowcow blog