
この記事では「8種類のSNSボタン」と「お問い合わせ用のメールボタン「プロフィール用のボタン」のカスタマイズコードを「18パターン」載せています。
どれもコピペで使えますが、最初にHTMLコードを簡単に解説します。
HTMLコードサンプルcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn fl_tw1" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn insta_btn1"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn fl_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn fl_ma1"><i class="far fa-envelope"></i><div>Contact</div></a></li> </ul>
各URLの詳細は「よくある質問コーナー」に記載しています。
不要なアイコンを消す場合は、<li>
〜</li>
まで消してください。
例えば、「LINE@」を消す場合は
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn fl_li1"><i class="fab fa-line"></i><div>LINE</div></a></li>
までです。
またそれぞれ(緑字部分)を変更すればボタン内の文字を変更できます。
※文字なしタイプのボタンは関係ありません。
続いて、CSSコードです。
CSS
は子テーマのスタイルシート (style.css)にコピペしましょう。
- 外観の中にある「テーマの編集」をクリック
- コード貼り付け
- 「ファイルを更新」をクリック
子テーマの使い方はこちら

うまくいかなかった方は「よくある質問」を設置したので、そちらもあわせて参照ください。
18パターンのSNSボタン一覧表
気になるボタンをクリックしていただくと、コードの記載場所までひとっ飛びできます。
1.四角いベタ塗りのSNSボタン(文字付き)
マウスを乗せるとフワッと浮き上がります。
ボタンカラーはbackground
部分で変更してね。
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn fl_tw1" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn insta_btn1"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn fl_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn fl_ma1"><i class="far fa-envelope"></i><div>Contact</div></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn{ font-family:'Arial',sans-serif;/* 好きなフォントを指定してね */ border-radius:4px; position:relative; display:inline-block; width:66px; height:58px; font-size:30px; color:#fff!important; transition:.5s; text-decoration:none; box-shadow:0 1px 2px #999; } .flowbtn i{ position:relative; bottom:5px; } /* Twitter */ .fl_tw1{ background:#55acee; } /* Facebook */ .fl_fb1{ background:#3b5998; } /* はてブ */ .fl_hb1{ background:#1ba5dc; } /* Pocket */ .fl_pk1{ background:#ef3f56; } /* Feedly */ .fl_fd1{ background:#6cc655; } /* YouTube */ .fl_yu1{ background:#fc0d1c; } /* LINE */ .fl_li1{ background:#00c300; } /* 問い合わせ */ .fl_ma1{ background:#f3981d; } /* Instagram紫グラデ背景 */ .insta_btn1{ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow:hidden; } /* Instagramオレンジグラデ背景 */ .insta_btn1:before{ content: ''; position:absolute; top:33px; left:-20px; width:80px; height:50px; background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } /* ボタン内テキスト調整 */ .flowbtn div{ font-size:11px; font-weight:bold; letter-spacing:0; position:relative; bottom:22px; } /* ボタンマウスホバー時 */ .flowbtn:hover{ -webkit-transform:translateY(-5px); -ms-transform:translateY(-5px); transform:translateY(-5px); text-decoration:none; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* ボタン全体の位置調整 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-around; } /* ボタン同士の余白調整 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; }
2.文字付き四角い枠線ボタン
マウスを乗せると枠線と同じカラーに変わります。
CSS
が少しだけ細かくなるので注意してね。
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn2 fl_tw2" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn2 insta_btn2"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn2 fl_fb2"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn2 fl_fd2"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn2 fl_pk2"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn2 fl_hb2"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn2 fl_yu2"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn2 fl_li2"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn2 fl_ma2"><i class="far fa-envelope"></i><div>Contact</div></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn2{ font-family:'Courier',sans-serif;/* 好きなフォントに変えてね */ border-radius:4px; display:inline-block; width:66px; height:58px; font-size:30px; transition:.5s; text-decoration:none; } .flowbtn2 i{ position:relative; bottom:5px; } /* ボタンマウスホバー時のテキスト指定 */ .flowbtn2:hover{ color:#fff!important; text-decoration:none; } /* Twitter */ .flowbtn2.fl_tw2{ border:solid 1px #55acee; color:#55acee; } /* Twitterマウスホバー時 */ .flowbtn2.fl_tw2:hover{ border:solid 1px #55acee; background:#55acee; } /* お問い合わせ */ .flowbtn2.fl_ma2{ border:solid 1px #f3981d; color:#f3981d; } /* お問い合わせマウスホバー時 */ .flowbtn2.fl_ma2:hover{ border:solid 1px #f3981d; background:#f3981d; } /* Facebook */ .flowbtn2.fl_fb2{ border:solid 1px #3b5998; color:#3b5998; } /* Facebookマウスホバー時 */ .flowbtn2.fl_fb2:hover{ border:solid 1px #3b5998; background:#3b5998; } /* はてブ */ .flowbtn2.fl_hb2{ border:solid 1px #1ba5dc; color:#1ba5dc; } /* はてブマウスホバー時 */ .flowbtn2.fl_hb2:hover{ border:solid 1px #1ba5dc; background:#1ba5dc; } /* Pocket */ .flowbtn2.fl_pk2{ border:solid 1px #ef3f56; color:#ef3f56; } /* Pocketマウスホバー時 */ .flowbtn2.fl_pk2:hover{ border:solid 1px #ef3f56; background:#ef3f56; } /* Feedly */ .flowbtn2.fl_fd2{ border:solid 1px #6cc655; color:#6cc655; } /* Feedlyマウスホバー時 */ .flowbtn2.fl_fd2:hover{ border:solid 1px #6cc655; background:#6cc655; } /* YouTube */ .flowbtn2.fl_yu2{ border:solid 1px #fc0d1c; color:#fc0d1c; } /* YouTubeマウスホバー時 */ .flowbtn2.fl_yu2:hover{ border:solid 1px #fc0d1c; background:#fc0d1c; } /* LINE */ .flowbtn2.fl_li2{ border:solid 1px #00c300; color:#00c300; } /* LINEマウスホバー時 */ .flowbtn2.fl_li2:hover{ border:solid 1px #00c300; background:#00c300; } /* Instagram */ .flowbtn2.insta_btn2 { border:solid 1px #c6529a; color:#c6529a; } /* Instagramマウスホバー時 */ .flowbtn2.insta_btn2:hover{ border:solid 1px #c6529a; background:#c6529a; } /* ボタン内テキスト調整 */ .flowbtn2 div{ font-size:11px; letter-spacing:0; font-weight:bold; position:relative; bottom:22px; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* ボタンの位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-around; } /* ボタン同士の余白 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
3.丸いベタ塗りのSNSボタン(文字付き)
丸くしてみました。
フォントを変えるだけでも雰囲気が変わるよ。
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn3 fl_tw1" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn3 insta_btn3"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn3 fl_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn3 fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn3 fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn3 fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn3 fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn3 fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn3 fl_ma1"><i class="far fa-envelope"></i><div>Contact</div></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn3{ font-family:'Comic Sans MS','Chalkboard SE',sans-serif;/* 好きなフォントに変えてね */ border-radius:50%; position:relative; display:inline-block; width:70px; height:70px; font-size:30px; color:#fff!important; text-decoration:none; transition:.5s; } .flowbtn3 i{ position:relative; bottom:5px; } /* Twitter */ .fl_tw1{ background:#55acee; } /* 問い合わせ */ .fl_ma1{ background:#f3981d; } /* Feedly */ .fl_fd1{ background:#6cc655; } /* Pocket */ .fl_pk1{ background:#ef3f56; } /* Facebook */ .fl_fb1{ background:#3b5998; } /* はてブ */ .fl_hb1{ background:#1ba5dc; } /* YouTube */ .fl_yu1{ background:#fc0d1c; } /* LINE@ */ .fl_li1{ background:#00c300; } /* Instagram紫グラデ背景 */ .insta_btn3{ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow:hidden; } /* ボタン内のテキスト */ .flowbtn3 div{ font-size:11px; font-weight:bold; position:relative; bottom:21px; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* ボタン全体の位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-around; } /* ボタン同士の余白 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; } /* ボタンにマウスホバー時 */ .flowbtn3:hover{ -webkit-transform:translateY(-5px); -ms-transform:translateY(-5px); transform:translateY(-5px); text-decoration:none; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
4.丸い枠線のSNSボタン(文字付き)
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn4 fl_tw2" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn4 insta_btn2"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn4 fl_fb2"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn4 fl_fd2"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn4 fl_pk2"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn4 fl_hb2"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn4 fl_yu2"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn4 fl_li2"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn4 fl_ma2"><i class="far fa-envelope"></i><div>Contact</div></a></li> </ul>
style.csscopyする/* ボタン全体の装飾 */ .flowbtn4{ font-family:'Trebuchet MS',sans-serif;/* 好きなフォントに変えてね */ border-radius:50%; display:inline-block; width:70px; height:70px; font-size:30px; transition:.5s; text-decoration:none; } /* ボタンマウスホバー時テキストカラー */ .flowbtn4:hover{ color:#fff!important; } /* Twitter */ .flowbtn4.fl_tw2{ border:solid 1px #55acee; color:#55acee; } /* Twitterマウスホバー時 */ .flowbtn4.fl_tw2:hover{ border:solid 1px #55acee; background:#55acee; } /* Instagram */ .flowbtn4.insta_btn2 { border:solid 1px #c6529a; color:#c6529a; } /* Instagramマウスホバー時 */ .flowbtn4.insta_btn2:hover{ border:solid 1px #c6529a; background:#c6529a; } /* Facebook */ .flowbtn4.fl_fb2{ border:solid 1px #3b5998; color:#3b5998; } /* Facebookマウスホバー時 */ .flowbtn4.fl_fb2:hover{ border:solid 1px #3b5998; background:#3b5998; } /* Feedly */ .flowbtn4.fl_fd2{ border:solid 1px #6cc655; color:#6cc655; } /* Feedlyマウスホバー時 */ .flowbtn4.fl_fd2:hover{ border:solid 1px #6cc655; background:#6cc655; } /* Pocket */ .flowbtn4.fl_pk2{ border:solid 1px #ef3f56; color:#ef3f56; } /* Pocketマウスホバー時 */ .flowbtn4.fl_pk2:hover{ border:solid 1px #ef3f56; background:#ef3f56; } /* はてブ */ .flowbtn4.fl_hb2{ border:solid 1px #1ba5dc; color:#1ba5dc; } /* はてブマウスホバー時 */ .flowbtn4.fl_hb2:hover{ border:solid 1px #1ba5dc; background:#1ba5dc; } /* YouTube */ .flowbtn4.fl_yu2{ border:solid 1px #fc0d1c; color:#fc0d1c; } /* YouTubeマウスホバー時 */ .flowbtn4.fl_yu2:hover{ border:solid 1px #fc0d1c; background:#fc0d1c; } /* LINE */ .flowbtn4.fl_li2{ border:solid 1px #00c300; color:#00c300; } /* LINEマウスホバー時 */ .flowbtn4.fl_li2:hover{ border:solid 1px #00c300; background:#00c300; } /* お問い合わせ */ .flowbtn4.fl_ma2{ border:solid 1px #f3981d; color:#f3981d; } /* お問い合わせマウスホバー時 */ .flowbtn4.fl_ma2:hover{ border:solid 1px #f3981d; background:#f3981d; } /* ボタン内テキスト調整 */ .flowbtn4 div{ font-size:11px; font-weight:bold; position:relative; bottom:22px; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* ボタンの位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-between; } /* ボタン同士の余白 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
5.ボタンの下に文字を表示させるSNSボタン
オシャレなボタンです。
キレイに見せるコツは「Instagram」のアイコンだけサイズを大きくすること。
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn5 fl_tw1" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn5 insta_btn5"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn5 fl_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn5 fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn5 fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn5 fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn5 fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn5 fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn5 fl_ma1"><i class="far fa-envelope"></i><div>Contact</div></a></li> </ul>
サンプルボタンは.flowbtn5
にmargin-bottom:10px;
を追加し、見た目を整えています。
style.csscopyする/* ボタン全体 */ .flowbtn5{ font-family:'Times New Roman',sans-serif;/* 好きなフォントに変えてね */ border-radius:13px; position:relative; display:inline-block; width:50px; height:50px; font-size:33px; color:#fff!important; transition:.5s; text-decoration:none; } /* アイコンをど真ん中に*/ .flowbtn5 i{ position:absolute; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } /* Twitter */ .fl_tw1{ background:#55acee; } /* 問い合わせ */ .fl_ma1{ background:#f3981d; } /* Facebook */ .fl_fb1{ background:#3b5998; } /* はてブ */ .fl_hb1{ background:#1ba5dc; } /* Pocket */ .fl_pk1{ background:#ef3f56; } /* Feedly */ .fl_fd1{ background:#6cc655; } /* YouTube */ .fl_yu1{ background:#fc0d1c; } /* LINE */ .fl_li1{ background:#00c300; } /* Instagram紫グラデ背景色 */ .insta_btn5 { background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; } /* Instagramオレンジグラデ背景色 */ .insta_btn5:before{ content: ''; position:absolute; top:17px; left:-1px; width:45px; height:34px; background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } /* Instagramアイコン調整 */ .insta_btn5 .fa-instagram{ font-size:40px; } /* アイコンボタン下テキスト調整 */ .flowbtn5 div{ font-size:11px; color:#666; position:relative; top:45px; } /* アイコンボタンにマウスホバーした時の指定*/ .flowbtn5:hover{ -webkit-transform:translateY(-5px); -ms-transform:translateY(-5px); transform:translateY(-5px); text-decoration:none; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* アイコンボタン全体の位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-around; } /* アイコンボタン同士の余白調整 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
6.アプリアイコン風SNSボタン
多分使われないと思うけど、今回一番こだわったボタンです。笑
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn6 fl_tw1" ><i class="fab fa-twitter"></i></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn6 insta_btn6"><i class="fab fa-instagram"></i></a></li> <li><a href="FacebookページのURL" class="flowbtn6 fl_fb6"><i class="fab fa-facebook-f"></i></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn6 fl_fd6"><i class="fas fa-rss"></i></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn6 fl_pk6"><i class="fab fa-get-pocket"></i></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn6 fl_hb6"><i class="fas fa-bold"></i></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn6 fl_yu6"><i class="fab fa-youtube"></i></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn6 fl_li1"><i class="fas fa-at"></i></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn6 fl_ma6"><i class="far fa-envelope"></i></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn6{ border-radius:13px; position:relative; display:inline-block; width:50px; height:50px; font-size:33px; color:#fff!important; transition:.5s; text-decoration:none; } /* アイコンをど真ん中に*/ .flowbtn6 i{ position:absolute; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* アイコンボタン全体の位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-around; } /* アイコンボタン同士の余白 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; } /* アイコンボタンにマウスを乗せた時 */ .flowbtn6:hover{ -webkit-transform:translateY(-5px); -ms-transform:translateY(-5px); transform:translateY(-5px); } /* Twitter */ .fl_tw1{ background:#55acee; } /* Instagramアイコン位置 */ .insta_btn6 .fa-instagram{ font-size:40px; } /* Instagram紫グラデ背景 */ .insta_btn6 { background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow:hidden; } /* Instagramオレンジグラデ背景 */ .insta_btn6:before{ content: ''; position: absolute; top:27px; left:-12px; width:59px; height:40px; background:-webkit-radial-gradient(#ffdb2c 7%, rgba(255, 105, 34, 0.3) 60%, rgba(255, 88, 96, 0) 70%); background:radial-gradient(#ffdb2c 7%, rgba(255, 105, 34, 0.3) 60%, rgba(255, 88, 96, 0) 70%); } /* Facebookアイコン位置 */ .fl_fb6 .fa-facebook-f{ position:relative; top:23px; left:17px; font-size:43px; } /* Facebookアイコン背景*/ .fl_fb6{ background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%); background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%); } /* Feedly */ .fl_fd6{ background:#33b151; } /* Pocket */ .fl_pk6{ color:#ef3f56!important; box-shadow:0 0 2px #888; font-size:35px; } /* はてブ */ .fl_hb6 { background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%); background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%); font-size:25px; } /* YouTube */ .fl_yu6 { color:#fc0d1c!important; box-shadow:0 0 2px #888; } /* LINE@ */ .fl_li6{ background:#00c300; } /* メール */ .fl_ma6{ background:linear-gradient(135deg, #1B77F1 0%,#19BDFC 100%); }
CSSが上手くいかないときは「よくある質問コーナーへGO」
7.グラデーションをかけた丸いボタン
グラデーションをかけてみました。
女性向けサイトと相性が良さそうですね。
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn7 fl_tw7" ><i class="fab fa-twitter"></i></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn7 insta_btn7"><i class="fab fa-instagram"></i></a></li> <li><a href="FacebookページのURL" class="flowbtn7 fl_fb7"><i class="fab fa-facebook-f"></i></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn7 fl_fd7"><i class="fas fa-rss"></i></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn7 fl_pk7"><i class="fab fa-get-pocket"></i></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn7 fl_hb7"><i class="fas fa-bold"></i></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn7 fl_yu7"><i class="fab fa-youtube"></i></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn7 fl_li7"><i class="fab fa-line"></i></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn7 fl_ma7"><i class="far fa-envelope"></i></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn7{ border-radius:50%; position:relative; display:inline-block; width:50px; height:50px; font-size:30px; color:#fff!important; text-decoration:none; transition:.5s; } /* アイコンをど真ん中に*/ .flowbtn7 i{ position:absolute; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* ボタン全体の位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-around; } /* ボタン同士の余白 */ .snsbtniti li{ flex:0 0 33%; text-align:center !important; } /* ボタンにマウスを乗せた時 */ .flowbtn7:hover{ -webkit-transform:translateY(-5px); -ms-transform:translateY(-5px); transform:translateY(-5px); } /* Twitter */ .fl_tw7{ background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%); } /* Instagramアイコン位置 */ .insta_btn7 .fa-instagram{ font-size:35px; } /* Instagram紫グラデ背景 */ .insta_btn7{ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow:hidden; } /* Instagramオレンジグラデ背景 */ .insta_btn7:before{ content: ''; position:absolute; top:27px; left:-12px; width:59px; height:40px; background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } /* Facebook */ .fl_fb7{ background: linear-gradient(135deg, #6699ff 0%,#3b5998 100%); } /* Feedly */ .fl_fd7{ background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%); font-size:28px; } /* Pocket */ .fl_pk7{ background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%); } /* はてブ */ .fl_hb7{ background: linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%); font-size:25px; } /* YouTube */ .fl_yu7{ background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%); font-size:26px; } /* LINE */ .fl_li7{ background: linear-gradient(135deg, #3a9278 0%,#00c300 100%); } /* メールボタン */ .fl_ma7{ background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%); font-size:26px; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
8.丸い枠線のSNSボタン
丸い枠線は少しスタイリッシュになりますね。
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn8 fl_tw2" ><i class="fab fa-twitter"></i></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn8 insta_btn2"><i class="fab fa-instagram"></i></a></li> <li><a href="FacebookページのURL" class="flowbtn8 fl_fb2"><i class="fab fa-facebook-f"></i></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn8 fl_fd2"><i class="fas fa-rss"></i></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn8 fl_pk2"><i class="fab fa-get-pocket"></i></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn8 fl_hb2"><i class="fas fa-bold"></i></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn8 fl_yu2"><i class="fab fa-youtube"></i></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn8 fl_li2"><i class="fab fa-line"></i></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn8 fl_ma2"><i class="far fa-envelope"></i></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn8{ border-radius:50%; position:relative; display:inline-block; width:50px; height:50px; font-size:30px; text-decoration:none; transition:.5s; } /* ボタンマウスホバー時のテキスト指定 */ .flowbtn8:hover{ color:#fff!important; } /* アイコンをど真ん中に */ .flowbtn8 i{ position:absolute; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } /* Twitter */ .flowbtn8.fl_tw2{ border:solid 1px #55acee; color:#55acee; } /* Twitterマウスホバー時 */ .flowbtn8.fl_tw2:hover{ border:solid 1px #55acee; background:#55acee; } /* Instagram */ .flowbtn8.insta_btn2 { border:solid 1px #c6529a; color:#c6529a; font-size:35px; } /* Instagramマウスホバー時 */ .flowbtn8.insta_btn2:hover{ border:solid 1px #c6529a; background:#c6529a; } /* Facebook */ .flowbtn8.fl_fb2{ border:solid 1px #3b5998; color:#3b5998; } /* Facebookマウスホバー時 */ .flowbtn8.fl_fb2:hover{ border:solid 1px #3b5998; background:#3b5998; } /* Feedly */ .flowbtn8.fl_fd2{ border:solid 1px #6cc655; color:#6cc655; font-size:28px; } /* Feedlyマウスホバー時 */ .flowbtn8.fl_fd2:hover{ border:solid 1px #6cc655; background:#6cc655; } /* Pocket */ .flowbtn8.fl_pk2{ border:solid 1px #ef3f56; color:#ef3f56; font-size:32px; } /* Pocketマウスホバー時 */ .flowbtn8.fl_pk2:hover{ border:solid 1px #ef3f56; background:#ef3f56; } /* はてブ */ .flowbtn8.fl_hb2{ border:solid 1px #1ba5dc; color:#1ba5dc; font-size:25px; } /* はてブマウスホバー時 */ .flowbtn8.fl_hb2:hover{ border:solid 1px #1ba5dc; background:#1ba5dc; } /* YouTube */ .flowbtn8.fl_yu2{ border:solid 1px #fc0d1c; color:#fc0d1c; font-size:28px; } /* YouTubeマウスホバー時 */ .flowbtn8.fl_yu2:hover{ border:solid 1px #fc0d1c; background:#fc0d1c; } /* LINE */ .flowbtn8.fl_li2{ border:solid 1px #00c300; color:#00c300; font-size:35px; } /* LINEマウスホバー時 */ .flowbtn8.fl_li2:hover{ border:solid 1px #00c300; background:#00c300; } /* お問い合わせ */ .flowbtn8.fl_ma2{ border:solid 1px #f3981d; color:#f3981d; font-size:28px; } /* お問い合わせマウスホバー時 */ .flowbtn8.fl_ma2:hover{ border:solid 1px #f3981d; background:#f3981d; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* ボタン全体の位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-around; } /* ボタン同士の余白 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
9.アイコンフォントのみで作るSNSボタン
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn9"><i class="fab fa-twitter-square"></i></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn9"><i class="fab fa-instagram "></i></a></li> <li><a href="FacebookページのURL" class="flowbtn9"><i class="fab fa-facebook-square"></i></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn9"><i class="fas fa-rss-square"></i></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn9"><i class="fab fa-get-pocket"></i></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn9"><i class="fab fa-bootstrap"></i></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn9"><i class="fab fa-youtube-square"></i></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn9"><i class="fab fa-line"></i></a></li> <li><a href="お問い合わせページのURL" class="flowbtn9"><i class="fas fa-envelope-square"></i></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn9{ display:inline-block; font-size:40px; text-decoration:none; transition:.5s; } /* Twitter */ .flowbtn9 .fa-twitter-square{ color:#55acee; } /* Instagram */ .flowbtn9 .fa-instagram{ color:#c6529a; } /* Facebook*/ .flowbtn9 .fa-facebook-square{ color:#3b5998; } /* Feedly */ .flowbtn9 .fa-rss-square{ color:#6cc655; } /* Pocket */ .flowbtn9 .fa-get-pocket{ color:#ef3f56; } /* はてブ */ .flowbtn9 .fa-bootstrap{ color:#1ba5dc; } /* YouTube */ .flowbtn9 .fa-youtube-square{ color:#fc0d1c; } /* LINE@ */ .flowbtn9 .fa-line{ color:#00c300; } /* お問い合わせメール */ .flowbtn9 .fa-envelope-square{ color:#f3981d; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* アイコン全体の位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-between; } /* アイコン同士の余白 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; } /* アイコンにマウスを乗せた時 */ .flowbtn9:hover{ -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
CSSが上手くいかないときは「よくある質問コーナーへGO」
10.アイコンフォントのみモノクロ風SNSボタン
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn10"><i class="fab fa-twitter"></i></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn10"><i class="fab fa-instagram"></i></a></li> <li><a href="FacebookページのURL" class="flowbtn10"><i class="fab fa-facebook-f"></i></a> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn10"><i class="fas fa-rss"></i></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn10"><i class="fab fa-get-pocket"></i></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn10"><i class="fas fa-bold"></i></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn10"><i class="fab fa-youtube"></i></a> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn10"><i class="fab fa-line"></i></a> <li><a href="お問い合わせ先のURL" class="flowbtn10"><i class="far fa-envelope"></i></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn10{ display:inline-block; font-size:35px; text-decoration:none; transition:.5s; color:#444; } /* インスタ・pocket・ラインだけ少し大きく */ .flowbtn10 .fa-instagram,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-line{ font-size:38px; } /* Twitterマウスホバー時 */ .flowbtn10 .fa-twitter:hover{ color:#55acee; } /* Instagramマウスホバー時 */ .flowbtn10 .fa-instagram:hover{ color:#c6529a; } /* Facebookマウスホバー時 */ .flowbtn10 .fa-facebook-f:hover{ color:#3b5998; } /* Feedlyマウスホバー時 */ .flowbtn10 .fa-rss:hover{ color:#6cc655; } /* Pocketマウスホバー時 */ .flowbtn10 .fa-get-pocket:hover{ color:#ef3f56; } /* はてブマウスホバー時 */ .flowbtn10 .fa-bold:hover{ color:#1ba5dc; } /* YouTubeマウスホバー時 */ .flowbtn10 .fa-youtube:hover{ color:#fc0d1c; } /* LINEマウスホバー時 */ .flowbtn10 .fa-line:hover{ color:#00c300; } /* メールアイコンマウスホバー時 */ .flowbtn10 .fa-envelope:hover{ color:#f3981d; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* アイコン全体の位置 */ .snsbtniti{ display:flex; flex-flow:row wrap; justify-content:space-between; } /* アイコン同士の余白 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
11.横長ベタ塗りのSNSボタン
バランスが悪かったので「プロフィールボタン」も追加しました。
マウスを乗せると文字がクルクル回転します。
HTMLcopyする<ul class="snsbtniti2"> <li><a href="TwitterのプロフィールURL" class="flowbtn11 fl_tw1" ><i class="fab fa-twitter"></i><span>Twitter</span></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn11 insta_btn11"><i class="fab fa-instagram"></i><span>Instagram</span></a></li> <li><a href="FacebookページのURL" class="flowbtn11 fl_fb1"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn11 fl_fd1"><i class="fas fa-rss"></i><span>Feedly</span></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn11 fl_pk1"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn11 fl_hb1"><i class="fas fa-bold">!</i><span>Hatena</span></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn11 fl_yu1"><i class="fab fa-youtube"></i><span>YouTube</span></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn11 fl_li1"><i class="fab fa-line"></i><span>LINE@</span></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn11 fl_ma1"><i class="far fa-envelope"></i><span>Email</span></a></li> <li><a href="プロフィール先のURL" class="flowbtn11 fl_pf11"><i class="fas fa-user-edit"></i><span>Profile</span></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn11{ font-family:'Verdana',sans-serif; border-radius:4px; position:relative; display:inline-block; width:90%; font-size:20px; color:#fff!important; text-decoration:none; margin-bottom:5px; } /* Twitter */ .fl_tw1{ background:#55acee; } /* Instagramアイコン位置 */ .insta_btn11 .fa-instagram{ position:relative; z-index:1; } /* Instagram紫グラデ背景色 */ .insta_btn11{ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow:hidden; } /* Instagramオレンジグラデ背景色 */ .insta_btn11:before{ content: ''; position:absolute; top:17px; left:-75px; width:100%; height:100%; background:-webkit-radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 80%); background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 80%); } /* Facebook */ .fl_fb1{ background:#3b5998; } /* Feedly */ .fl_fd1{ background:#6cc655; } /* Pocket */ .fl_pk1{ background:#ef3f56; } /* はてブ */ .fl_hb1{ background:#1ba5dc; } /* YouTube */ .fl_yu1{ background:#fc0d1c; } /* LINE */ .fl_li1{ background:#00c300; } /* お問い合わせメール */ .fl_ma1{ background:#f3981d; } /* プロフィール */ .fl_pf11{ background:#555; } /* アイコンボタンホバー時 */ .flowbtn11:hover span{ -webkit-transform: rotateX(360deg); -ms-transform: rotateX(360deg); transform: rotateX(360deg); text-decoration:none; } /* ボタン内テキスト調整 */ .flowbtn11 span{ font-size:14px; position:relative; left:8px; bottom:2px; transition:.6s; display:inline-block; } /* ulタグの内側余白を0にする */ ul.snsbtniti2{ padding:0!important; } /* アイコンボタンの位置調整 */ .snsbtniti2{ display:flex; flex-flow:row wrap; } /* アイコンボタン同士の余白調整 */ .snsbtniti2 li{ flex:0 0 48%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
12.横長の枠線SNSボタン
HTMLcopyする<ul class="snsbtniti2"> <li><a href="TwitterのプロフィールURL" class="flowbtn12 fl_tw2" ><i class="fab fa-twitter"></i><span>Twitter</span></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn12 insta_btn2"><i class="fab fa-instagram"></i><span>Instagram</span></a></li> <li><a href="FacebookページのURL" class="flowbtn12 fl_fb2"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn12 fl_fd2"><i class="fas fa-rss"></i><span>Feedly</span></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn12 fl_pk2"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn12 fl_hb2"><i class="fas fa-bold">!</i><span>Hatena</span></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn12 fl_yu2"><i class="fab fa-youtube"></i><span>YouTube</span></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn12 fl_li2"><i class="fab fa-line"></i><span>LINE@</span></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn12 fl_ma2"><i class="far fa-envelope"></i><span>Email</span></a></li> <li><a href="プロフィール先のURL" class="flowbtn12 fl_pf12"><i class="fas fa-user-edit"></i><span>Profile</span></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn12{ font-family:'Verdana',sans-serif; border-radius: 4px; display:inline-block; width:90%; font-size:20px; transition:.4s; text-decoration:none; } /* ボタン内テキストマウスホバー時 */ .flowbtn12:hover{ color:#fff!important; text-decoration:none; } /* Twitter */ .flowbtn12.fl_tw2{ border:solid 1px #55acee; color:#55acee; } /* Twitterマウスホバー時 */ .flowbtn12.fl_tw2:hover{ border:solid 1px #55acee; background:#55acee; } /* Instagram */ .flowbtn12.insta_btn2{ border:solid 1px #c6529a; color:#c6529a; } /* Instagramマウスホバー時 */ .flowbtn12.insta_btn2:hover{ border:solid 1px #c6529a; background:#c6529a; } /* Facebook */ .flowbtn12.fl_fb2{ border:solid 1px #3b5998; color:#3b5998; } /* Facebookマウスホバー時 */ .flowbtn12.fl_fb2:hover{ border:solid 1px #3b5998; background:#3b5998; } /* Feedly */ .flowbtn12.fl_fd2{ border:solid 1px #6cc655; color:#6cc655; } /* Feedlyマウスホバー時 */ .flowbtn12.fl_fd2:hover{ border:solid 1px #6cc655; background:#6cc655; } /* Pocket */ .flowbtn12.fl_pk2{ border:solid 1px #ef3f56; color:#ef3f56; } /* Pocketマウスホバー時 */ .flowbtn12.fl_pk2:hover{ border:solid 1px #ef3f56; background:#ef3f56; } /* はてブ */ .flowbtn12.fl_hb2{ border:solid 1px #1ba5dc; color:#1ba5dc; } /* はてブマウスホバー時 */ .flowbtn12.fl_hb2:hover{ border:solid 1px #1ba5dc; background:#1ba5dc; } /* YouTube */ .flowbtn12.fl_yu2{ border:solid 1px #fc0d1c; color:#fc0d1c; } /* YouTubeマウスホバー時 */ .flowbtn12.fl_yu2:hover{ border:solid 1px #fc0d1c; background:#fc0d1c; } /* LINE */ .flowbtn12.fl_li2{ border:solid 1px #00c300; color:#00c300; } /* LINEマウスホバー時 */ .flowbtn12.fl_li2:hover{ border:solid 1px #00c300; background:#00c300; } /* メールアイコン */ .flowbtn12.fl_ma2{ border:solid 1px #f3981d; color:#f3981d; } /* メールアイコンマウスホバー時 */ .flowbtn12.fl_ma2:hover{ border:solid 1px #f3981d; background:#f3981d; } /* プロフィールアイコン */ .flowbtn12.fl_pf12{ border:solid 1px #555; color:#555; } /* プロフィールアイコンマウスホバー時 */ .flowbtn12.fl_pf12:hover{ border:solid 1px #555; background:#555; } /* ボタン内テキスト調整 */ .flowbtn12 span{ font-size:14px; position:relative; left:8px; bottom:2px; } /* ulタグの内側余白を0にする */ ul.snsbtniti2{ padding:0!important; } /* ボタン全体の位置 */ .snsbtniti2{ display:flex; flex-flow:row wrap; } /* ボタン同士の余白 */ .snsbtniti2 li{ flex:0 0 48%; text-align:center !important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
13.アイコン・テキスト・点線を組み合わせたSNSボタン
ここまでくると趣味の域ですね……。
マウスを乗せると文字がビヨーンって伸びます。
HTMLcopyする<ul class="snsbtniti2"> <li><a class="flowbtn13 fl_tw13"><i class="fab fa-twitter-square"></i><span>Twitter</span></a></li> <li><a class="flowbtn13 insta_btn13"><i class="fab fa-instagram"></i><span>Instagram</span></a></li> <li><a class="flowbtn13 fl_fb13"><i class="fab fa-facebook-square"></i><span>Facebook</span></a></li> <li><a class="flowbtn13 fl_fd13"><i class="fas fa-rss-square"></i><span>Feedly</span></a></li> <li><a class="flowbtn13 fl_pk13"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li> <li><a class="flowbtn13 fl_hb13"><i class="fab fa-bootstrap"></i><span>Hatena</span></a></li> <li><a class="flowbtn13 fl_yu13"><i class="fab fa-youtube-square"></i><span>YouTube</span></a></li> <li><a class="flowbtn13 fl_li13"><i class="fab fa-line"></i><span>LINE@</span></a></li> <li><a class="flowbtn13 fl_ma13"><i class="fas fa-envelope-square"></i><span>Contact</span></a></li> <li><a class="flowbtn13 fl_pf13"><i class="fas fa-user-edit"></i><span>Profile</span></a></li> </ul>
点線を消したい場合は.flowbtn13
からborder-bottom:dotted 1px #bbb;
を削除してください。
style.csscopyする/* アイコン周り全体 */ .flowbtn13{ font-family:'Arial', sans-serif; display:inline-block; width:90%; font-size:30px; text-align:left; border-bottom:dotted 1px #bbb; text-decoration:none; } /* マウスホバー時に下線を消す */ .flowbtn13:hover{ text-decoration:none; } /* Twitter */ .flowbtn13 .fa-twitter-square{ color:#55acee; } /* Twitterマウスホバー時 */ .fl_tw13 span:hover{ color:#55acee; } /* Instagram */ .flowbtn13 .fa-instagram{ color:#c6529a; } /* Instagramマウスホバー時 */ .insta_btn13 span:hover{ color:#c6529a; } /* Facebook */ .flowbtn13 .fa-facebook-square{ color:#3b5998; } /* Facebookマウスホバー時 */ .fl_fb13 span:hover{ color:#3b5998; } /* Feedly */ .flowbtn13 .fa-rss-square{ color:#6cc655; } /* Feedlyマウスホバー時 */ .fl_fd13 span:hover{ color:#6cc655; } /* Pocket */ .flowbtn13 .fa-get-pocket{ color:#ef3f56; } /* Pocketマウスホバー時 */ .fl_pk13 span:hover{ color:#ef3f56; } /* はてブ */ .flowbtn13 .fa-bootstrap{ color:#1ba5dc; } /* はてブマウスホバー時 */ .fl_hb13 span:hover{ color:#1ba5dc; } /* YouTube */ .flowbtn13 .fa-youtube-square{ color:#fc0d1c; } /* YouTubeマウスホバー時 */ .fl_yu13 span:hover{ color: #fc0d1c; } /* LINE */ .flowbtn13 .fa-line{ color:#00c300; } /* LINEマウスホバー時 */ .fl_li13 span:hover{ color:#00c300; } /* メールアイコン */ .flowbtn13 .fa-envelope-square{ color:#f3981d; } /* メールアイコンマウスホバー時 */ .fl_ma13 span:hover{ color:#f3981d; } /* プロフィールアイコン */ .flowbtn13 .fa-user-edit{ color:#000; } /* プロフィールアイコンマウスホバー時 */ .fl_pf13 span:hover{ color:#000; } /* テキスト調整 */ .flowbtn13 span{ font-size:16px; position:relative; left:8px; bottom:6px; color:#666; } /* テキストマウスホバー時*/ .flowbtn13 span:hover{ transition: .5s; font-weight:bold; margin-left:5px; } /* ulタグの内側余白を0にする */ ul.snsbtniti2{ padding:0!important; } /* 全体の位置 */ .snsbtniti2{ display:flex; flex-flow:row wrap; } /* 要素同士の余白 */ .snsbtniti2 li{ flex:0 0 48%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
14.付箋風SNSフォローボタン
13ではキリが悪かったので、無理やり作ったボタンです。
HTMLcopyする<ul class="snsbtniti2"> <li><a class="flowbtn14 fl_tw14"><i class="fab fa-twitter-square"></i><span>Twitter</span></a></li> <li><a class="flowbtn14 insta_btn14"><i class="fab fa-instagram"></i><span>Instagram</span></a></li> <li><a class="flowbtn14 fl_fb14"><i class="fab fa-facebook-square"></i><span>Facebook</span></a></li> <li><a class="flowbtn14 fl_fd14"><i class="fas fa-rss-square"></i><span>Feedly</span></a></li> <li><a class="flowbtn14 fl_pk14"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li> <li><a class="flowbtn14 fl_hb14"><i class="fab fa-bootstrap"></i><span>Hatena</span></a></li> <li><a class="flowbtn14 fl_yu14"><i class="fab fa-youtube-square"></i><span>YouTube</span></a></li> <li><a class="flowbtn14 fl_li14"><i class="fab fa-line"></i><span>LINE@</span></a></li> <li><a class="flowbtn14 fl_ma14"><i class="fas fa-envelope-square"></i><span>Contact</span></a></li> <li><a class="flowbtn14 fl_pf14"><i class="fas fa-user-edit"></i><span>Profile</span></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn14{ font-family:'Arial', sans-serif; display:inline-block; width:90%; font-size:23px; text-align:left; background:#f3f3f3; border-radius:0 4px 4px 0; color:#666!important; text-decoration:none; margin-bottom:5px; } .flowbtn14:hover{ text-decoration:none; } /* Twitter */ .flowbtn14.fl_tw14{ border-left:solid 5px #55acee; padding-left:8px; } /* Twitterマウスホバー時 */ .fl_tw14:hover{ color:#55acee !important; } /* Instagram */ .flowbtn14.insta_btn14{ border-left:solid 5px #c6529a; padding-left:8px; } /* Instagramマウスホバー時 */ .insta_btn14:hover{ color:#c6529a!important; } /* Facebook */ .flowbtn14.fl_fb14{ border-left:solid 5px #3b5998; padding-left:8px; } /* Facebookマウスホバー時 */ .fl_fb14:hover{ color:#3b5998 !important; } /* Feedly */ .flowbtn14.fl_fd14{ border-left:solid 5px #6cc655; padding-left:8px; } /* Feedlyマウスホバー時 */ .fl_fd14:hover{ color:#6cc655 !important; } /* Pocket */ .flowbtn14.fl_pk14{ border-left:solid 5px #ef3f56; padding-left:8px; } /* Pocketマウスホバー時 */ .fl_pk14:hover{ color:#ef3f56!important; } /* はてブ */ .flowbtn14.fl_hb14{ border-left:solid 5px #1ba5dc; padding-left:8px; } /* はてブマウスホバー時 */ .fl_hb14:hover{ color: #1ba5dc !important; } /* YouTube */ .flowbtn14.fl_yu14{ border-left:solid 5px #fc0d1c; padding-left:8px; } /* YouTubeマウスホバー時 */ .fl_yu14:hover{ color: #fc0d1c!important; } /* LINE */ .flowbtn14.fl_li14{ border-left:solid 5px #00c300; padding-left:8px; } /* LINEマウスホバー時 */ .fl_li14:hover{ color:#00c300!important; } /* メールアイコン */ .flowbtn14.fl_ma14{ border-left:solid 5px #f3981d; padding-left:8px; } /* メールアイコンマウスホバー時 */ .fl_ma14:hover{ color:#f3981d!important; } /* プロフィールアイコン */ .flowbtn14.fl_pf14{ border-left:solid 5px #000; padding-left:8px; } /* プロフィールアイコンマウスホバー時 */ .fl_pf14:hover{ color:#000!important; } /* ボタン内テキスト調整 */ .flowbtn14 span{ font-size:16px; position:relative; left:8px; bottom:3px; } /* ulタグの内側余白を0にする */ ul.snsbtniti2{ padding:0!important; } /* ボタン全体の位置 */ .snsbtniti2{ display:flex; flex-flow:row wrap; } /* ボタン同士の余白 */ .snsbtniti2 li{ flex:0 0 48%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
15.横長ベタ塗りの中央寄せボタン(文字付き)
文字を中央にしたバージョン。
マウスを乗せると少し透明になります。
HTMLcopyする<ul class="snsbtniti2"> <li><a href="TwitterのプロフィールURL" class="flowbtn15 fl_tw1" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn15 insta_btn15"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn15 fl_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn15 fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn15 fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn15 fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn15 fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn15 fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn15 fl_ma1"><i class="far fa-envelope"></i><span>Contact</span></a></li> <li><a href="プロフィール先のURL" class="flowbtn15 fl_pf11"><i class="fas fa-user-edit"></i><div>Profile</div></a></li> </ul>
style.csscopyする/* アイコン周り全体 */ .flowbtn15{ font-family:'Arial',sans-serif; display:inline-block; position:relative; width:90%; height:50px; font-size:23px; border-radius:5px; color:#fff!important; text-decoration:none; } .flowbtn15 i{ position:relative; bottom:5px; } /* Twitter */ .fl_tw1{ background:#55acee; } /* Instagramアイコン位置 */ .insta_btn15 .fa-instagram{ font-size:28px; } /* Instagram紫グラデ背景色 */ .insta_btn15{ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow:hidden; } /* Instagramオレンジグラデ背景色 */ .insta_btn15:before{ content: ''; position:absolute; top:27px; left:-75px; width:100%; height:100%; background:-webkit-radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 80%); background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 80%); } /* Facebook */ .fl_fb1{ background:#3b5998; } /* Feedly */ .fl_fd1{ background:#6cc655; } /* Pocket */ .fl_pk1{ background:#ef3f56; } /* はてブ */ .fl_hb1{ background:#1ba5dc; } /* YouTube */ .fl_yu1{ background:#fc0d1c; } /* LINE */ .fl_li1{ background:#00c300; } /* お問い合わせメール */ .fl_ma1{ background:#f3981d; } /* プロフィール */ .fl_pf11{ background:#555; } /* アイコンボタンホバー時 */ .flowbtn15:hover{ text-decoration:none; opacity:.8; } /* ボタン内テキスト調整 */ .flowbtn15 div{ font-size:16px; position:relative; bottom:22px; } /* ulタグの内側余白を0にする */ ul.snsbtniti2{ padding:0!important; } /* アイコンボタンの位置調整 */ .snsbtniti2{ display:flex; flex-flow:row wrap; } /* アイコンボタン同士の余白調整 */ .snsbtniti2 li{ flex:0 0 48%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
16.文字付き四角い枠線ボタンのダークカラーバージョン
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn16 fl_tw2" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn16 insta_btn2"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn16 fl_fb2"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn16 fl_fd2"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn16 fl_pk2"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn16 fl_hb2"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn16 fl_yu2"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn16 fl_li2"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn16 fl_ma2"><i class="far fa-envelope"></i><div>Contact</div></a></li> </ul>
style.csscopyする/* アイコン周り全体 */ .flowbtn16{ font-family:'Georgia',sans-serif;/* 好きなフォントに変えてね */ border-radius:4px; display:inline-block; width:66px; height:58px; font-size:30px; transition:.5s; text-decoration:none; background-color:#444; color:#fff; } .flowbtn16:hover{ text-decoration:none; } /* Twitterマウスホバー時 */ .flowbtn16.fl_tw2:hover{ background:#55acee; } /* Instagramマウスホバー時 */ .flowbtn16.insta_btn2:hover{ background:#c6529a; } /* Facebookマウスホバー時 */ .flowbtn16.fl_fb2:hover{ background:#3b5998; } /* Feedlyマウスホバー時 */ .flowbtn16.fl_fd2:hover{ background:#6cc655; } /* Pocketマウスホバー時 */ .flowbtn16.fl_pk2:hover{ background:#ef3f56; } /* はてブマウスホバー時 */ .flowbtn16.fl_hb2:hover{ background:#1ba5dc; } /* YouTubeマウスホバー時 */ .flowbtn16.fl_yu2:hover{ background:#fc0d1c; } /* LINEマウスホバー時 */ .flowbtn16.fl_li2:hover{ background:#00c300; } /* お問い合わせマウスホバー時 */ .flowbtn16.fl_ma2:hover{ background:#f3981d; } /* ボタン内テキスト調整 */ .flowbtn16 div{ font-size:11px; letter-spacing:0; font-weight:bold; position:relative; bottom:20px; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; } /* アイコンボタンの位置調整 */ .snsbtniti{ display:flex; flex-flow:row wrap; } /* アイコンボタン同士の余白調整 */ .snsbtniti li{ flex:0 0 33%; text-align:center!important; }
CSSが上手くいかないときは「よくある質問コーナーへGO」
17.丸いボタンのダークカラーバージョン
ブラック系だと丸くてもスタイリッシュになります。
マウスを乗せるとカラーが変わるよ。
HTMLcopyする<ul class="snsbtniti"> <li><a href="TwitterのプロフィールURL" class="flowbtn17 fl_tw2" ><i class="fab fa-twitter"></i></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn17 insta_btn2"><i class="fab fa-instagram"></i></a></li> <li><a href="FacebookページのURL" class="flowbtn17 fl_fb2"><i class="fab fa-facebook-f"></i></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn17 fl_fd2"><i class="fas fa-rss"></i></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn17 fl_pk2"><i class="fab fa-get-pocket"></i></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn17 fl_hb2"><i class="fas fa-bold"></i></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn17 fl_yu2"><i class="fab fa-youtube"></i></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn17 fl_li2"><i class="fab fa-line"></i></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn17 fl_ma2"><i class="far fa-envelope"></i></a></li> </ul>
style.csscopyする/* ボタン全体 */ .flowbtn17{ border-radius:50%; position:relative; display:inline-block; width:50px; height:50px; font-size:30px; text-decoration:none; transition:.5s; background-color:#444; color:#fff; } /* ボタンマウスホバー時のテキスト指定 */ .flowbtn17:hover{ text-decoration:none; } /* アイコンをど真ん中に */ .flowbtn17 i{ position:absolute; top:50%; left:50%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } /* Twitterマウスホバー時 */ .flowbtn17.fl_tw2:hover{ background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%); } /* Instagramマウスホバー時 */ .flowbtn17.insta_btn2:hover{ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; } /* Facebookマウスホバー時 */ .flowbtn17.fl_fb2:hover{ background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%); background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%); } /* Feedlyマウスホバー時 */ .flowbtn17.fl_fd2:hover{ background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%); font-size:28px; } /* Pocketマウスホバー時 */ .flowbtn17.fl_pk2:hover{ background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%); } /* はてブアイコンのサイズ */ .flowbtn17.fl_hb2{ font-size:25px; } /* はてブマウスホバー時 */ .flowbtn17.fl_hb2:hover{ background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%); background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%); } /* YouTubeマウスホバー時 */ .flowbtn17.fl_yu2:hover{ background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%); } /* LINEマウスホバー時 */ .flowbtn17.fl_li2:hover{ background: linear-gradient(135deg, #3a9278 0%,#00c300 100%); } /* お問い合わせマウスホバー時 */ .flowbtn17.fl_ma2:hover{ background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%); } /* ulタグの内側余白を0にする */ ul.snsbtniti2{ padding:0!important; } /* ボタン全体の位置 */ .snsbtniti2{ display:flex; flex-flow:row wrap; } /* ボタン同士の余白 */ .snsbtniti2 li{ flex:0 0 48%; text-align:center !important; }
18.横長ボタンダークバージョン
サイトを選びますが、シックなサイトにはぜひ。
マウスを乗せるとカラーが変わります。
HTMLcopyする<ul class="snsbtniti2"> <li><a href="TwitterのプロフィールURL" class="flowbtn18 fl_tw2" ><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="インスタのプロフィールURL" class="flowbtn18 insta_btn2"><i class="fab fa-instagram"></i><div>Instagram</div></a></li> <li><a href="FacebookページのURL" class="flowbtn18 fl_fb2"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li> <li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn18 fl_fd2"><i class="fas fa-rss"></i><div>Feedly</div></a></li> <li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn18 fl_pk2"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li> <li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn18 fl_hb2"><i class="fas fa-bold"></i><div>Hatena</div></a></li> <li><a href="youtubeのプロフィールURL" class="flowbtn18 fl_yu2"><i class="fab fa-youtube"></i><div>YouTube</div></a></li> <li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn18 fl_li2"><i class="fab fa-line"></i><div>LINE@</div></a></li> <li><a href="お問い合わせ先のURL" class="flowbtn18 fl_ma2"><i class="far fa-envelope"></i><span>Contact</span></a></li> <li><a href="プロフィール先のURL" class="flowbtn18 fl_pf2"><i class="fas fa-user-edit"></i><div>Profile</div></a></li> </ul>
style.csscopyする.flowbtn18{ font-family:'Georgia',sans-serif; display:inline-block; position:relative; width:90%; height:50px; font-size:23px; border-radius:5px; background-color:#444; color:#fff!important; text-decoration:none; } .flowbtn18 i{ position:relative; bottom:5px; } .flowbtn18:hover{ text-decoration:none; } .flowbtn18 div{ font-size:15px; position:relative; bottom:22px; } /* Twitterマウスホバー時 */ .flowbtn18.fl_tw2:hover{ background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%); } /* Instagramマウスホバー時 */ .flowbtn18.insta_btn2:hover{ background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; } /* Facebookマウスホバー時 */ .flowbtn18.fl_fb2:hover{ background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%); background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%); } /* Feedlyマウスホバー時 */ .flowbtn18.fl_fd2:hover{ background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%); font-size:28px; } /* Pocketマウスホバー時 */ .flowbtn18.fl_pk2:hover{ background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%); } .flowbtn18.fl_hb2{ font-size:25px; } /* はてブマウスホバー時 */ .flowbtn18.fl_hb2:hover{ background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%); background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%); } /* YouTubeマウスホバー時 */ .flowbtn18.fl_yu2:hover{ background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%); } /* LINEマウスホバー時 */ .flowbtn18.fl_li2:hover{ background: linear-gradient(135deg, #3a9278 0%,#00c300 100%); } /* お問い合わせマウスホバー時 */ .flowbtn18.fl_ma2:hover{ background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%); } /* プロフィールマウスホバー時 */ .flowbtn18.fl_pf2:hover{ background:linear-gradient(135deg, #fad961 0%,#f8a33f 100%); } /* ulタグの内側余白を0にする */ ul.snsbtniti2{ padding:0!important; } /* アイコンボタンの位置調整 */ .snsbtniti2{ display:flex; flex-flow:row wrap; } /* アイコンボタン同士の余白調整 */ .snsbtniti2 li{ flex:0 0 48%; text-align:center!important; }
SNSフォローボタンのカスタマイズでよくある質問
SNSボタン同士の余白を調整したい

初めまして!こちらのページ『https://kagesai.net/sns-follow-button-design/#SNSCSS10』を参考に、デザイン7のフォローボタンを設置させていただきました。とても分かりやすく詳しい説明で、非常に役立ちました。ありがとうございます!1つ質問なのですが、ボタン3つのみ利用時に、ボタン同士の余白を少なくし、まとめて中央に寄せることは可能でしょうか?もし可能でしたら、ご回答いただければ大変ありがたく思います。参考に私のサイトURLを貼り付けます→https://◯◯◯◯.com/よろしくお願い致します。
なるほど、サイドバーに小さめのボタンを3つだけ貼り付ける場合、確かに余白がありすぎてブサイクでしたね。

Before

After
以下に赤字コードを追記してください
style.csscopyするul.snsbtniti{ padding:0!important; width:200px; margin:0 auto; }
width:200px;
を変更することで、ボタン同士の余白を調整できます。
フォローボタンの並び数を変えたい
一番下のflex:0 0 33%;
の33%
部分を変更すると、並べる個数を変えられます。
例えば
4つ並びにしたければ、24%
へ変更
5つ並びにしたければ、19%
へ変更
スマホ表示も意識するなら、「3〜5つ並び」にすると綺麗に収まります。

liタグの黒ポチが消えません。
以下に赤字コードを追記してください
style.csscopyするul.snsbtniti{ padding:0 !important; list-style-type:none!important; }
上記で消えないときはこちらも試してください
style.csscopyするul li:before { width:0!important; }

ボタンの下に謎のボックスができて困ってます
テーマによってなのかな?「pタグ」が勝手に挿入されちゃう場合があるみたいですね。
以下のコードを追記してみてください
style.csscopyする.snsbtniti p { display: none; }
フォローボタンのURLってどこにあるの?

LINEログイン画面

LINEタイトル

LINE@アカウント
「LINEタイトル」をクリック
↓
「@より後ろのアカウント名」をコピペする
Feedly・Hatena・Pocket
この3つはそれぞれ「自分のサイトドメイン名」なので、当サイトで言えばkagesai.net
になります。
Contact・Profile
自分の問い合わせフォームまたはプロフィールページのURLを貼り付けてください。
SNSフォローボタン【まとめ】
自作フォローボタンだと愛着が湧きますよね。ぜひいろいろカスタムしていただければ〜。
お世話になっております。
素人すぎて申し訳ありません。
こちらはWP以外にも使用できますか?
例えば、ネットショップ作成サイト(baseやカラーミーなど)でも使用できるのでしょうか。
SP様
どちらも使ったことはありませんが、CSSが使えるのでしたら、おそらく大丈夫なはずです。
よろしくお願いいたします。
質問失礼致します。こちらのサイトを拝見して”9″のコードを使用させていただいているのですが、もし可能であれば同じ種類でPodcastのアイコンのコードもお作りいただけないでしょうか。何とよろしくお願いいたします。
かんたんに設置できて素晴らしいです。
初心者スミマセンうまく再現できないため教えて下さい。
枠やバックカラー&マウスオーバーなど表示されますがアイコンが
表示されません。事前にダウンロードなど必要な手順があるのでしょうか
インスタグラムのアイコンを入れたのですが、指定したURLには飛ぶのですが、サイトのアイコンの中にインスタグラムの白いカメラの画像がなくて、困っています。
カゲオさんの様に記事下のSNSの上にSHAREの文字を入れる方法を知りたいです。
サイドバーに追加したのですが、黒点が消えません。CSSのコードを2種類とも打っ他のですが消えませんでした。どうすれば良いですか?
初めまして。
質問させて頂きます。
“12.横長の枠線SNSボタン”の、コードのところです。
なぜか、YouTubeの枠線だけが表示されません・・・(ーー;)
いろいろ試してはいるのですが、解決しそうにないので質問させて頂きました。
よろしくお願いします!
すみません。以下のようにstyle.cssの最後に入れてみましたが変わりませんでした。
素人すぎて申し訳ありません。よろしくお願いいたします。
/* アイコンにマウスを乗せた時 */
.flowbtn9:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
ul.snsbtniti {
position: relative;
bottom: 20px;
}
ラッコ様
サイトを見るとコードが適用されていないので、もう一度確認してみてください。
もしわからないのであれば、気になるほど余白は空いていないので、そのままでも問題ないと思いますよ。
よろしくお願いします。
お手数おかけしました。ありがとうございました。
で大丈夫ですか?
IS様
サイト確認致しました。
1.Font Awesomeを読み込みこんでください。
2.CSSもコピペしてください。
よろしくお願いします。
解決できました!
とても助かりました…(´;ω;`)
ありがとうございました。
こんにちは。大変参考になりました。ありがとうございます。2点質問させて頂いてもよろしいでしょうか。
何種類か試させていただいたのですが、フェイスブックのマークのみエラーになってしまいますのでそちらの修正方法を教えて頂けますと幸いです。
また、名前とSNSアイコンの列間を詰めたいのですが、そちらの方法も教えて頂けますか?お手数おかけして申し訳ありませんが、よろしくお願いいたします。URLは以下になります。
ラッコ様
サイト拝見しました。
1つめ、Facebookアイコンについては以下の「b」を取り除けばOKです。
「fab fa-facebook-square」→「fa fa-facebook-square」
2つめ、名前とSNSの列間を詰めるとは、名前側にSNSアイコンを近づけたい認識で合ってますかね?
であれば以下のコードを追記して「20px」部分で調整してください。
よろしくお願いします。
ありがとうございます。Facebookのボタンの問題は解決いたしました。
名前側にSNSアイコンを近づけるのができませんでした。そちらのコードを入力したらそのまま本文に入力されてしまいました…。入力する場所が間違っているのでしょうか…。
ラッコ様
いえ本文ではなく、style.cssに追加してください。
よろしくお願いします。
はじめまして。今回このページを参考に自分のブログにTwitterのフォローボタンを設置しようとしたのですが、
何回やってもcssがうまく反映されません。原因を教えていただけますか?
サイドバーのSNSフォローはこちらというところです。よろしくお願いします。
なた様
サイトを確認したところ、以下のように反映されていますが「Twitter」テキスト部分の位置調整をしたいということでしょうか?

であれば以下の「22px」部分を調整してください。
おそらく10pxくらいにすれば、いい感じになると思います。
よろしくお願いします。
ありがとうございます!!
ずっと鳩マークと文字だけで、四角の枠が反映されなかったんです。
反映されるまで時間がかかったみたいで、1日経ったら変わってました。
わざわざ、確認してもらって申し訳ありませんでした。
なんと!さらにアドバイスまで!ありがとうございます~。ペコペコ。
早速、変えてみました!!
これからも、参考にさせてもらいます!
SNSのアイコンが表示されず、代わりに小さい四角のようなものが表示されてしまいます。
原因はわかりますでしょうか?
IS様
該当ページのURLを送っていただけますか?
よろしくお願いします。
各自SNSアイコンのみが表示されないのですが何が原因かわかりますか?
枠、文字は表示されます。
R様
該当ページのURLを送っていただけますか?
よろしくお願いします。
とても助かります
感謝です
ありがとうございました
これだけネットに情報があふれていると無料が当たり前なんて考えてる頭の弱い奴も湧いてきますね!
あ、上のffのことですwww
SNSフォローボタン大変参考になりました!
本当にありがとうございます^^
りゅう様
暖かいコメントありがとうございます。
参考になった様で何よりです。
今後とも精進していこうと思っていますので、「カゲサイ」をよろしくお願いします。
htmlとcssでクラス名ずれてるやつあるよ、確認してから書けよ
ff様
ご指摘ありがとうございます。
確認したところ「グラデーションボタン」のclassのズレを発見したので、修正致しました。
現状そこくらいかと思いますが、また何かあればコメントいただけますと幸いです。
また、もしお手間でなければ「間違っている箇所」をご指摘頂けますと非常に助かります。
ご不便をおかけして申し訳ありません。
今後とも「カゲサイ」をよろしくお願いします。