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

 2014/09/21

followme1

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

ご紹介するのは、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="http://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がお送りしましたー

STNGER5

Please comment!

  

4件のコメント

  • ボバ 2015年6月1日 21:14

    ちゅんこ様

    ご指摘頂いた通り直りました!
    ありがとうございましたm(__)m

    不躾ですが、今後もお勉強させて頂く為に、私のブログにリンク貼らせて頂いてよろしいでしょうか?

    差し支えなければ宜しくお願い致しますm(__)m

    • ちゅんこ 2015年6月1日 22:46

      ボバ様

      うまくいったようでよかったです(^^)
      リンクもぜひよろしくお願いします!!

  • ボバ 2015年5月31日 0:32

    stinger5でのWordPressブログ作成にあたりかなり参考にさせて頂いています。

    今回ご紹介して頂いたボタンですが、私のブログではなぜか黒丸が挿入されてしまっています。

    何か悪さするコードがあるのかもしれませんが、素人のため探しきれず苦戦しています。。

    もし原因など予想されるものがあればご教授頂けると幸いです。

    • ちゅんこ 2015年6月1日 14:06

      ボバ様

      拝見したところ、コードを設置した箇所がちがっています。

      設置個所はsidebar.phpの一番下の

      </aside>
      </div>

      より上である必要があります。

      よろしくご確認ください

Messege




7件のトラックバック