オシャレな丸い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*/
/* 全体 */ .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; line-height:25px; 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;
}

※とりあえず黒で作っているので、赤字の部分の色を変えて使用してください。

白背景で、マウスオンで色つきボタンになるパターンです。

CSS(すべてのアイコンが同じ色の場合)
/*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; line-height:25px; 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;
}

※必要に応じて赤字の色を変えて使用してください。

カラーボタンで、マウスオンで白いボタンになるパターンです。

CSS(すべてのアイコンが同じ色の場合)
/*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; line-height:25px; 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」に貼り付けます。

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

コメントを残す

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