【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作る

公開日:2014/9/21

アイコンフォントを使ったフォローボタンのサイト、よく見かけるようになりましたね。わたしもフェイスブックページを作ってみたのでフォロー数増えるといいなと願い、当ブログでもサイドバーに搭載してみました!

ご紹介するのは、Twitter、Facebook、Google+のソーシャル三種の神器とRSSの4つのボタンの作成方法のご紹介です。ほぼコピペだけでコードをそのまま利用できるので簡単にフォローボタンを作ることが出来ます。

スポンサーリンク

Font Awesomeを利用してフォローボタンを作成

STINGER5ではデフォルトの状態でFont AwesomeのCDNへのパスがすでに記述されています。そのアイコンフォントを利用してフォローボタンを作っていきます。

followme2

sidebar.phpへの記述

このコードはsidebar.phpへの直に書いてください。

<h4 class="menu_underh2">follow Me</h4>
<div class="follow">
<ul>
<li class="twitter"><a href="【ツイッターのURL】" target="_blank">Twitter</a></li>
<li class="facebook"><a href="【フェイスブックページのURL】" target="_blank">Facebook</a></li>
<li class="googleplus"><a href="【Google+ページのURL】" target="_blank">Google+</a></li>
<li class="rss"><a href="<?php echo home_url(); ?>/?feed=rss2" target="_blank">RSS</a></li>
</ul>
</div>
POINT

ご自身のツイッター、フェイスブック、グーグルのURLをご自身のファンページのものに書き換えてください。

もし、ウィジェットで使用したい場合にはRSSの<?php echo home_url(); ?>ところにご自身のURLを記述してください。

cssへの記載

以下をCSSに記述(【/*media Queries タブレットサイズ】というところより前の部分です。)

.follow {
margin-bottom:24px;
}
.follow ul{
position:relative;
margin:-10px 0 0 -10px;
overflow:hidden;
}
.follow ul li{
float:left;
width:46%;
margin:10px 0 0 10px;
}
.follow ul li a{
padding-top:10px;
padding-bottom:5px;
display:block;
-webkit-transition:	.2s ease-in-out;
transition:	.2s ease-in-out;
color:#fff;
font-family:'Open Sans',sans-serif;
text-align:center;
text-decoration:none;
}
.follow ul li a::before{
position:relative;
display:block;
-webkit-transition:.15s ease-in-out;
transition:.15s ease-in-out;
color:#fff;
font-size:26px;
font-family: "FontAwesome";
}
.follow ul li a:hover{
background-color:#fff;
}
.follow ul .twitter a{
background-color:#00aced;
border:2px solid #00aced;
}
.follow ul .twitter a::before{
content: "\f099";
}
.follow .twitter a:hover,.follow .twitter a:hover::before{
color:#00aced;
}
.follow .facebook a{
background-color:#3c5a98;
border:2px solid #3c5a98;
}
.follow .facebook a::before{
content:"\f09a";
}
.follow .facebook a:hover,.follow .facebook a:hover::before{
color:#3c5a98;
}
.follow ul .googleplus a{
background-color:#db4a39;
border:2px solid #db4a39;
}
.follow ul .googleplus a::before{
content:"\f0d5";
}
.follow ul .googleplus a:hover,.follow ul
.googleplus a:hover::before{
color:#db4a39;
}
.follow ul .rss a{
background-color:#ffb53c;
border:2px solid #ffb53c;
}
.follow ul .rss a::before{
content:"\f09e";
}
.follow ul .rss a:hover,.follow ul .rss a:hover::before{
color:#ffb53c;
}

マージンやパディングなどは調整してください。

ATTENTION

transitionプロパティなどがCSS3のものなのでそれ対応のサイトにのみ有効なスタイルです。もしcss3対応でないサイトなどはボタン部分のスタイルを変えてみてください。

アイコンフォントを違う物にしたいときは

Font Awesomeのサイトから選び、content:”f●●”;のfで始まる英数字を変えてください。

followme3

feedlyボタンにする場合は

Font Awesomeにはfeedlyのアイコンがありません。RSSのマークを利用し、色を変えてみるといいかも。

sidebar.php(サイトのドメインを記述してください)

<li class="feedly"><a href="https://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【サイトのドメイン】%2Ffeed%2F" target="_blank">Feedly</a></li>

CSSに以下を追加

.follow ul .feedly a{
background-color:#87c040;
border:2px solid #87c040;
}
.follow ul .feedly a::before{
content:"\f09e";
}
.follow ul .feedly a:hover,.follow ul
.feedly a:hover::before{
color:#87c040;
}

こんな感じになります

followme4

当ブログではアイコンフォントはicomoonを利用しています。icomoonはアイコンを自作することができ、また必要な分だけアイコンフォントを使うことができるのです。

以下は、icomoonに対応しているソーシャルのアイコンを配布してくださっているサイトです。

まとめ

アイコンフォントはかわいいし、なんか洗練された感じのサイトに見えるのでついつい多用してしまいますw

それではちゅんこ@shufulifeがお送りしましたー

Please Share!!

この記事のタイトルとURLをコピーする

記事タイトル【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作る
記事URLhttps://shufulife.com/followme/

お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

最新記事をお知らせします
WordPress

Recommend―関連のおすすめ記事―