はぴすぷ

サイドバーにfeedlyとTwitterのフォローボタンを設置する。【STINGER5】カスタマイズ

      2015/09/22

SS_0713_0
feedlyとTwitterの埋め込みボタンについて、前回、前々回で学んできたので、ようやく本来の目的だったWordPress【STINGER5】のサイドバーに設置する作業を行います。

ある程度Web系の知識がある方ならこの記事だけでわかると思いますが、分からない部分があれば過去の記事を参考にしてみて下さい。

feedly：最近流行の【feedly】登録から使い方まで日本語で解説！ボタンの設置方法も
Twitter：Twitterのツイート・フォローボタンの埋め込みコード取得と設置方法

スポンサーリンク

feedlyとTwitterのフォローボタンをサイドバーに埋め込む

この作業を始めた時のプロフィール周りはこんな感じでした。

profile_01

当サイト「はぴすぷ」のイメージカラーは黄緑なのでRSSも黄緑に設定していたんです。
でもfeedlyのボタンも黄緑なので近くに配置すると判別し辛い。なのでRSSの色は変えることにした。

ちなみにfeedlyのボタンはこんな感じ。黒は採用しなかった。

SS_0714

feedlyボタン生成

Twitterのボタンは公式のものだとサイズが2種類で、フォロー数出すかくらいの変化つけれないので、うまく配置できるレイアウトを考えるも難航…(‘A`)

Twitterフォローボタンはこんな感じ。


Twitterボタン生成

オリジナルでやってみようかとも思ったけど、デザインセンスが皆無だった／(^o^)＼

というわけで公式のものだけでレイアウトを考えた結果、小さめのものを横一列に並べることにした。

並び順はfeedly、RSS、Twitter。

feedlyのフォローボタンを設置

先頭がfeedlyなのでRSSのdivタグ前に追加する。ついでなので見出しも追加。

サイドバー（sidebar.php）

  <!-- 更新情報 -->
  <h4 class="menu_underh2"> 更新情報を受け取る</h4>
  <!-- feedly -->
  <div class="feedly">
    <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fhapisupu.com%2Ffeed%2F'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-square-flat-green_2x.png' alt='follow us in feedly' width='28' height='28'></a>
  </div>
  <!-- RSSボタンです -->

これでこんな感じになる。cssはあとで対応する。

SS_0715

Twitterのフォローボタンを設置

次はTwitterのフォローボタンをRSSの後ろに付けたいのでRSSのdivタグの後ろに追記。
ついでに購読するの文字をRSSに変更。

サイドバー（sidebar.php）

  <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i>&nbsp;RSS</a> </div>
  <!-- RSSボタンここまで -->
  <!-- Twitter -->
  <div class="twitter">
    <a href="https://twitter.com/hapisupu" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-dnt="true">@hapisupuさんをフォロー</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  </div>
  <div style="clear:both"></div>
  <!-- /更新情報 -->

これでこうなる。

SS_0716

あとは回り込みと、マージンと、RSSボタンのサイズを調整。

スタイルシート（style.css）（追記・変更部分のみ）

/* feedly */
#side .feedly {
    float: left;
}
/* RSS購読するボタン */
.rssbox {
    float: left;
    margin-left: 10px;
}
.rssbox a {
    padding: 3px 10px;
}
/* Twitter */
#side .twitter {
    float: left;
    margin-left: 10px;
}

これで完成です＼(^o^)／

SS_0717

終わりに

やはりトップページの最初に見える場所を変更すると、目につく頻度が多いだけあってやったった感がありますね！地味な変更だけどｗ

これで多少でもリピーターさんが増えてくれれば嬉しいな(o・ω・o)
記事最後のソーシャルボタン郡あたりにも、置いておくとよさそうなので、また今度対応しようと思います。

まだまだカスタマイズしたいことはいっぱいあるんですが、大変そうでなかなか手が出ない…。
とりあえずヘッダーメニューに表示するコンテンツを用意しないと…！頑張ろう。

 - feedly, STINGER, Twitter, WordPress, ソーシャル, 外部サイト連携