プロフィール用のSNSボタンを作ってみた

今回は本ブログのTwitter用アカウントを用意したので、ウィジェットのプロフィール内に挿入するSNSボタンを作ってみました。

仕上がり

作ったものは以下の画像のボタンです。

そこまで難しいものではないですが、CSSの記述を残しておきたいと思います。

作り方

HTMLのコード

<div class="sns-buttons--center">
	<a href="https://twitter.com/ユーザーID" class="btn-sns btn-sns-twitter" target="_blank"></a>
</div>

a要素には、2つのclass名をつけました。SNSボタンで共通スタイルを指定するbtn-snsクラスと、Twitter独自のアイコンやカラーを指定するためのbtn-sns-twitter。後者のクラス名はSNSの種類によってクラス名を変更して使い分けます。(instaglamなら、btn-sns-instaglamみたいな想定です。)また、アイコンを表示させる方法はCSSでafter疑似要素を使用したかったので、a要素は空にしました。

CSSのコード

.sns-buttons--center{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  width:100%;
  margin-top:-12px;
}
.sns-btns--center > .btn-sns{
  margin:12px 6px 0;
}
.btn-sns{
  display:block;
  position:relative;
  width:42px;
  height:42px;
  border-radius:50%;
  color:rgba(255,255,255,1);
  transition:0.5s;
  font-family:'Font Awesome 5 Brands';
}
.btn-sns-twitter{
  background:rgba(29,161,242,1);
}
.btn-sns-twitter::after{
  position:absolute;
  top:50%;
  left:50%;
  font-weight:400;
  font-size:18px;
  transform:translate(-50% , -50%);
  content:'\f099';
}

2点ほどポイントがあります。

①font-family は Font Awesome 5 Brands を指定する。
アイコンは「Font Awesome」を利用していますが、いつものようにユニコードを入力したら変なマークになり使えませんでした。いろいろ調べるとロゴマークを使用する場合は font-family の値は「Font Awesome 5 Free」ではなく「Font Awesome 5 Brands」を指定しないと表示されません。

  font-family:'Font Awesome 5 Brands';

②どうやってアイコンをセンタリングさせるか
今回、アイコンを真ん中に表示させるために使ったテクニックは、top と left から 50% 移動させてから、transform で -50% 戻してあげるテクニックです。

  top:50%;
  left:50%;
  transform:translate(-50% , -50%);

はじめての方は何を言っているかさっぱりわからないと思いますが、図解するとわかりやすいです。わかりやすさ重視で縦軸(Y軸)だけのセンタリングで図解しています。

座標の基準点が左上ということを踏まえて、全体の半分下げて、要素分の50%上げて上げるというテクニックです。ちなみに TOP や left プロパティは、「position」の値が static 以外に指定されていないと効きません。今回は、a要素を position : relative ; に、疑似要素を position : absolute ; にしています。

text-align とか vertical-align でセンタリングしようとして「うわあああ」ってなる人は要チェックですね!今回のやり方はセンタリングでよく使うテクニックなので覚えておいて損はありません!頭の片隅にでもそっと保存しておくといいことがあるかもしれません!


あとは、お好みでボタンを角丸にしたり、アニメーションを付けたりすればOK!今回、私はマウスオーバーで、アイコンが上がって影ができる、みたいな感じにしました!なんかそれっぽくないですか?笑

See the Pen Untitled by MATSUDAI (@matsudai) on CodePen.

子セレクタを使ってボタン同士の間隔を空ける

ボタンが2つ以上並ぶことを想定して、それぞれの間隔をあけるスタイルは、SNSボタンを囲っているボックスを親として「子セレクタ」にて指定しました。

.sns-btns--center{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  width:100%;
  margin-top:-12px;
}
.sns-btns--center > .btn-sns{
  margin:12px 6px 0;
}

ボタンをたくさん並べたイメージがこちらです。

flex-wrap : wrap ; を使用してボタンの並びを折り返し表示をさせるため上か下にマージンを付けたいですが、付けるとどうしても余分なマージンができてしまいます。解決策として、個人的にはあまり好きではありませんがマイナスマージンを使い、はみ出ている部分を打ち消しました。

ねらい

ボタン単品で使いまわす場合に、余計なマージンが発生しないように「子セレクタ」を使用しました。

<a href="https://twitter.com/ユーザーID" class="btn-sns btn-sns-twitter" target="_blank"></a>

記事下のプロフィールにも入れてみた

記事下のプロフィールにもSNSボタンを入れてみました。現状のデザインだと左揃えにしたいので、SNSボタンを囲っているボックス用のCSSを用意してスタイルを指定しました。

.sns-btns--left{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  width:100%;
  margin-top:-12px;
  margin-left:-12px;
}
.sns-btns--left > .btn-sns{
  margin:12px 0 0 12px;
}

こちらは上と左にマイナスマージンを入れています。

まとめ

簡単にSNSボタンをを作る方法のひとつとして、CSSの疑似要素を使ってFontAwesomeのアイコンを入れることができます!プラグインを使用せずに自前でボタンを作りたい人はぜひ挑戦してみてください!

トップへ戻る