WordPressカスタマイズまとめ←クリック

9種類のSNSフォローボタンCSSデザイン【15選】と各URL解説

SNSボタンデザイン

この記事では、コピペで使える「9種類」のSNSフォローボタンのCSSデザインを「14パターン」載せています。

各SNSの「URL記載箇所」も解説しています。

補足

コピペでうまくいかなかった方は「よくある質問」を設置したので、そちらもあわせて参照ください。

SNSフォローボタンのCSSデザイン14パターン

※クリックで画像を拡大できます

この記事で紹介しているSNSアイコンは「Font Awesome」と「IcoMoon」のものを併用しています。

Font Awesome」については、最新の「バージョン5」を使用しているので、まだ導入していない方はこちらの記事へ

ストークFont-Awesomeアップデート STORKでFont Awesome 5アップデート後に修正したところ

ただし、現状のテーマがバージョン4.7の場合、アップデートすると4.7のアイコンが崩れます。

この辺りに不安な方は、そのまま4.7を使用することをオススメします。

参考までに4.7で使用するSNSアイコンコードも載せておきます。

SNSアイコンコード
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-google-plus-official"></i>
<i class="fa fa-google-plus-square"></i>
<i class="fa fa-get-pocket"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-youtube-square"></i>
<i class="fa fa-envelope"></i>
コード置き換え例

例えば、バージョン5のTwitterアイコンコードはfab fa-twitterですが、4.7ではfa fa-twitterになるので、使ってるバージョンによって上記を参考にしてください。

FeedlyHatenaLINE」のアイコンは以下にzipファイルを用意したので、ダウンロードすればそのまま使えます。

SNSボタンサンプル画像

補足

※「LINE」アイコンについては「Font Awesome5」でも追加されたので好みの方を使ってください。<i class="fab fa-line"></i>

zipファイルをダウンロードしたら解凍してください。

zipファイル解凍

解凍すると「sns-icon」フォルダになるので、そのフォルダをFTPソフトを使って、指定の子テーマフォルダ上にアップロード(ドラッグ&ドロップ)します。

フォルダのアップロード

子テーマの詳しい使い方はこちら

WordPress子テーマ Cyberduckの使い方WordPressの子テーマを分かりやすく解説

アップロード後「header.php」(header.phpも子テーマにない場合は親テーマからアップロードする必要があります。)のhaedの下に以下のコードを貼り付けてください。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/sns-icon/style.css"> 

テーマヘッダーの編集方法

注意

※フォルダ名を変更する場合は、上記コードのsns-icon部分も変更してください。

ここまでの作業で今回紹介している「9つのアイコン」が使えるようになります。

SNSボタンCSSデザイン1【四角いベタ塗り】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ1

CSSのカスタマイズは、子テーマのスタイルシート (style.css)にコピペしましょう。

WordPressスタイルシート
手順
  1. 外観の中にある「テーマの編集」をクリック
  2. コード貼り付け
  3. ファイルを更新をクリック

子テーマの使い方はこちら

WordPress子テーマ Cyberduckの使い方WordPressの子テーマを分かりやすく解説
style.css
/* ボタン全体 */
.flowbtn{
font-family:'Arial', sans-serif;
border-radius: 4px;
position:relative;
display:inline-block;
width:66px;
height:58px;
font-size:30px;
color:#fff!important;
line-height:48px;
transition:.5s;
text-decoration:none;
box-shadow:0 1px 2px #999;
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* Google+ */
.fl_go1{
background:#ff3333;	
}
/* 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_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:23px;
}
/* ボタンマウスホバー時 */
.flowbtn:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration:none;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti3 {
padding:0!important;
}
/* ボタン全体の位置調整 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* ボタン同士の余白調整 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0 !important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問
SNSボタンデザイン4

ボタンの下に謎のボックスができて困ってます

回答

テーマによってなのかな?「pタグ」が勝手に挿入されちゃう場合があるみたいですね。

以下のコードを追記してみてください

style.css
.snsbtniti p {
display: none;
}
質問
SNSボタンデザイン2

SNS名(Twitterなど)が下にまたは上にずれて位置が合いません。

回答

以下の赤字部分2箇所を調整してみてください。

style.css
.flowbtn{
font-family:'Arial', sans-serif;
border-radius:4px;
position:relative;
display:inline-block;
width:66px;
height:58px;
font-size:30px;
color:#fff!important;
line-height:48px;
transition:.5s;
text-decoration:none;
box-shadow:0 1px 2px #999;
}
style.css
.flowbtn div {
font-size:11px;
font-weight:bold;
letter-spacing:0;
position:relative;
bottom:23px;
}

テーマごとにズレる可能性が高いので、必ず調整してください。

質問

どうしても真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

続いて、HTMLコードです。

HTML
<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="Google+のプロフィールURL"class="flowbtn fl_go1"><i class="fab fa-google-plus-g"></i><div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn  fl_fd1"><i class="icon-feedly"></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="インスタのプロフィール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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn  fl_hb1"><i class="icon-hatena"></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="icon-line"></i><div>LINE@</div></a></li>
</ul>

不要なアイコンを消す場合は、<li></li>まで消してください。

例えば、「LINE」を消す場合は<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn fl_li"><i class="icon-line"></i> <div>LINE@</div></a></li>までです。

青字箇所)がバージョン5のコードなので、4.7を使用している場合は置き換えてください。

それぞれのSNS名(緑字箇所)を変更すればボタン内の文字を変えれます。

SNSボタンカスタマイズ2

続いて、アイコンをクリックした時に指定のページに飛ばす為の「URL」や「ドメイン名」の解説をします。

各SNSのURL表示箇所

Twitter

※クリックで画像を拡大できます

TwitterプロフィールURL

TwitterプロフィールURL

Twitter」にログイン

プロフィール」をクリック

プロフィールページのURL」をコピペする

Google+

※クリックで画像を拡大できます

Google+プロフィールURL

Google+プロフィールURL

Google+」にログイン

プロフィール」をクリック

プロフィールページのURL」をコピペする

Instagram

※クリックで画像を拡大できます

InstagramプロフィールURL

InstagramプロフィールURL

Instagram」にログイン

人型のアイコン」をクリック

プロフィールページのURL」をピペする

Facebookページ

※クリックで画像を拡大できます

FacebookページURL

FacebookページURL

Facebook」にログイン

Facebookページ」をクリック

FacebookページのURL」をピペする

Youtube

※クリックで画像を拡大できます

YouTubeマイチャンネルURL

YouTubeマイチャンネルURL

Youtube」にログイン

マイチャンネル」をクリック

マイチャンネルURL」をコピペする

[email protected]

LINEログイン画面

LINEログイン画面

LINE」にログイン

メールアドレス」を入力

パスワード」を入力

ログイン」をクリック

LINEタイトル

LINEタイトル

LINE@アカウント

[email protected]アカウント

LINEタイトル」をクリック

@より後ろのアカウント名」をコピペする

Feedly・Hatena・Pocket

この3つはそれぞれ「自分のサイトドメイン名」なので、当サイトで言えばkagesai.netの部分です。

以上の作業を行えば、自作SNSボタンの準備完了です。

これ以降はCSSコードとHTMLコードのサンプルのみ載せていくので、変更箇所は上記を参考にしてください。

SNSボタンCSSデザイン2【四角い枠線】

マウスホバー時、ベタ塗りボタンに変わる。

SNSボタンカスタマイズ3
style.css
/* ボタン全体 */
.flowbtn2{
font-family:'Arial',sans-serif;
border-radius:4px;
display:inline-block;
width:66px;
height:58px;
font-size:30px;
line-height:44px;
transition:.5s;
text-decoration:none;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn2:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn2.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn2.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Google+ */
.flowbtn2.fl_go2{
border:solid 1px #ff3333;
color:#ff3333;	
}
/* Google+マウスホバー時 */
.flowbtn2.fl_go2:hover{
border:solid 1px #ff3333;
background:#ff3333;
}
/* 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:hover{
text-decoration:none;
}
/* ボタン内テキスト調整 */
.flowbtn2 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;
justify-content:space-around;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問
SNSボタンデザイン4

ボタンの下に謎のボックスができて困ってます

回答

テーマによってなのかな?「pタグ」が勝手に挿入されちゃう場合があるみたいですね。

以下のコードを追記してみてください

style.css
.snsbtniti p {
display: none;
}
質問
SNSボタンデザイン2

SNS名(Twitterなど)が下にまたは上にずれて位置が合いません。

回答

以下の赤字部分2箇所を調整してみてください。

style.css
.flowbtn2{
font-family:'Arial',sans-serif;
border-radius:4px;
display:inline-block;
width:66px;
height:58px;
font-size:30px;
line-height:44px;
transition:.5s;
text-decoration:none;
}
style.css
.flowbtn div {
font-size:11px;	
letter-spacing:0;
font-weight:bold;
position:relative;
bottom:20px;
}

テーマごとにズレるので、必ず調整してください。

質問

どうしても真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<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="Google+のプロフィールURL"class="flowbtn2 fl_go2"><i class="fab fa-google-plus-g"></i><div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn2 fl_fd2"><i class="icon-feedly"></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="インスタのプロフィール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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn2  fl_hb2"><i class="icon-hatena"></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="icon-line"></i><div>LINE@</div></a></li>
</ul>

SNSボタンCSSデザイン3【丸いベタ塗り】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ4
style.css
/* ボタン全体 */
.flowbtn3{
font-family:'Arial',sans-serif;
border-radius:50%;
position:relative;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
line-height:50px;
color:#fff!important;
text-decoration:none;
box-shadow:0 1px 2px #999;
transition:.5s;
}
/* Twitter */
.fl_tw3{
background:#55acee;
}
/* Google+ */
.fl_go3 {
background:#ff3333;	
}
/* Feedly */
.fl_fd3{
background:#6cc655;
}
/* Pocket */
.fl_pk3{
background:#ef3f56;
}
/* Facebook */
.fl_fb3{
background:#3b5998;
}
/* はてブ */
.fl_hb3{
background:#1ba5dc;
}
/* YouTube */
.fl_yu3{
background:#fc0d1c;
}
/* [email protected] */
.fl_li3{
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;
}
/* Instagramオレンジグラデ背景 */
.insta_btn3:before{
content: '';
position:absolute;
top:33px;
left:6px;
width:45px;
height:35px;
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%);
}
/* ボタン内のテキスト */
.flowbtn3 div{
font-size:11px;	
font-weight:bold;
position:relative;
bottom:25px;
}
/* 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;
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問
SNSボタンデザイン4

ボタンの下に謎のボックスができて困ってます

回答

テーマによってなのかな?「pタグ」が勝手に挿入されちゃう場合があるみたいですね。

以下のコードを追記してみてください

style.css
.snsbtniti p {
display: none;
}
質問
SNSボタンデザイン2

SNS名(Twitterなど)が下にまたは上にずれて位置が合いません。

回答

以下の赤字部分2箇所を調整してみてください。

style.css
/* ボタン全体 */
.flowbtn3{
font-family:'Arial',sans-serif;
border-radius:50%;
position:relative;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
line-height:50px;
color:#fff!important;
text-decoration:none;
box-shadow:0 1px 2px #999;
transition:.5s;
}
style.css
/* ボタン内のテキスト */
.flowbtn3 div{
font-size:11px;	
font-weight:bold;
position:relative;
bottom:25px;
}

テーマごとにズレるので、必ず調整してください。

質問

どうしても真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn3 fl_tw3"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn3 fl_go3"><i class="fab fa-google-plus-g"></i><div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn3 fl_fd3"><i class="icon-feedly"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn3 fl_pk3"><i class="fab fa-get-pocket"></i><div>Pocket</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_fb3"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn3  fl_hb3"><i class="icon-hatena"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn3 fl_yu3"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn3 fl_li3"><i class="icon-line"></i><div>LINE@</div></a></li>
</ul>

SNSボタンCSSデザイン4【丸い枠線】

マウスホバー時、ベタ塗りボタンに変わる。

SNSボタンカスタマイズ5
style.css
/* ボタン全体の装飾 */
.flowbtn4{
font-family:'Arial',sans-serif;
border-radius:50%;
display:inline-block;
width:70px;
height:70px;
line-height:48px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
/* ボタンマウスホバー時テキストカラー */
.flowbtn4:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn4.fl_tw4{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn4.fl_tw4:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Google+ */
.flowbtn4.fl_go4{
border:solid 1px #ff3333;
color:#ff3333;	
}
/* Google+マウスホバー時 */
.flowbtn4.fl_go4:hover{
border:solid 1px #ff3333;
background:#ff3333;
}
/* Facebook */
.flowbtn4.fl_fb4{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn4.fl_fb4:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* はてブ */
.flowbtn4.fl_hb4{
border:solid 1px #1ba5dc;
color:#1ba5dc;
}
/* はてブマウスホバー時 */
.flowbtn4.fl_hb4:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* Pocket */
.flowbtn4.fl_pk4{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.flowbtn4.fl_pk4:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* Feedly */
.flowbtn4.fl_fd4{
border:solid 1px #6cc655;
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.flowbtn4.fl_fd4:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* YouTube */
.flowbtn4.fl_yu4{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn4.fl_yu4:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn4.fl_li4{
border:solid 1px #00c300;
color:#00c300;
}
/* LINEマウスホバー時 */
.flowbtn4.fl_li4:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* Instagram */
.flowbtn4.insta_btn4 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn4.insta_btn4:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* ボタン内テキスト調整 */
.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;
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問
SNSボタンデザイン4

ボタンの下に謎のボックスができて困ってます

回答

テーマによってなのかな?「pタグ」が勝手に挿入されちゃう場合があるみたいですね。

以下のコードを追記してみてください

style.css
.snsbtniti p {
display:none;
}
質問
SNSボタンデザイン2

SNS名(Twitterなど)が下にまたは上にずれて位置が合いません。

回答

以下の赤字部分2箇所を調整してみてください。

style.css
/* ボタン全体の装飾 */
.flowbtn4{
font-family:'Arial',sans-serif;
border-radius:50%;
display:inline-block;
width:70px;
height:70px;
line-height:48px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
style.css
/* ボタン内テキスト調整 */
.flowbtn4 div{
font-size:11px;	
font-weight:bold;
position:relative;
bottom:22px;	
}

テーマごとにズレるので、必ず調整してください。

質問

どうしても真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn4 fl_tw4"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn4 fl_go4"><i class="fab fa-google-plus-g"></i><div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn4 fl_fd4"><i class="icon-feedly"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn4 fl_pk4"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn4 insta_btn4"><i class="fab fa-instagram"></i><div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn4 fl_fb4"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn4  fl_hb4"><i class="icon-hatena"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn4 fl_yu4"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn4 fl_li4"><i class="icon-line"></i><div>LINE@</div></a></li>
</ul>

SNSボタンCSSデザイン5【ボタン下にテキスト表示】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ6

/* ボタン全体 */margin-bottom:10px;でボタン下に余白を空けているので、設置する場所によって調整してください。

style.css
/* ボタン全体 */
.flowbtn5{
font-family:'Arial',sans-serif;	
border-radius: 13px;		
position:relative;
display:inline-block;
width:59px;
height:55px;
font-size:33px;
color:#fff!important;
transition:.5s;
text-decoration:none;
margin-bottom:10px;
}
/* アイコンをど真ん中に*/
.flowbtn5 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.fl_tw5{
background:#55acee;
}
/* Google+ */
.fl_go5{
background:#ff3333;
}
/* Facebook */
.fl_fb5{
background:#3b5998;
}
/* はてブ */
.fl_hb5{
background:#1ba5dc;
}
/* はてブアイコン位置調整 */
.fl_hb5 .icon-hatena{
position:relative;
top:2px;
font-size:32px;			
}
/* Pocket */
.fl_pk5{
background:#ef3f56;
}
/* Feedly */
.fl_fd5{
background:#6cc655;
}
/* Feedlyアイコン位置調整 */
.fl_fd5 .icon-feedly{
position:relative;
top:2px;
font-size:36px;		
}
/* YouTube */
.fl_yu5 {
background:#fc0d1c;
}
/* LINE */
.fl_li5{
background:#00c300;
}
/* LINEアイコン位置調整 */
.fl_li5 .icon-line{
position:relative;
top:5px;	
font-size:37px;		
}
/* 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:25px;
left:-1px;
width:50px;
height:31px;
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:52px;
}
/* アイコンボタンにマウスホバーした時の指定*/
.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;
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti {
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問
SNSボタンデザイン4

ボタンの下に謎のボックスができて困ってます

回答

テーマによってなのかな?「pタグ」が勝手に挿入されちゃう場合があるみたいですね。

以下のコードを追記してみてください

style.css
.snsbtniti p {
display:none;
}
質問
SNSボタンデザイン2

SNS名(Twitterなど)が下にまたは上にずれて位置が合いません。

回答

以下の赤字部分を調整してください。

style.css
.flowbtn div {
font-size:11px;
color:#666;	
position:relative;
top:52px;
}
質問

どうしても真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn5 fl_tw5"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn5 fl_go5"><i class="fab fa-google-plus-g"></i><div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn5 fl_fd5"><i class="icon-feedly"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn5 fl_pk5"><i class="fab fa-get-pocket"></i><div>Pocket</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_fb5"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn5 fl_hb5"><i class="icon-hatena"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn5 fl_yu5"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn5 fl_li5"><i class="icon-line"></i><div>LINE@</div></a></li>
</ul>

SNSボタンCSSデザイン6【アプリアイコン風】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ7

/* ボタン全体 */margin-bottom:14px;でボタン下に余白を空けているので、設置する場所によって調整してください。

style.css
/* ボタン全体 */
.flowbtn6{
border-radius:12px;
position:relative;
display:inline-block;
width:55px;
height:55px;
font-size:35px;
color:#fff!important;
text-decoration:none;
transition:.5s;
margin-bottom:14px;	
}
/* アイコンをど真ん中に*/
.flowbtn6 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.fl_tw6{
background:#55acee;
}
/* Google+ */
.fl_go6{
color:#d9453d!important;
box-shadow:0 0 2px #888;
font-size:42px;
}
/* Feedly */
.fl_fd6{
background:#33b151;
font-size:39px;			
}
/* Pocket */
.fl_pk6{
color:#ef3f56!important;	
box-shadow:0 0 2px #888;
font-size:33px;		
}
/* Facebookアイコン位置 */
.fl_fb6 .fa-facebook-f{
position:relative;
top:29px;
left:19px;
font-size:48px;
}
/* Facebookアイコン背景*/
.fl_fb6{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);	
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);	
}
/* はてブ */
.fl_hb6 {
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);	
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);		
font-size:33px;	
}
/* YouTube */
.fl_yu6 {
color:#fc0d1c!important;
box-shadow:0 0 2px #888;	
}
/* [email protected] */
.fl_li6{
background:#00c300;			
}
/* Instagramアイコン位置 */
.insta_btn6 .fa-instagram{
font-size:48px;
}
/* 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%);
}
/* 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);
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問
フェイスブックボタンデザイン

Facebookボタンがカッコよく決まりません。

回答

以下の赤字部分を調整してみてください。

style.css
/* Facebookアイコン位置 */
.fl_fb6 .fa-facebook-f{
position:relative;
top:29px;
left:19px;
font-size:48px;
}

テーマごとにズレる可能性大です。

質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn6 fl_tw6"
><i class="fab fa-twitter"></i></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn6 fl_go6"><i class="fab fa-google-plus"></i></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn6 fl_fd6"><i class="icon-feedly"></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="インスタのプロフィール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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn6 fl_hb6"><i class="icon-hatena"></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_li6"><i class="fas fa-at"></i></a></li></ul>

SNSボタンCSSデザイン7【丸ボタンのみ】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ8

/* ボタン全体 */margin-bottom:14px;でボタン下に余白を空けているので、設置する場所によって調整してください。

style.css
/* ボタン全体 */
.flowbtn7{
border-radius:50%;
position:relative;
display:inline-block;
width:56px;
height:55px;
font-size:34px;
color: #fff!important;
text-decoration:none;
transition:.5s;
margin-bottom:14px;	
box-shadow:0 0 2px #888;		
}
/* アイコンをど真ん中に*/
.flowbtn7 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.fl_tw7{
background:#55acee;
}
/* Google+ */
.fl_go7{
background:#d9453d;	
font-size:31px;			
}
/* Feedly */
.fl_fd7{
background:#6cc655;
font-size:39px;	
}
/* Pocket */
.fl_pk7{
background:#ef3f56;
font-size:30px;		
}
/* Facebookアイコン背景*/
.fl_fb7{
background:#3b5998;
}
/* はてブ */
.fl_hb7{
background:#1ba5dc;
font-size:33px;
}
/* YouTube */
.fl_yu7{
background:#fc0d1c;
font-size:33px;	
}
/* [email protected] */
.fl_li7{
background:#00c300;
font-size:38px;		
}
/* Instagramアイコン位置 */
.insta_btn7 .fa-instagram{
font-size:40px;	
}
/* 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:65px;
height:36px;
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%);
}
/* 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);
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn7 fl_tw7"
><i class="fab fa-twitter"></i></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn7 fl_go7"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn7 fl_fd7"><i class="icon-feedly"></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="インスタのプロフィール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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn7 fl_hb7"><i class="icon-hatena"></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="icon-line"></i>
</a></li></ul>

SNSボタンCSSデザイン8【丸い枠線ボタンのみ】

マウスホバー時、ベタ塗りボタンに変わる。

SNSボタンカスタマイズ9

/* ボタン全体 */margin-bottom:14px;でボタン下に余白を空けているので、設置する場所によって調整してください。

style.css
/* ボタン全体 */
.flowbtn8{
border-radius:50%;
position:relative;
display:inline-block;
width:56px;
height:55px;
font-size:32px;
text-decoration:none;
transition:.5s;
margin-bottom:14px;
}
/* ボタンマウスホバー時のテキスト指定 */
.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_tw8{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw8:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Google+ */
.flowbtn8.fl_go8{
border:solid 1px #ff3333;
color:#ff3333;
font-size:35px;
}
/* Google+マウスホバー時 */
.flowbtn8.fl_go8:hover{
border:solid 1px #ff3333;
background:#ff3333;
}
/* Facebook */
.flowbtn8.fl_fb8{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn8.fl_fb8:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* はてブ */
.flowbtn8.fl_hb8{
border:solid 1px #1ba5dc;
color:#1ba5dc;
font-size:29px;
}
/* はてブマウスホバー時 */
.flowbtn8.fl_hb8:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* Pocket */
.flowbtn8.fl_pk8{
border:solid 1px #ef3f56;
color:#ef3f56;
font-size:29px;
}
/* Pocketマウスホバー時 */
.flowbtn8.fl_pk8:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* Feedly */
.flowbtn8.fl_fd8{
border:solid 1px #6cc655;
color:#6cc655;
font-size:35px;
}
/* Feedlyマウスホバー時 */
.flowbtn8.fl_fd8:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* YouTube */
.flowbtn8.fl_yu8{
border:solid 1px #fc0d1c;
color:#fc0d1c;
font-size:31px;	
}
/* YouTubeマウスホバー時 */
.flowbtn8.fl_yu8:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn8.fl_li8{
border:solid 1px #00c300;
color:#00c300;
font-size:35px;
}
/* LINEマウスホバー時 */
.flowbtn8.fl_li8:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* Instagram */
.flowbtn8.insta_btn8 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn8.insta_btn8:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* 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;
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えれます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn8 fl_tw8"
><i class="fab fa-twitter"></i></a></li>
<li><a href="Google+のプロフィールURL" class="flowbtn8 fl_go8"><i class="fab fa-google-plus"></i></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn8 fl_fd8"><i class="icon-feedly"></i></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn8 fl_pk8"><i class="fab fa-get-pocket"></i></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn8 insta_btn8"><i class="fab fa-instagram"></i></a></li>
<li><a href="FacebookページのURL" class="flowbtn8 fl_fb8"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn8 fl_hb8"><i class="icon-hatena"></i></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn8 fl_yu8"><i class="fab fa-youtube"></i></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn8 fl_li8"><i class="icon-line"></i></a></li>
</ul>

SNSボタンCSSデザイン9【アイコンフォントのみ】

マウスホバー時、ゆっくり上に浮き上がります。

コードが短くて済みますね。アイコンサイズも小さくなるのでスマホ表示でも5〜6個並べても綺麗に収まります。

バランスが悪かったので、メールアイコンに「お問い合わせページのURL」を追加してます。

SNSボタンカスタマイズ10
style.css
/* ボタン全体 */
.flowbtn9{
display:inline-block;	
font-size:40px;
text-decoration:none;
transition:.5s;
}
/* Twitter */
.flowbtn9 .fa-twitter-square{
color:#55acee;
}
/* Google+ */
.flowbtn9 .fa-google-plus-square {
color:#d9453d;
}
/* Feedly */
.flowbtn9 .fa-rss-square{
color:#6cc655;
}
/* Pocket */
.flowbtn9 .fa-get-pocket{
color:#ef3f56;
}
/* Facebook*/
.flowbtn9 .fa-facebook-square{
color:#3b5998;
}
/* はてブ */
.flowbtn9 .icon-hatena {
color:#1ba5dc;	
line-height:69px;
}
/* YouTube */
.flowbtn9 .fa-youtube-square{
color:#fc0d1c;
}
/* [email protected] */
.flowbtn9 .fa-line{
color:#00c300;
}
/* Instagram */
.flowbtn9 .fa-instagram{
color:#c6529a;
}
/* お問い合わせメール */
.flowbtn9 .fa-envelope-square{
color:#f3981d;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* アイコン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* アイコン同士の余白 */
.snsbtniti2 li{
flex:0 0 19%;
text-align:center !important;
}
/* アイコンにマウスを乗せた時 */
.flowbtn9:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti2{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti2">
<li><a  href="TwitterのプロフィールURL" class="flowbtn9"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn9"><i class="fab fa-google-plus-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="インスタのプロフィール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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn9"><i class="icon-hatena"></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>

SNSボタンCSSデザイン10【モノクロ風アイコン】

マウスホバー時、それぞれアイコンカラーに変わります。

SNSボタンカスタマイズ11
style.css
/* ボタン全体 */
.flowbtn10{
display:inline-block;	
font-size:40px;
text-decoration:none;
transition:.5s;
color:#666;	
}
/* Twitterアイコン調整 */
.flowbtn10 .fa-twitter{
font-size:37px;
position:relative;
bottom:1px;	
}
/* Twitterマウスホバー時 */
.flowbtn10 .fa-twitter:hover{
color:#55acee;
}
/* Google+マウスホバー時 */
.flowbtn10 .fa-google-plus:hover{
color:#d9453d;
}
/* Feedlyアイコン調整 */
.flowbtn10 .icon-feedly{
font-size:44px;
position:relative;
top:3px;		
}
/* Feedlyマウスホバー時 */
.flowbtn10 .icon-feedly:hover{
color:#6cc655;
}
/* Pocketマウスホバー時 */
.flowbtn10 .fa-get-pocket:hover{
color:#ef3f56;
}
/* Facebookアイコン調整 */
.flowbtn10 .fa-facebook-f{
font-size:35px;	
position:relative;
bottom:5px;	
}
/* Facebookマウスホバー時 */
.flowbtn10 .fa-facebook-f:hover{
color:#3b5998;
}
/* はてブアイコン調整 */
.flowbtn10 .icon-hatena{
font-size:38px;
}
/* はてブマウスホバー時 */
.flowbtn10 .icon-hatena:hover{
color:#1ba5dc;	
}
/* YouTubeアイコン調整 */
.flowbtn10 .fa-youtube{
font-size:37px;
position:relative;
bottom:2px;		
}
/* YouTubeマウスホバー時 */
.flowbtn10 .fa-youtube:hover{
color:#fc0d1c;
}
/* LINEアイコン調整 */
.flowbtn6 .icon-line{
font-size:42px;
position:relative;
top:3px;	
}
/* LINEマウスホバー時 */
.flowbtn10 .icon-line:hover{
color:#00c300;
}
/* Instagramマウスホバー時 */
.flowbtn10 .fa-instagram:hover{
color:#c6529a;
}
/* メールアイコン調整 */
.flowbtn10 .fa-envelope{
font-size:37px;
position:relative;
bottom:2px;			
}
/* メールアイコンマウスホバー時 */
.flowbtn10 .fa-envelope:hover{
color:#f3981d;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* アイコン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
justify-content:space-between;	
}
/* アイコン同士の余白 */
.snsbtniti2 li{
flex:0 0 19%;
text-align:center!important;
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti2{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti2">
<li><a  href="TwitterのプロフィールURL" class="flowbtn10"><i class="fab fa-twitter"></i></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn10"><i class="fab fa-google-plus"></i></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn10"><i class="icon-feedly"></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="インスタのプロフィール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>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn10"><i class="icon-hatena"></i></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn10"><i class="fab fa-youtube"></i></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"class="flowbtn10"><i class="icon-line"></i></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn10"><i class="far fa-envelope"></i></a></li></ul>

SNSボタンCSSデザイン11【横長ベタ塗り】

マウスホバー時、テキストが360℃回転します。(こちらもお問い合わせ用のメールボタンを追加してます。

PCの記事幅で見ると、横に広すぎてブサイクですが、ボタンの幅は設置場所によって自動調整されるので、サイドバーやフッターに貼ればちょうど良いサイズになります。

SNSボタンカスタマイズ12
style.css
/* ボタン全体 */
.flowbtn11{
font-family:'Arial',sans-serif;	
border-radius:4px;
position:relative;
display:inline-block;
width:100%;
padding:5px 0;
font-size:20px;
color:#fff!important;
box-shadow:0 1px 2px #999;
text-decoration:none;
}
/* Twitter */
.fl_tw11{
background:#55acee;
}
/* Google+ */
.fl_go11{
background:#ff3333;	
}
/* Facebook */
.fl_fb11{
background:#3b5998;
}
/* はてブ */
.fl_hb11{
background:#1ba5dc;
}
/* Pocket */
.fl_pk11{
background:#ef3f56;
}
/* Feedly */
.fl_fd11{
background:#6cc655;
}
/* YouTube */
.fl_yu11{
background:#fc0d1c;
}
/* LINE */
.fl_li11{
background:#00c300;
}
/* お問い合わせメール */
.fl_ml11{
background:#f3981d;
}
/* 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%);
}
/* アイコンボタンホバー時 */
.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.snsbtniti3{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti3 li{
flex:0 0 49%;
text-align:center!important;
}
質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti3{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
HTML
<ul class="snsbtniti3">
<li><a  href="TwitterのプロフィールURL" class="flowbtn11 fl_tw11"
><i class="fab fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn11 fl_go11"><i class="fab fa-google-plus-g"></i><span>Google+</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn11 fl_fd11"><i class="icon-feedly"></i><span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn11 fl_pk11"><i class="fab fa-get-pocket"></i>
<span>Pocket</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_fb11"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn11 fl_hb11"><i class="icon-hatena"></i><span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn11 fl_yu11"><i class="fab fa-youtube"></i><span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn11 fl_li11"><i class="icon-line"></i><span>LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn11 fl_ml11"><i class="far fa-envelope"></i><span>Email</span></a></li>
</ul>

SNSボタンCSSデザイン12【横長の枠線】

マウスホバー時、ベタ塗りボタンに変わます。

SNSボタンカスタマイズ13
style.css
/* ボタン全体 */
.flowbtn12{
font-family:'Arial',sans-serif;	
border-radius: 4px;
display:inline-block;
width:100%;
padding:5px 0;
font-size:20px;
transition:.4s;	
text-decoration:none;
}
/* ボタン内テキストマウスホバー時 */
.flowbtn12:hover{
color:#fff!important;
text-decoration:none;
}
/* Twitter */
.flowbtn12.fl_tw12{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn12.fl_tw12:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Google+ */
.flowbtn12.fl_go12{
border:solid 1px #ff3333;
color:#ff3333;
}
/* Google+マウスホバー時 */
.flowbtn12.fl_go12:hover{
border:solid 1px #ff3333;
background:#ff3333;
}
/* Facebook */
.flowbtn12.fl_fb12{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn12.fl_fb12:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* はてブ */
.flowbtn12.fl_hb12{
border:solid 1px #1ba5dc;
color:#1ba5dc;
}
/* はてブマウスホバー時 */
.flowbtn12.fl_hb12:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* Pocket */
.flowbtn12.fl_pk12{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.flowbtn12.fl_pk12:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* Feedly */
.flowbtn12.fl_fd12{
border:solid 1px #6cc655;
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.flowbtn12.fl_fd12:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* YouTube */
.flowbtn12.fl_yu12{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn12.fl_yu12:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn12.fl_li12{
border:solid 1px #00c300;
color:#00c300;
}
/* LINEマウスホバー時 */
.flowbtn12.fl_li12:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* Instagram */
.flowbtn12.insta_btn12{
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn12.insta_btn12:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* メールアイコン */
.flowbtn12.fl_ml12{
border:solid 1px #f3981d;
color:#f3981d;
}
/* メールアイコンマウスホバー時 */
.flowbtn12.fl_ml12:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ボタン内テキスト調整 */
.flowbtn12 span{
font-size:14px;	
position:relative;
left:8px;
bottom:2px;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti3{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
justify-content:space-between;	
}
/* ボタン同士の余白 */
.snsbtniti3 li{
flex:0 0 48%;
text-align:center !important;
}
質問

フォローボタンの並びを変えたい

回答

一番下のflex:0 0 33%;33%部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3〜4つ並び」にすると綺麗に収まります。

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti3{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti3">
<li><a  href="TwitterのプロフィールURL" class="flowbtn12 fl_tw12"
><i class="fab fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn12 fl_go12"><i class="fab fa-google-plus-g"></i><span>Google+</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn12 fl_fd12"><i class="icon-feedly"></i><span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn12 fl_pk12"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn12 insta_btn12"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>
<li><a href="FacebookページのURL" class="flowbtn12 fl_fb12"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn12 fl_hb12"><i class="icon-hatena"></i><span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn12 fl_yu12"><i class="fab fa-youtube"></i><span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn12 fl_li12"><i class="icon-line"></i><span>LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn12 fl_ml12"><i class="far fa-envelope"></i><span>Email</span></a></li>
</ul>

SNSボタンCSSデザイン13【アイコン・テキスト・点線下線の組み合わせ】

マウスホバー時、テキストカラーが変わり、右側に伸びます。

SNSボタンカスタマイズ14

点線を消す場合は/* アイコン周り全体 */からborder-bottom:dotted 1px #bbb;を削除してください。

style.css
/* アイコン周り全体 */
.flowbtn13{
font-family:'Arial', sans-serif;	
display:inline-block;
width:100%;
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;
}
/* Google+ */
.flowbtn13 .fa-google-plus-square{
color:#ff3333;
}
/* Google+マウスホバー時 */
.fl_go13 span:hover{
color:#ff3333;	
}
/* Feedly */
.flowbtn13 .fa-rss-square{
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.fl_fd13 span:hover{
color:#6cc655;	
}
/* Facebook */
.flowbtn13 .fa-facebook-square{
color:#3b5998;
}
/* Facebookマウスホバー時 */
.fl_fb13 span:hover{
color:#3b5998;	
}
/* はてブ */
.flowbtn13 .icon-hatena{
color:#1ba5dc;
position:relative;
top:1px;	
}
/* はてブマウスホバー時 */
.fl_hb13 span:hover{
color:#1ba5dc;	
}
/* Pocket */
.flowbtn13 .fa-get-pocket{
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.fl_pk13 span:hover{
color:#ef3f56;	
}
/* LINE */
.flowbtn13 .fa-line{
color:#00c300;
}
/* LINEマウスホバー時 */
.fl_li13 span:hover{
color:#00c300;	
}
/* Instagram */
.flowbtn13 .fa-instagram{
color:#c6529a;
}
/* Instagramマウスホバー時 */
.insta_btn13 span:hover{
color:#c6529a;	
}
/* YouTube */
.flowbtn13 .fa-youtube-square{
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.fl_yu13 span:hover{
color: #fc0d1c;	
}
/* メールアイコン */
.flowbtn13 .fa-envelope-square{
color:#f3981d;
}
/* メールアイコンマウスホバー時 */
.fl_ml13 span:hover{
color:#f3981d;	
}
/* テキスト調整 */
.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.snsbtniti3{
padding:0!important;
}
/* 全体の位置 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* 要素同士の余白 */
.snsbtniti3 li{
flex:0 0 48%;
text-align:center!important;
}
質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti3{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti3">
<li><a  href="TwitterのプロフィールURL" class="flowbtn13"
><i class="fab fa-twitter-square"></i><span class="fl_tw13">Twitter</span></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn13 "><i class="fab fa-google-plus-square"></i><span class="fl_go13">Google+</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn13"><i class="fas fa-rss-square"></i><span class="fl_fd13">Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn13"><i class="fab fa-get-pocket"></i><span class="fl_pk13">Pocket</span></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn13 "><i class="fab fa-instagram"></i><span class="insta_btn13">Instagram</span></a></li>
<li><a href="FacebookページのURL" class="flowbtn13 "><i class="fab fa-facebook-square"></i>
<span class="fl_fb13">Facebook</span></a></li><li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn13"><i class="icon-hatena"></i>
<span class="fl_hb13">Hatena</span></a></li><li><a href="youtubeのプロフィールURL" class="flowbtn13 "><i class="fab fa-youtube-square"></i>
<span class="fl_yu13">YouTube</span></a></li><li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn13"><i class="fab fa-line"></i><span class-"fl_li13">LINE@</span></a></li><li><a href="お問い合わせ先のURL" class="flowbtn13"><i class="fas fa-envelope-square"></i><span class="fl_ml13">Email</span></a></li>
</ul>

SNSボタンCSSデザイン14【付箋風】

マウスホバー時、アイコンとテキストのカラーが変わります。

SNSボタンカスタマイズ15
style.css
/* ボタン全体 */
.flowbtn14{
font-family:'Arial', sans-serif;	
display:inline-block;
width:100%;
font-size:23px;
text-align:left;
background:#f3f3f3;
border-radius:0 4px 4px 0; 
color:#666!important;
padding:5px 0;
text-decoration:none;
}
.flowbtn14:hover{
text-decoration:none;
}
/* Twitter */
.flowbtn14.fl_tw14{
border-left:solid 5px #55acee;	
padding-left:8px;		
}
/* Twitterマウスホバー時 */
.fl_tw14:hover{
color:#55acee !important;
}
/* Google+ */
.flowbtn14.fl_go14{
border-left:solid 5px #ff3333;
padding-left:8px;		
}
/* Google+マウスホバー時 */
.fl_go14:hover{
color: #ff3333 !important;
}
/* Feedlyアイコン位置調整 */
.flowbtn14 .icon-feedly{
position:relative;
top:2px;	
}
/* Feedly */
.flowbtn14.fl_fd14{
border-left:solid 5px #6cc655;
padding-left:8px;			
}
/* Feedlyマウスホバー時 */
.fl_fd14:hover{
color: #6cc655 !important;
}
/* Facebook */
.flowbtn14.fl_fb14{
border-left:solid 5px #3b5998;
padding-left:8px;				
}
/* Facebookマウスホバー時 */
.fl_fb14:hover{
color:#3b5998 !important;
}
/* はてブアイコン調整 */
.flowbtn14 .icon-hatena{
position:relative;
top:2px;	
}
/* はてブ */
.flowbtn14.fl_hb14{
border-left:solid 5px #1ba5dc;
padding-left:8px;		
}
/* はてブマウスホバー時 */
.fl_hb14:hover{
color: #1ba5dc !important;	
}
/* Pocket */
.flowbtn14.fl_pk14{
border-left:solid 5px #ef3f56;
padding-left:8px;			
}
/* Pocketマウスホバー時 */
.fl_pk14:hover{
color:#ef3f56!important;	
}
/* LINEアイコン位置調整 */
.flowbtn14 .icon-line{
position:relative;
top:2px;	
}
/* LINE */
.flowbtn14.fl_li14{
border-left:solid 5px #00c300;
padding-left:8px;				
}
/* LINEマウスホバー時 */
.fl_li14:hover{
color:#00c300!important;
}
/* Instagram */
.flowbtn14.insta_btn14{
border-left:solid 5px #c6529a;
padding-left:8px;				
}
/* Instagramマウスホバー時 */
.insta_btn14:hover{
color:#c6529a!important;	
}
/* YouTube */
.flowbtn14.fl_yu14{
border-left:solid 5px #fc0d1c;
padding-left:8px;				
}
/* YouTubeマウスホバー時 */
.fl_yu14:hover{
color: #fc0d1c!important;	
}
/* メールアイコン */
.flowbtn14.fl_ml14{
border-left:solid 5px #f3981d;
padding-left:8px;				
}
/* メールアイコンマウスホバー時 */
.fl_ml14:hover{
color:#f3981d!important;	
}
/* ボタン内テキスト調整 */
.flowbtn14 span{
font-size:16px;	
position:relative;
left:8px;
bottom:3px;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti3{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* ボタン同士の余白 */
.snsbtniti3 li{
flex:0 0 48%;
text-align:center!important;
}
質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti3{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti3">
<li><a  href="TwitterのプロフィールURL" class="flowbtn14 fl_tw14"
><i class="fab fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn14 fl_go14"><i class="fab fa-google-plus"></i><span>Google+</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn14 fl_fd14"><i class="icon-feedly"></i><span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn14 fl_pk14"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn14 insta_btn14"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>
<li><a href="FacebookページのURL" class="flowbtn14 fl_fb14"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn14 fl_hb14"><i class="icon-hatena"></i><span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn14 fl_yu14"><i class="fab fa-youtube"></i><span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn14 fl_li14"><i class="icon-line"></i><span>LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn14 fl_ml14"><i class="far fa-envelope"></i><span>Email</span></a></li>
</ul>

SNSボタンCSSデザイン15【横長ベタ塗りど真ん中】

SNSボタンデザイン

マウスホバー時少し透明になる

style.css
/* アイコン周り全体 */
.flowbtn15{
font-family:'Arial', sans-serif;	
display: inline-block;
position:relative;
width:100%;
font-size:23px;
border-radius:5px;
color:#fff!important;
height:60px;
text-decoration:none;
box-shadow:0 1px 2px #999;
}
.flowbtn15:hover{
text-decoration:none;
opacity:.8;
}
/* Twitter */
.fl_tw15{
background:#55acee;
}
/* Google+ */
.fl_go15{
background:#ff3333;	
}
/* Facebook */
.fl_fb15{
background:#3b5998;
}
/* はてブ */
.fl_hb15{
background:#1ba5dc;
}
/* Pocket */
.fl_pk15{
background:#ef3f56;
}
.fl_pk15 .fa-get-pocket {
font-size: 26px;
}
/* Feedly */
.fl_fd15{
background:#6cc655;
}
/* YouTube */
.fl_yu15{
background:#fc0d1c;
}
/* LINE */
.fl_li15{
background:#00c300;
}
/* お問い合わせメール */
.fl_ml15{
background:#f3981d;
}
/* 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%);
}
/* アイコンボタンホバー時 */
.flowbtn15:hover{
text-decoration:none;
opacity:.8;
}
/* ボタン内テキスト調整 */
.flowbtn15 div{
font-size:16px;	
position:relative;
bottom: 14px;
letter-spacing: .05em;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti3{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti3 li{
flex:0 0 48%;
text-align:center!important;
}
質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti3{
padding:0!important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問

どうしてもボタンが真ん中に寄りません

回答

おそらく設置した箇所の親要素が邪魔をしていると思うので、親要素も作っちゃいましょう。以下のコードを追記してみてください。

HTML
<div class="boxwidth">
ここに下で紹介してるHTMLコード全部(<ul class="snsbtniti">~</ul>)を貼り付けてください
</div>
補足

boxwidthで見えない空間を作り、その中にフォローボタンを入れるイメージです。こちらは「style.css」じゃなく「HTML」なので注意

style.cssは以下を追記してください。

style.css
.boxwidth{
position:relative;
height:150px;
margin:200px 0;
}
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
SNSボタンデザイン3

heightで全体の高さを指定marginで上下の余白を指定します。

数値は設置する場所によって変更してください。

そしてsnsbtniti赤字部分を追記することで真ん中に寄ります。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn15 fl_tw15"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn15 fl_go15"><i class="fab fa-google-plus-g"></i><div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn15  fl_fd15"><i class="icon-feedly"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn15 fl_pk15"><i class="fab fa-get-pocket"></i><div>Pocket</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_fb15"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn15  fl_hb15"><i class="icon-hatena"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn15 fl_yu15"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn15 fl_li15"><i class="icon-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn15 fl_ml15"><i class="far fa-envelope"></i><span>Email</span></a></li>
</ul>

SNSボタンデザイン【まとめ】

気に入ったデザインはありましたか?

自作フォローボタンは愛着が湧くので、ぜひいろいろカスタムしてみてください。

HTML5 & CSS3 デザインレシピ集
Amazonで見る楽天市場で見るYahoo!で見る

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。