バビ
ごきげんよう。バビです。
私の運営するもう一つのブログ「おしゃエナ」は、ファッション・美容系のサイトです。
ファッション系サイトでは、SNSフォローボタンが白黒のカッコいいやつなことが多いので、私もそれにならってオシャレな丸いSNSボタンを設置してみました。
せっかくなのでカスタマイズ方法を書いておきます。
2020/1/29修正
縦位置がセンターにならなかったり、リストのタグを使っていてボタンの前にドットが表示されるテーマなどもあるので、HTM、CSSとも一部修正しました。
完成イメージ
イメージはWordPressテーマ「JIN」のようなボタンです。
（今はJINは四角になってますが、以前は丸だったのです。）
これ、カッコいいですよね。
完成したフォローボタンのイメージがこちらです。
通常時
マウスホバー時
実際のボタンはこのサイトのサイドバーにも設置しています。
（スマホの方はタイトル横のメニューボタンで確認できます。）
カスタマイズコード
カスタマイズに当たっては、こちらのサイトを参考にさせていただきました。
参考 9種類のSNSフォローボタンCSSデザイン【14選】と各URL解説カゲサイ私はFacebookをやってないので入れていませんが、カスタマイズコードにはFacebookも入れておきます。
必要なければ削除して使用してください。
CSS
まずはCSSコードです。
外観→テーマの編集→（子テーマの）「style.css」に貼り付けます。
注意
このカスタマイズではFont Awesome5を使用しています。
/*Follow Me*/
/* 全体 */
.followme{
padding:8px 0;
color:#fff;/* 「Follow me」の文字の色 */
background:#000;/* 全体背景の色 */
font-family: Quicksand;
}
/* ボタン全体 */
.flowbtn8:before{
display:none;
}
.flowbtn8{
border-radius:50%;
position:relative;
display:inline-block;
width:40px;
height:40px;
font-size:20px;
vertical-align:middle;
text-decoration:none;
transition:.5s;
margin:10px;
}
/* ボタンマウスホバー時 */
.flowbtn8:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* Twitterボタンの色 */
.flowbtn8.fl_tw8{
border:solid 1px #fff;/* 枠線の色 */
color:#000;/* 文字の色 */
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw8:hover{
color:#000!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000;/* 背景の色 */
}
/* Facebookボタンの色 */
.flowbtn8.fl_fb8{
border:solid 1px #fff;/* 枠線の色 */
color:#000;/* 文字の色 */
}
/* Facebookマウスホバー時 */
.flowbtn8.fl_fb8:hover{
color:#000!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000;/* 背景の色 */
}
/* Feedlyボタンの色 */
.flowbtn8.fl_fd8{
border:solid 1px #fff;/* 枠線の色 */
color:#000;/* 文字の色 */
}
/* Feedlyマウスホバー時 */
.flowbtn8.fl_fd8:hover{
color:#000!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000;/* 背景の色 */
}
/* Instagramボタンの色 */
.flowbtn8.insta_btn8 {
border:solid 1px #fff;/* 枠線の色 */
color:#000;/* 文字の色 */
}
/* Instagramマウスホバー時 */
.flowbtn8.insta_btn8:hover{
color:#000!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:#000;/* 背景の色 */
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:center;
}
.widget ul{
margin: -5pt 0 0 0;
}※とりあえず黒で作っているので、お好みで色を変えて使用してください。
白背景で、マウスオンで色つきボタンになるパターンです。
/*Follow Me*/
/* 全体 */
.followme{
padding:8px 0;
color:#fff;/* 「Follow me」の文字の色 */
background:#000;/* 全体背景の色 */
font-family: Quicksand;
}
/* ボタン全体 */
.flowbtn8:before{
display:none;
}
.flowbtn8{
color:#424242!important;/* 文字の色 */
border:solid 1px #fff;/* 枠線の色 */
background:#fff!important;/* 背景の色 */
border-radius:50%;
position:relative;
display:inline-block;
width:40px;
height:40px;
font-size:20px;
vertical-align:middle;
text-decoration:none;
transition:.5s;
margin:10px;
}
/* 全体ボタンマウスホバー時 */
.flowbtn8:hover{
color:#000!important;/* 文字の色 */
border:solid 1px #fff;/* 枠線の色 */
background:#fff!important;/* 背景の色 */
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:center;
}
.widget ul{
margin: -5pt 0 0 0;
}※必要に応じて赤字の色を変えて使用してください。
カラーボタンで、マウスオンで白いボタンになるパターンです。
/*Follow Me*/
/* 全体 */
.followme{
padding:8px 0;
color:#000;/* 「Follow me」の文字の色 */
background:#fff;/* 全体背景の色 */
font-family: Quicksand;
}
/* ボタン全体 */
.flowbtn8:before{
display:none;
}
.flowbtn8{
color:#000!important;/* 文字の色 */
border:solid 1px #000;/* 枠線の色 */
background:none;/* 背景なし */
border-radius:50%;
position:relative;
display:inline-block;
width:40px;
height:40px;
font-size:20px;
vertical-align:middle;
text-decoration:none;
transition:.5s;
margin: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;
}
.widget ul{
margin: -5pt 0 0 0;
}※必要に応じて色を変えて使用してください。
HTML
次にHTMLコードです。
★の中のURLをそれぞれのリンク先のURLに書き換えて使用してください。
外観→ウィジェット→「カスタムHTML」に貼り付けます。
<div align="center" class="followme">
＼ Follow me ／
<div class="snsbtniti">
<a href="★TwitterのURL★" class="flowbtn8 fl_tw8" rel="noopener">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
<a href="★FacebookのURL★" class="flowbtn8 fl_fb8" rel="noopener">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a href="★InstagramのURL★" class="flowbtn8 insta_btn8" rel="noopener">
<i class="fab fa-instagram" aria-hidden="true"></i>
</a>
<a href="★feedlyのURL★" class="flowbtn8 fl_fd8" rel="noopener">
<i class="fas fa-rss" aria-hidden="true"></i>
</a>
</div>
</div>
