Amazonのクリスマスプレゼント

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


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

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

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

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

完成イメージ

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

JINのフォローボタン

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

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

通常時

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

マウスホバー時

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

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

カスタマイズコード

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

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

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

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

CSS

まずはCSSコードです。

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

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-bottom:10px;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn8:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn8.fl_tw8{
border:solid 1px #000;
color:#000;
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw8:hover{
border:solid 1px #000;
background:#000;
}
/* Facebook */
.flowbtn8.fl_fb8{
border:solid 1px #000;
color:#000;
}
/* Facebookマウスホバー時 */
.flowbtn8.fl_fb8:hover{
border:solid 1px #000;
background:#000;
}
/* Feedly */
.flowbtn8.fl_fd8{
border:solid 1px #000;
color:#000;
}
/* Feedlyマウスホバー時 */
.flowbtn8.fl_fd8:hover{
border:solid 1px #000;
background:#000;
}
/* Instagram */
.flowbtn8.insta_btn8 {
border:solid 1px #000;
color:#000;
}
/* Instagramマウスホバー時 */
.flowbtn8.insta_btn8:hover{
border:solid 1px #000;
background:#000;
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
	padding:0 20% 0 20%
}
/* ボタンにマウスを乗せた時 */
.flowbtn8:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}

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="fa fa-twitter" aria-hidden="true"></i>
</a></li>
<li><a href="★FacebookのURL★" class="flowbtn8.fl_fb8" target="_blank" rel="noopener"><i class="fa fa-facebook" aria-hidden="true"></i>
</a></li>
<li><a href="★InstagramのURL★" class="flowbtn8 insta_btn8" target="_blank" rel="noopener"><i class="fa fa-instagram" aria-hidden="true"></i>
</a></li>
<li><a href="★feedlyのURL★" class="flowbtn8 fl_fd8" target="_blank" rel="noopener"><i class="fa fa-rss" aria-hidden="true"></i>
</a></li>
</ul>
</div>

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

コメントを残す

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