オシャレな丸いSNSフォローボタンを設置する【WordPressカスタマイズ】


ごきげんよう、バビです。

私の運営するもう一つのブログ「おしゃエナ」は、ファッション・美容系のサイトです。

ファッション系サイトでは、SNSフォローボタンが白黒のカッコいいやつなことが多いので、私もそれにならってオシャレな丸いSNSボタンを設置してみました。

せっかくなのでカスタマイズ方法を書いておきます。

こちらもおすすめ

完成イメージ

イメージはWordPressテーマ「JIN」のようなボタンです。

JINのフォローボタン

これ、カッコいいですよね。

完成したフォローボタンのイメージがこちらです。

通常時

オシャレなSNS丸ボタン通常時

マウスホバー時

オシャレなSNS丸ボタンマウスホバー時

実際のボタンを確認したい方は「おしゃエナ」で確認してください。

カスタマイズコード

カスタマイズに当たっては、こちらのサイトを参考にさせていただきました。

参考 9種類のSNSフォローボタンCSSデザイン【14選】と各URL解説カゲサイ

私はFacebookをやってないので入れていませんが、カスタマイズコードにはFacebookも入れておきます。

必要なければ削除して使用してください。

CSS

まずはCSSコードです。

外観→テーマの編集→(子テーマの)「style.css」に貼り付けます。

注意

このカスタマイズではFont Awesome5を使用しています。

CSS(それぞれのアイコンの色を変える場合)

/*Follow Me*/
/* ボタン全体 */
.flowbtn8:before{
	display:none;
}	
.flowbtn8{
border-radius:50%;
position:relative;
display:inline-block;
width:40px;
height:40px;
font-size:20px;
line-height:25px;
text-decoration:none;
transition:.5s;
margin:10px;
}
/* ボタンマウスホバー時 */
.flowbtn8:hover{
.flowbtn8:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* Twitterボタンの色 */
.flowbtn8.fl_tw8{
border:solid 1px #000;/* 枠線の色 */
color:#000;/* 文字の色 */
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw8:hover{
color:#fff!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000;/* 背景の色 */
}
/* Facebookボタンの色 */
.flowbtn8.fl_fb8{
border:solid 1px #000;/* 枠線の色 */
color:#000;/* 文字の色 */
}
/* Facebookマウスホバー時 */
.flowbtn8.fl_fb8:hover{
color:#fff!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000;/* 背景の色 */
}
/* Feedlyボタンの色 */
.flowbtn8.fl_fd8{
border:solid 1px #000;/* 枠線の色 */
color:#000;/* 文字の色 */
}
/* Feedlyマウスホバー時 */
.flowbtn8.fl_fd8:hover{
color:#fff!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000;/* 背景の色 */
}
/* Instagramボタンの色 */
.flowbtn8.insta_btn8 {
border:solid 1px #000;/* 枠線の色 */
color:#000;/* 文字の色 */;
}
/* Instagramマウスホバー時 */
.flowbtn8.insta_btn8:hover{
color:#fff!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000;/* 背景の色 */
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:center;
}

 

CSS(すべてのアイコンが同じ色の場合)

/*Follow Me*/
/* ボタン全体 */
.flowbtn8:before{
display:none;	
}	
.flowbtn8{
color:#424242!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#fff!important;/* 背景の色 */
border-radius:50%;
position:relative;
display:inline-block;
width:40px;
height:40px;
font-size:20px;
line-height:25px;
text-decoration:none;
transition:.5s;
margin-right:20px;
margin-bottom:10px;
}
/* 全体ボタンマウスホバー時 */
.flowbtn8:hover{
color:#fff!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000!important;/* 背景の色 */
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:center;
}

HTML

次にHTMLコードです。

★の中のURLをそれぞれのリンク先のURLに書き換えて使用してください。

外観→ウィジェット→「カスタムHTML」に貼り付けます。

HTML
<div align="center">
\Follow me/
<ul class="snsbtniti">
<li><a  href="★TwitterのURL★" class="flowbtn8 fl_tw8" target="_blank" rel="noopener"><i class="fab fa-twitter" aria-hidden="true"></i>
</a></li>
<li><a href="★FacebookのURL★" class="flowbtn8.fl_fb8" target="_blank" rel="noopener"><i class="fab fa-facebook-f" aria-hidden="true"></i>
</a></li>
<li><a href="★InstagramのURL★" class="flowbtn8 insta_btn8" target="_blank" rel="noopener"><i class="fab fa-instagram" aria-hidden="true"></i>
</a></li>
<li><a href="★feedlyのURL★" class="flowbtn8 fl_fd8" target="_blank" rel="noopener"><i class="fas fa-rss" aria-hidden="true"></i>
</a></li>
</ul>
</div>

サイドバーとかフッターなんかにおすすめです。