スポンサーリンク

CSSを使ってソーシャルボタンを作ってみた!

2019年9月23日

今回はソーシャルボタンを作ってみましたのでご紹介します。

以前プラグインやソーシャルボタンが設置できるサービスを紹介しました。

プラグインやサービスを使えば簡単にいろいろなソーシャルボタンを設置することができますが、「読み込みが遅い」「ボタンのデザインのカスタマイズが出来ない」などのデメリットがあります。

CSSで作ったソーシャルボタンの方が読み込みが速く、カスタマイズしやすいというメリットがあります。
そこで今回はソーシャルボタンを作ってみました。

スポンサーリンク

はじめに

ソーシャルボタンにはアイコンフォント『FontAwesome 5』を使用します。アイコンフォントを導入してない方は『FontAwesome5』を導入してください。

はてな、LINE、Feedlyのアイコン

『FontAwesome』にははてな、LINE、Feedlyのアイコンがありません。はてな、LINE、Feedlyのアイコンは別のアイコンフォントサービスで提供されています。

上記のサービスを利用しなくても以下のもので代用できると思います。

はてな ➡︎ B! (「B」と「!」の文字)

LINE ➡︎ (FontAwesome)

Feedly ➡︎ (FontAwesome)

HTML

HTMLはすべて共通です

使わないSNSボタンは削除してください。

「はてな」「LINE」「Feedly」のアイコンは『IconMoon』でダウンロードしたものを使っています。代わりのものを使用する場合は以下のように書き変えてください。

はてな
5行目
<li class="social-btn_hatena"><a href="#">B!</a></li>
LINE
7行目
<li class="social-btn_line"><a href="#"><i class="fad fa-comment"></i></a></li>
Feedly
8行目
<li class="social-btn_feedly"><a href="#"><i class="fas fa-rss"></i></a></li>

「LINE」「Feedly」はアイコンではなく文字してもいいかと思います。

デザインのデモとサンプルCSS

カラー

1.横幅が可変するボタン

よく見かけるデザインのソーシャルボタンです。表示するソーシャルボタンの数によって各SNSボタンの横幅が変わります。


2.横幅固定

上のデザインのボタンを横幅を固定させたものです。

3.小さいボタン
4.小さいボタン(ステッチ風)

上の小さいボタンをステッチ風にしてみました。

5.長方形(ステッチ風)

長方形のボタンをステッチ風にしてみました。

白いボタン

6.白いボタン

白い背景色のシンプルなボタン

丸いボタン

8.丸いボタン
9.丸いボタン
10.白い丸いボタン
スポンサーリンク

リンク先

ボタンのHTMLには各SNSへのリンクは設定してありません。

各SNSへのリンクはHTML内の <a href="#"> の『#』部分に設定してください。

フォローのリンク先

フォローボタンとして使う場合はリンク先は『ご自分のプロフィール』ページを設定してください。

RSSボタンのリンク先

RSSのリンク先はご自分のサイトの『RSSフィードURL』になります。
RSSフィードURLがわからない方は以下の記事で調べ方について書いてありますので参考にしてください。

最後に

今回はソーシャルボタンを作ってみました。

プラグインやサービスのソーシャルボタンの方が設置が簡単で機能もいいですが、CSSで作ったソーシャルボタンの方が読み込みが速いしカスタマイズしやすいです。

きらり
きらり

HTMLが共通だからCSSを変えればデザインを変えられるね!

結耶
結耶

気に入るデザインがあるかわかりませんが、よかったらご利用ください(*^^*)

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。