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

バビ
バビ

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

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

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

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

2020/1/29修正

縦位置がセンターにならなかったり、リストのタグを使っていてボタンの前にドットが表示されるテーマなどもあるので、HTM、CSSとも一部修正しました。

完成イメージ

イメージはWordPressテーマ「JIN」のようなボタンです。
(今は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>

コメントを残す

メールアドレスが公開されることはありません。