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

By: Takamorry

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

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

Twitterやfeedlyフォローボックスに気づく
Twitterやfeedlyフォローボックスの表示方法
まとめ

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

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

dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

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

この部分です⬇️

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>
Twitterで更新情報</li>
<li>

<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>
Feedlyで更新情報
</li>
</ul>
[/css]

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