CSSを使ってソーシャルボタンを作ってみた!
今回はソーシャルボタンを作ってみましたのでご紹介します。
以前プラグインやソーシャルボタンが設置できるサービスを紹介しました。
プラグインやサービスを使えば簡単にいろいろなソーシャルボタンを設置することができますが、「読み込みが遅い」「ボタンのデザインのカスタマイズが出来ない」などのデメリットがあります。
CSSで作ったソーシャルボタンの方が読み込みが速く、カスタマイズしやすいというメリットがあります。
そこで今回はソーシャルボタンを作ってみました。
はじめに
ソーシャルボタンにはアイコンフォント『FontAwesome 5』を使用します。アイコンフォントを導入してない方は『FontAwesome5』を導入してください。
はてな、LINE、Feedlyのアイコン
『FontAwesome』にははてな、LINE、Feedlyのアイコンがありません。はてな、LINE、Feedlyのアイコンは別のアイコンフォントサービスで提供されています。
上記のサービスを利用しなくても以下のもので代用できると思います。
はてな ➡︎ B! (「B」と「!」の文字)
LINE ➡︎ (FontAwesome)
Feedly ➡︎ (FontAwesome)
HTML
HTMLはすべて共通です
<ul class="social-btn">
<li class="social-btn_twitter"><a href="#"><span class="fab fa-twitter"></span></a></li>
<li class="social-btn_facebook"><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li class="social-btn_google-p"><a href="#"><span class="fab fa-google-plus-g"></span></a></li>
<li class="social-btn_hatena"><a href="#"><span class="icon-hatena1"></span></a></li>
<li class="social-btn_pocket"><a href="#"><span class="fab fa-get-pocket"></span></a></li>
<li class="social-btn_line"><a href="#"><spanclass="icon-line"></span></a></li>
<li class="social-btn_feedly"><a href="#"><span class="icon-feedly"></span></a></li>
<li class="social-btn_rss"><a href="#"><span class="fas fa-rss"></span></a></li>
</ul>
使わないSNSボタンは削除してください。
2020年11月8日
各SNSのアイコンを<i>~</i>を使っていましたが、表示されないときがあるため<span>~</span>に変更しました。
「はてな」「LINE」「Feedly」のアイコンは『IconMoon』でダウンロードしたものを使っています。代わりのものを使用する場合は以下のように書き変えてください。
<li class="social-btn_hatena"><a href="#">B!</a></li>
LINE
<li class="social-btn_line"><a href="#"><span class="fad fa-comment"></span></a></li>
Feedly
<li class="social-btn_feedly"><a href="#"><span class="fas fa-rss"></span></a></li>
「LINE」「Feedly」はアイコンではなく文字してもいいかと思います。
デザインのデモとサンプルCSS
カラー
よく見かけるデザインのソーシャルボタンです。表示するソーシャルボタンの数によって各SNSボタンの横幅が変わります。
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
display:flex;
justify-content:flex-start;
flex-wrap:wrap;
width:100%;
list-style:none;
}
.social-btn li {
flex-grow:1;
display:block;
min-width:100px;
height:40px;
margin:2px;
padding:0;
line-height:40px;
font-size:20px;
text-align:center;
}
.social-btn a {
color:#fff;
text-decoration:none;
}
/*各SNSの背景色*/
.social-btn .social-btn_twitter {
background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook {
background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p {
background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena {
font-size:16px;
background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket {
background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line {
background-color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly {
background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss {
background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
上のデザインのボタンを横幅を固定させたものです。
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
display:flex;
flex-wrap:wrap;
list-style:none;
}
.social-btn li {
display:inline-block;
width:100px;
height:40px;
margin:2px;
padding:0;
line-height:40px;
font-size:20px;
text-align:center;
}
.social-btn a {
color:#fff;
text-decoration:none;
}
/*各SNSの背景色*/
.social-btn .social-btn_twitter {
background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook {
background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p {
background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena {
font-size:16px;
background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket {
background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line {
background-color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly {
background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss {
background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
list-style:none;
text-align:center;
}
.social-btn li {
display:inline-block;
width:30px;
height:30px;
margin:2px;
padding:0;
line-height:30px;
font-size:16px;
text-align:center;
border-radius:5px;
}
.social-btn a {
color:#fff;
text-decoration:none;
}
/*各SNSの背景色*/
.social-btn .social-btn_twitter {
background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook {
background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p {
background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena {
font-size:14px;
background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket {
background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line {
background-color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly {
background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss {
background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
上の小さいボタンをステッチ風にしてみました。
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
list-style:none;
text-align:center;
}
.social-btn li {
display:inline-block;
width:30px;
height:30px;
margin:2px 5px;
padding:0;
line-height:30px;
font-size:16px;
text-align:center;
border:1px solid #fff;
border-radius:3px;
}
.social-btn a {
color:#fff;
text-decoration:none;
}
/*各SNSの設定*/
.social-btn .social-btn_twitter {
box-shadow:0 0 0 3px #1da1f2;
background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook {
box-shadow:0 0 0 3px #3b5998;
background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p {
box-shadow:0 0 0 3px #dd4b39;
background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena {
font-size:14px;
box-shadow:0 0 0 3px #008fde;
background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket {
box-shadow:0 0 0 3px #ef4056;
background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line {
box-shadow:0 0 0 3px #00c300;
background-color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly {
box-shadow:0 0 0 3px #2bb24c;
background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss {
box-shadow:0 0 0 3px #f26522;
background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
長方形のボタンをステッチ風にしてみました。
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
display:flex;
flex-wrap:wrap;
list-style:none;
}
.social-btn li {
display:inline-block;
width:80px;
height:25px;
margin:5px;
padding:0;
line-height:25px;
font-size:16px;
text-align:center;
border-top:1px dotted #fff;
border-bottom:1px dotted #fff;
}
.social-btn a {
color:#fff;
text-decoration:none;
}
/*各SNSの設定*/
.social-btn .social-btn_twitter {
box-shadow:0 0 0 3px #1da1f2;
background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook {
box-shadow:0 0 0 3px #3b5998;
background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p {
box-shadow:0 0 0 3px #dd4b39;
background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena {
font-size:14px;
box-shadow:0 0 0 3px #008fde;
background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket {
box-shadow:0 0 0 3px #ef4056;
background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line {
box-shadow:0 0 0 3px #00c300;
background-color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly {
box-shadow:0 0 0 3px #2bb24c;
background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss {
box-shadow:0 0 0 3px #f26522;
background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
白いボタン
白い背景色のシンプルなボタン
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
display:flex;
flex-wrap:wrap;
list-style:none;
}
.social-btn li {
display:inline-block;
width:100px;
height:40px;
margin:2px;
padding:0;
line-height:40px;
font-size:22px;
text-align:center;
border:2px solid gray;
border-radius:5px;
background-color:#fff;
}
.social-btn a {
text-decoration:none;
}
.social-btn a:hover {
color:#fff;
}
/*各SNSの設定*/
.social-btn .social-btn_twitter a {
color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook a {
color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p a {
color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena a {
font-size:18px;
color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket a {
color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line a {
color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly a {
color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss a {
color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
text-align:center;
list-style:none;
}
.social-btn li {
display:inline-block;
width:40px;
height:40px;
margin:2px;
padding:0;
line-height:40px;
font-size:22px;
text-align:center;
border:2px solid gray;
border-radius:5px;
background-color:#fff;
}
.social-btn a {
text-decoration:none;
}
.social-btn a:hover {
color:#fff;
}
/*各SNSの設定*/
.social-btn .social-btn_twitter a {
color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook a {
color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p a {
color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena a {
font-size:18px;
color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket a {
color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line a {
color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly a {
color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss a {
color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
丸いボタン
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
list-style:none;
text-align:center;
}
.social-btn li {
display:inline-block;
width:40px;
height:40px;
margin:2px;
padding:0;
line-height:40px;
font-size:16px;
text-align:center;
border-radius:50%;
}
.social-btn a {
color:#fff;
text-decoration:none;
}
/*各SNSの設定*/
.social-btn .social-btn_twitter {
background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook {
background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p {
background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena {
font-size:14px;
background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket {
background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line {
background-color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly {
background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss {
background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
list-style:none;
text-align:center;
}
.social-btn li {
display:inline-block;
width:40px;
height:40px;
margin:5px;
padding:0;
line-height:40px;
font-size:16px;
text-align:center;
border:1px solid #fff;
border-radius:50%;
}
.social-btn a {
color:#fff;
text-decoration:none;
}
/*各SNSの設定*/
.social-btn .social-btn_twitter {
box-shadow:0 0 0 3px #1da1f2;
background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook {
box-shadow:0 0 0 3px #3b5998;
background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p {
box-shadow:0 0 0 3px #dd4b39;
background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena {
box-shadow:0 0 0 3px #008fde;
font-size:14px;
background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket {
box-shadow:0 0 0 3px #ef4056;
background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line {
box-shadow:0 0 0 3px #00c300;
background-color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly {
box-shadow:0 0 0 3px #2bb24c;
background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss {
box-shadow:0 0 0 3px #f26522;
background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
/*-------------------------
ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
margin:1em 0;
text-align:center;
list-style:none;
}
.social-btn li {
display:inline-block;
width:40px;
height:40px;
margin:2px;
padding:0;
line-height:40px;
font-size:22px;
text-align:center;
border:2px solid gray;
border-radius:50%;
background-color:#fff;
}
.social-btn a {
text-decoration:none;
}
.social-btn a:hover {
color:#fff;
}
/*各SNSの設定*/
.social-btn .social-btn_twitter a {
color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
background-color:#7ccaf7;
}
.social-btn .social-btn_facebook a {
color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
background-color:#6f8cc7;
}
.social-btn .social-btn_google-p a {
color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
background-color:#eb978e;
}
.social-btn .social-btn_hatena a {
font-size:18px;
color:#008fde;
}
.social-btn .social-btn_hatena:hover {
background-color:#42bcff;
}
.social-btn .social-btn_pocket a {
color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
background-color:#F69CA8;
}
.social-btn .social-btn_line a {
color:#00c300;
}
.social-btn .social-btn_line:hover {
background-color:#28FF28;
}
.social-btn .social-btn_feedly a {
color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
background-color:#f69ca8;
}
.social-btn .social-btn_rss a {
color:#f26522;
}
.social-btn .social-btn_rss:hover {
background-color:#f7a782;
}
リンク先
ボタンのHTMLには各SNSへのリンクは設定してありません。
各SNSへのリンクはHTML内の <a href="#"> の『#』部分に設定してください。
フォローのリンク先
フォローボタンとして使う場合はリンク先は『ご自分のプロフィール』ページを設定してください。
RSSボタンのリンク先
RSSのリンク先はご自分のサイトの『RSSフィードURL』になります。
RSSフィードURLがわからない方は以下の記事で調べ方について書いてありますので参考にしてください。
最後に
今回はソーシャルボタンを作ってみました。
プラグインやサービスのソーシャルボタンの方が設置が簡単で機能もいいですが、CSSで作ったソーシャルボタンの方が読み込みが速いし自分の好きなデザインにすることも可能です。
きらり
HTMLが共通だからCSSを変えればデザインを変えられるね!
結耶
気に入るデザインがあるかわかりませんが、よかったらご利用ください(*^^*)
ディスカッション
コメント一覧
こんにちは!ランキングから来ました。
ソーシャルボタンって、作れるんですね。
初めて知りました。参考になりました。
ありがとうございました。
> マルリンさん
こんばんは。
コメントありがとうございます。
私も最初はそう思っていました。でも作れるんですよ(*^^*)
公式のボタンは各SNSでデザインも大きさもバラバラですが、自分CSSを使って作ればまとまりますよね。
機会があればご利用ください。