Twitterやfeedlyフォローボックスの表示方法

Twitterやfeedlyフォローボックスの表示方法

2016年3月4日
By: Takamorry

このブログではデザインテーマとしてはSimplicityを使っています。Simplicityはカスタマイズ機能が優れたテーマですが、このブログでは、「部長ナビ」や「寝ログ」を参考に、さらにカスタマイズしています。

今回は、witterやfeedlyのフォローボックスの表示方法について記事にしておきます。

スポンサーリンク

Twitterやfeedlyフォローボックスに気づく

SimplicityにはデフォルトでFacebookページの「いいね!」のボックスが用意されています。このブログでは、「部長ナビ」で紹介されていた「Simplicityバージョン」に変更しています。

「部長ナビ」をよく見ると、そのFacebookボックスの下に、Twitterやfeedlyのフォローボックスが表示されます。他のサイトを見ても、このようなボックスを表示しているサイトがたくさんあることに気づきました。

この部分です⬇️

SimplicityでFacebookページの「いいね!」ボックスを設置する方法___部長ナビのページ

Twitterやfeedlyフォローボックスの表示方法

このサイトでも、Twitterやfeedlyのフォローボックスを表示したいと思い、「部長ナビ」などのリソースを調べてみました。

その結果、style.cssの中にある、次の記述がTwitterやfeedlyのフォローボックスに関係する部分であることがわかりました。

[css]
ul.snsfollow-area {
display:table;
table-layout: fixed;
width:100%;
padding:initial;
}
ul.snsfollow-area li {
display:table-cell;
vertical-align:middle;
text-align: center;
background: #f6f6f6;
padding: 25px 8px 20px 8px;
border: 8px #fff solid;
}
ul.snsfollow-area li span {
font-size: 11px;
text-align: center;
display: block;
}
[/css]

そこで、single.phpファイルにつぎのような記述を追加しました。場所は、先にカスタマイズしたFacebookボックスに関する記述の後です。

[css]
<ul class="snsfollow-area">
<li><a href="https://twitter.com/bibalogue_" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large" data-show-screen-name="false">@bibalogue_さんをフォロー</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>
<span><font size=3>Twitterで更新情報</font></span></li>
<li>
<span class="feedly-btn-horizontal">
<a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fbibalogue.com%2Ffeed%2F’ target=’blank’><img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png’ alt=’follow us in feedly’ width=’71’ height=’28’></a></span>
<span><font size=3>Feedlyで更新情報</font></span>
</li>
</ul>
[/css]

この記述のままだと配色や背景枠の大きさは「部長ナビ」と同一になります。表示内容や配色などを変更したい場合は、さらにカスタマイズすることが必要です。

まとめ

気になっていたTwitterとfeedlyフォローボックスをようやく表示できるようになりました。今後、配色などを変更するなどして、少しカスタマイズしていこうと思っています。