少し前から付けたいと思っていた、Feedlyのフォローボタンをやっとつけました。
まずはPC向けで、サイドバーへのカスタマイズから。
まずは先人の知恵を参考に
まずはどうやったら付けれるかをググってみました。
やはり先人たちの知恵は凄いですね。すぐに出てきましたよ。で、参考にさせていただいたのはこちらのBlog記事様
画像付きで凄く分かりやすい記事です。本当にありがたいです。
自分のBlogにカスタマイズ
現在のPC向けデザインが、こんな感じでした。
横長で良い感じのFeedlyのデザインが無かったので、前にあったツイッターのデザインをシンプルにして、並べて配置しました。
要るか微妙ですが、フォローお願いしますコメントもつけました。
ちょっとだけ修正したところ
サイドバーにモジュールを追加してツイッターのフォローボタンとFeedlyのフォローボタンをそれぞれつけると、
このように結構空白が出来てしまいます。
そこで、一つのモジュールの中に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>
でモジュールの本文の中でタイトルを書いています。
最後に
ずっとやりたかったものをやってみるのはやはり楽しいですねー。
そして出来たときの達成感もなかなか。
まだスマホ向けのカスタマイズをできていないので、そちらも早くやりたいのですが、なかなか自分的にしっくり来るデザインがつかめていません。いや、センスは間違っても良い方ではないので、あまり深く悩まないほうがいいのかもしれませんが。
こんな記事でも、なにかの参考になれば良いなと思います。
本日も最後までお読みいただき、ありがとうございました。