JavaScript(jQuery)でSNSボタンの作成とデザインをしよう!

snsボタン

今回は比較的簡単に、言ってしまえば”コピペ”ですぐに使えちゃう、それくらい簡単にSNSボタンを作る方法を解説します。

他の記事で言いましたが、コピペで使えるならコピペしちゃう。必要に応じて調整する。
そのためにもコピペできるようこの記事を書きました。ぜひ利用してください!

※完成形は上の画像です。

スポンサーリンク

まず今回使うサンプルとしてのHTMLを示します。

<div class="nav_wrapper">
  <a href="URL" class="twitter">
    <i class="fa fa-twitter" aria-hidden="true"></i>
  </a>
  <a href="URL" class="soundcloud">
    <i class="fa fa-soundcloud" aria-hidden="true"></i>
  </a>
  <a href="URL" class="twitch">
    <i class="fa fa-twitch" aria-hidden="true"></i>
  </a>
</div>

URLの部分はリンク先のURLを貼ってください。今回はtwitter,soundcloud,twitchのURLだと思ってください。

全体をクラス名”nav_wrapper”のdivで囲い、それぞれのaタグにわかりやすいクラス名をつけています。

その下のiタグは、あとで説明しますので今は無視してOKです。

あ、あと忘れないうちに言っておきます。これ結構動作不良の犯人になること多いのですが、jQueryのcdnもペーストしといてくださいね。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

場所はbody閉じタグのの直前(body閉じタグのすぐ上)にペーストしておくといいと思います。

まずはSNSのアイコンを手に入れよう!有能アイコンサイト”font awesome”

有名なSNSやアプリ、その他もろもろのアイコンをHTMLコードと共に取得できる万能サイトがあります。
それが”font awesome”です。font awesome4へ

今回はfont awesome4を使いたいと思います。まずこちらのcdnをheadタグ内にコピペしてください!

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

twitterとか検索かければアイコンがいくつか出てきて、クリックするとコードが表示されます。
そのコードを上のサンプルHTMLのように表示させたい場所にペーストしてください。

この時、iタグに新しいクラス “fa-2x” や “fa-3x” などを付け足すとそのアイコンの大きさを調整することが出来ます。

CSSでキレイに横一列に並べよう!

snsボタン

アイコンに色をつけるとともに、それらをキレイに横一列に並べてみましょう!
とりあえずCSSはこんな感じですね。

.nav_wrapper{
display: flex;
justify-content: space-around;
}
.nav_wrapper a{
width: 20%;
text-align: center;
transition: .5s;
}
.twitter{
border: 1px solid #1EA1F2;
color:#1EA1F2;
}
.soundcloud{
border: 1px solid #FF6800;
color:#FF6800;
}
.twitch{
border: 1px solid #9148FF;
color:#9148FF;
}

ミソとなるのが display:flex です。
justify-content:space-aroundでそれぞれのボタンを等間隔に横並びにします。

それぞれのボタンに適切な色をつけるとともに、ボタンらしく四角形にするため “border” を設定してます。
しかしここでaタグに “width” を設定しないとキレイな四角形にならないので気を付けてください!

これはしなくてもいいのですが、”transition” を設定すると色が一瞬でなくじんわりと変化するようになります。しなくても支障は無いですが、これの有無で感じ方が違うと思いますね。

ここは難しかったらコピペでいいよ!jQueryでホバー時のアニメーションをつけよう

今回は “hover” を用いてマウスホバー時のエフェクトを実現します。

< script type = "text/javascript" > $(function () {
  $('.twitter').hover(function () {
    $(this).css({
      'color': '#fff',
      'background-color': '#1EA1F2'
    });
  }, function () {
    $(this).css({
      'color': '#1EA1F2',
      'background-color': '#fff'
    });
  });
  $('.soundcloud').hover(function () {
    $(this).css({
      'color': '#fff',
      'background-color': '#FF6800'
    });
  }, function () {
    $(this).css({
      'color': '#FF6800',
      'background-color': '#fff'
    });
  });
  $('.twitch').hover(function () {
    $(this).css({
      'color': '#fff',
      'background-color': '#9148FF'
    });
  }, function () {
    $(this).css({
      'color': '#9148FF',
      'background-color': '#fff'
    });
  });
}); < /script>

(‘クラス名’).hover(function(){置いた時の動作}, function(){離れた時の動作});

の順で書きます。
色の反転なので白色#fffと、元の色を記述する場所を置き換えるだけです。

jQueryよくわかんないっていう人はただコピペしちゃって大丈夫ですよ。

最後に

以上が、HTML・CSS・jQueryでSNSボタンをできるだけ簡単に作る方法です。

font awesomeを今回初めて知った人はぜひ活用していってください!
本当にいろんなアイコンがあります。

SNSボタンはフォロワーを増やす大切な要素になってきますので、今回学んだことを活かしてみてはどうでしょうか!
最後まで読んでいただきありがとうございました。頑張ってください!

タイトルとURLをコピーしました