サイドバーにレスポンシブ対応のSNSボタンを設置する

2017/9/30

画像がありません

少し前までブログのサイドバーにTwitterが提供している公式のフォローボタンを設置していたんですが、先日、レスポンシブ対応のボタンにカスタマイズしました。そのついでにFeedlyボタンも設置しました。

レスポンシブ対応のSNSボタンを設置する方法

TwitterやFeedlyのフォローボタンを設置する最も簡単な方法は、各サイトに言ってボタンを作り、そのコードを貼り付けることです。が、公式が提供しているボタンはレスポンシブデザインに対応していませんしサイズも不揃いなので、CSSでボタンを自作した方がいい場合もあります。というわけで、私も作ってみました。

当ブログのSNSボタン（サイドバー下部）

サイドバーにSNSボタン

 

SNSボタンのカスタマイズはとても簡単。当ブログはWordPressのSimplicityを使用していますので、まずWordPressのダッシュボードを開き、ウィジェット→サイドバーにテキストウィジェットを追加。テキストウィジェット内に以下のコードを貼り付けます。

 

<div class="sns-follow">
<a class="twitter-button" href="https://twitter.com/intent/follow?screen_name=ここに自分のTwitterアカウントを入力"><i class="blogicon-twitter"></i></a> 
<a class="feedly-button" ここにfeedのアドレスを入力"><i class="blogicon-rss"></i></a>
</div>

 

上記コードはそのまま使うことができません。まず、ツイッターコード部分にある、「ここにTwitterアカウントを入力」のところを、自分のTwitterID（＠は外す）に書き換えてください。

 

そしてfeedlyコードの「ここにfeedのアドレスを入力」ですが、これはまずfeedlyの公式サイトへ行き、feedlyボタンを作る必要があります。ボタンを作ると、このようなコードが出力されます（以下のコードは当ブログのもの）。

 

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fhttps%3A%2F%2Fwww.hiroseyonaka.com'>
<img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-square-flat-white_2x.png' alt='follow us in feedly' width='28' height='28'>
</a>

 

このコード１行目にある「http://～自分のサイトアドレス」部分をコピーし、「ここにfeedのアドレスを入力」の箇所にペーストしてください。上記コードなら、

 

http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fhttps%3A%2F%2Fwww.hiroseyonaka.com

の箇所ですね。

CSSでSNSボタンを装飾

次にCSSでボタンを装飾していきます。今回はTwitterとFeedlyの２つを設置するので、外観→カスタマイズ→追加CSSを開き、以下のCSSを貼り付けます。

 

.sns-follow{
display: table;
width: 100%;
margin: 10px 0;
text-align: left;
}
.sns-follow a{
display: table-cell;
font-size:2em;
text-align: center;
text-decoration: none;
width: 50%;
height:50px;
line-height: 50px;
}
.blogicon-twitter::before{
font-family: FontAwesome;
content: "\f099";
color:#fff;
font-style:normal; 
}
.blogicon-rss::before{
font-family: FontAwesome;
content: "\f09e";
color:#fff;
font-style:normal;
}
.sns-follow .feedly-button{
    background-color: #00aea2;
}
.sns-follow .twitter-button{
    background-color: #65c7f2;
}

 

これでレスポンシブ対応済みSNSボタンの設置が完了しました。ボタンを増やしたいときは、width:50%の数値を変更してください。

ADVERTISEMENT

hiroseyonaka802