サイドバーのSNSフォローボタンをWordPressで実装!カスタマイズ手順まとめ

サイドバーのところにSNSのフォローボタンをまとめて置いている人いるじゃないですか。
ビヨーンって伸縮するボタン。
あれ、格好良いですよね。

元ネタは、はてなブログで実装されていた読者になるボタンやSNSフォローボタンのカスタムCSSです。
自分のブログにも導入しようと試してみましたが、Wordpressでは、はてなブログ特有のアイコン(フォント)を使用しているため、うまく動きません。

シュウ

でもあの格好良いボタンを使いたい!

そこでWordpress向けにカスタマイズしてみました。
最終ゴールとしてはサイドバーにこのボタンを設定できることを目標にします。

カスタマイズ

アイコンを使用できるようにする

細かい説明を書き出すと長くなるので詳細は割愛しますが、じょーじ氏のカスタマイズがWordpressで適用できないのは使っているフォントがはてなブログ用のモノだからです。
なので、Wordpressで使えるアイコンのセットを取り込む必要があります。
今回は、代表的なアイコンフォントである「FontAwesome」というフォントアイコンを使ってみましょう。

注意
テーマの中ですでに「FontAwesome」が取り込まれている場合、本対応は不要です。
本サイトでも使用しているハミングバードもテーマ内で導入済です。
使われているかわからないという方は以降の作業をやってみてうまくいかないときにやってみても良いでしょう。

まずこのコードをコピーして

header.php

< link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" >

コピーしたコードを〜中に貼り付けます。
よく分からなければの直後に貼ればOKです。
これでアイコンフォントの使用準備は完了です。

headタグがどこにあるかと言うとheader.phpの中にあります。
FTPでダウンロードして直接編集するか、
WordPress:[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php] から編集するようにしてください。

CSSの追加

style.cssに以下のコードを追加してください。

style.css

/*********フォローボタン**********/
.follow-btn{
 width: 100%;
 margin: 5px 0px 5px 0px;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
}
.follow-btn li:hover {
 width: 200%;
}
.follow-btn li span{
 line-height:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}


.Twitter_btn{
 background: #55ACEE;/*Twitterの背景色*/
}
.Facebook_btn {
 background: #5882FA;/*Facebookの背景色*/
}
.Feedly_btn {
 background: #82C36F;/*Feedlyの背景色*/
}
.Insta_btn {
 background: #5F5E5E;/*Instagramの背景色*/
}

.Youtube_btn {
 background: #F06A6A;/*YouTubeの背景色*/
}

.Twitter-icon:before{
 content: "\f099";/*Twitterアイコン*/
 color: #ffffff;
 display: inline-block;
 font-family: FontAwesome;
}
.Facebook-icon:before{
 content: "\f230";/*Facebookアイコン*/
 display: inline-block;
 font-family: FontAwesome;
}
.Feedly-icon:before{
 content: "\f09e";/*Feedlyアイコン*/
 display: inline-block;
 font-family: FontAwesome;
}

.Insta-icon:before{
 content: "\f16d";/*Instagramアイコン*/
 display: inline-block;
 font-family: FontAwesome;
}

.Youtube-icon:before{
 content: "\f167";/*YouTubeアイコン*/
 display: inline-block;
 font-family: FontAwesome;
}

.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
 color: #ffffff;
 -webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

style.cssもFTPでダウンロードして直接編集するか、
WordPress:[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[style.css] から編集してください。

ウィジェットに追加

自分用にカスタマイズ

以下のコードを自分用にカスタマイズしてください。
「 」で囲んでいる部分を変更する必要があります。

ウィジェット

<div class="follow-btn"> 

<ul>
<!--Twitterボタン-->
<li class="Twitter_btn">
<a href="https://twitter.com/intent/follow?screen_name=「自分のtwitterID」" target="_blank" style="color:#ffffff" ><span class="Twitter-icon"><br /></span>Twitter</a></li>

<!--Facebookボタン-->
<li class="Facebook_btn">
<a href="「FacebookページのURL」" target="_blank" style="color:#ffffff" ><span class="Facebook-icon"><br /></span>Facebook</a></li>

<!--Feedlyボタン-->
<li class="Feedly_btn">
<a href="「FeedlyのURL」" target="_blank" style="color:#ffffff" ><span class="Feedly-icon"><br /></span>Feedly</a></li>

<!--Instagramボタン-->
<li class="Insta_btn">
<a href="https://www.instagram.com/「Instagramのユーザ名」/?ref=badge" target="_blank" style="color:#ffffff" ><span class="Insta-icon"><br /></span>Instagram</a></li>

<!--YouTubeボタン-->
<li class="Youtube_btn">
<a href="http://www.youtube.com/channel/「チャンネルID」?sub_confirmation=1" target="_blank" style="color:#ffffff" ><span class="Youtube-icon"><br /></span>YouTube</a></li>
</ul></div>

ちなみにボタンは3つか4つぐらいがちょうど良いので自分にとって不要なボタンは外してください。
また、このHTMLの並びがボタンの並びになるので変えたい人は順番を入れ替えてください。

ツイッターIDは『@』を除いたものを貼って下さい。
FacebookとFeedlyは該当するURLをそのまま貼り付けてください。
Instagramは
右上のこのボタンをクリックした後

Instagram001

URLのこの部分を参照してください。

instagram002.jpg

YouTubeのチャンネルIDは[概要]⇒[アカウント情報]⇒[氏名]⇒[詳細設定]をクリックすると表示されます。

ウィジェットに追加

カスタマイズが完了したコードを
[外観]⇒[ウィジェット]から追加します。
テキストを追加してその中にさきほどのカスタマイズしたコードを貼り付けてください。

追加した場所にSNSのフォローボタンが追加されました。

今日のまとめ

うまく設置できたでしょうか。
WordPressでは不要となる、はてなの読者登録ボタンを外した代わりに、InstagramのボタンとYouTubeのボタンを追加してみました。
せっかく色々なSNSがあるので活用していきたいですね。