PC向けデザインにFeedlyのフォローボタンをつけました

少し前から付けたいと思っていた、Feedlyのフォローボタンをやっとつけました。
まずはPC向けで、サイドバーへのカスタマイズから。

まずは先人の知恵を参考に

まずはどうやったら付けれるかをググってみました。
やはり先人たちの知恵は凄いですね。すぐに出てきましたよ。で、参考にさせていただいたのはこちらのBlog記事様

cashew.hatenablog.com

画像付きで凄く分かりやすい記事です。本当にありがたいです。

自分のBlogにカスタマイズ

現在のPC向けデザインが、こんな感じでした。

f:id:nqumen:20150729222741j:plain

横長で良い感じのFeedlyのデザインが無かったので、前にあったツイッターのデザインをシンプルにして、並べて配置しました。

f:id:nqumen:20150729222749j:plain

要るか微妙ですが、フォローお願いしますコメントもつけました。

ちょっとだけ修正したところ

サイドバーにモジュールを追加してツイッターのフォローボタンとFeedlyのフォローボタンをそれぞれつけると、

f:id:nqumen:20150729223349j:plain

このように結構空白が出来てしまいます。

そこで、一つのモジュールの中にFeedlyのリンクも格納しました。
ただ並べて貼り付けてしまうと、横に並んでしまうので、4行目にhtmlの改行タグ<br>を間に入れて改行されるようにしています。

<a href="https://twitter.com/nqumen" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large">@nqumenさんをフォロー</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>
<br>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fnqumen.hatenablog.com%2Ffeed'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='131' height='56'></a>

上のコードをそのままコピペするとこのブログや私のtwitterがフォローされてしまうのでご注意を。
横並びにしたいのであれば、<br>を外すと横並びになります。

また、先ほどのコードの上にhtmlの文章を書くことが出来ます。
私の場合は、モジュールのタイトルにすると少し野暮ったかったので、「よろしければフォローお願いしますm( )m」を<h5>でモジュールの本文の中でタイトルを書いています。

最後に

ずっとやりたかったものをやってみるのはやはり楽しいですねー。
そして出来たときの達成感もなかなか。
まだスマホ向けのカスタマイズをできていないので、そちらも早くやりたいのですが、なかなか自分的にしっくり来るデザインがつかめていません。いや、センスは間違っても良い方ではないので、あまり深く悩まないほうがいいのかもしれませんが。
こんな記事でも、なにかの参考になれば良いなと思います。

本日も最後までお読みいただき、ありがとうございました。

スポンサーリンク