先日、ブログをSSL化した為、非SSLで接続する
Feedlyやライブドアリーダーのボタンは使えなくなりました。

使おうと思えば使えますがloaded over httpsエラーが発生しています。

Feedly購読者は若干増えているので、あった方が良いはず。
今回はRSS購読ボタンを自作しました。

rssb

スポンサーリンク

ボタンの画像の作成

RSSアイコンだけ、だと分かりにくい上に
ツィッターのフォローボタンなどが横長まので1つだけ正方形だと
不自然に見えます。

今回はFeedlyも、購読出来る様にするので横長のボタンにして
ボタンの左右に各アイコンを配置しました。

各ボタン素材はこちらからダウンロードしました。
【参考】フリー素材:Web2.0チックなフィードアイコン
【参考】次世代のRSSリーダーになるかもしれない Feedlyのアイコンを作成したよ。

作成はGIMPで。

グラデーションを半透明にし、立体化を出しました。

クリックするとメニューが表示されるボタン

購読の項目は

  1. Feedky
  2. ライブドアリーダー
  3. RSS

の3つにしたいのですが、3つボタンを並べるの見た目も悪いです。
そこで、ボタンをクリックするとメニュ(リンク)が表示される様にしました。

使用したのはJavaScript。

こちらのソースを元にしました。
【参考】クリックするとツリーメニューを表示する(フラット)

各サービスへのリンクはテキストリンクにしました。

左側のRSSアイコンはWordPressテーマで行いました。

これをウィジェットやモバイルでは記事下に挿入しました。

ボタンをクリック・タップするとFeedlyなどへのリンクが表示され、
再度クリック・タップすると再び隠れます。