昨日の記事にてブログにFeedlyボタンを設置するのは超簡単！という話しを書きました。でも、Feedlyアイコンのイメージが必ずしもどのブログでも合うというものでもありません。そんなわけで、オリジナルデザインのボタンに替えてみました。

ニュース斜め読みに便利！RSSリーダーFeeldy愛用中

“昨日の記事と同じになってしまいますが、ネットニュースやいろいろなブログの更新情報をチェックするためにRSSフィードリーダーというサービスを使っています。ニュースサイトやブログには、RSSフィードという更新情報を取得できる機能がありまして、これをRSSフィードリーダーに登録しておくと、各サイトの更新情報をまとめて表示してくれます。

ニュースサイトでは、記事が見やすいようにきれいにレイアウトしてくれていますが、「１日分まとめよみ！」を使用と思うと結構不便だったりします。有名どころのRSSフィードリーダーサービスの１つ、Feedlyを愛用していますが、タイトルオンリーのモードにしたり画像付き表示に切り替えたりすることもできるので、タイトルオンリーにしておけば、一気に斜め読み、気になった記事だけ開いて読む、ということができます。

ブログにFeedly購読ボタンを簡単設置したものの

Feedly、SiSOも愛用中と言うことで自分のブログにFeedly購読ボタンを設置してみました！RSSフィードリーダーのリンクは表示させていたのですが、やはり一発操作でFeedly煮登録できた方が、見に来てくれた人も気軽に登録してくれるかもしれません。

でも、なんとなくデザインが合わないのでボタンをオリジナル画像に入れ替えてみました。

まずはボタン画像準備！いつものように「MSペイント」にて

「百均浪漫/SiSO-LAB」のサイドバーにはRSS情報などのボタンアイコンが並べてありますが、このデザインに合わせたかったのでFeedlyアイコンは自分で描くことにしました。まあこれぐらいなら、Windowsに標準インストールされているMSペイントでなんとかなります。

というわけで、MSペイントで描き描き。「feedly」の文字は手書きではなく、テキスト挿入機能で描いています。ここでハタと気がついたのですが、「Feedly」って、一文字目は小文字で「feedly」だったんですね！しまった。というわけで、ここからは「feedly」で統一します。

本当は全部大文字にした方が他のボタン画像とイメージが同じになるので良かったのですが、やはり、オリジナルデザインはほどほどにキープしないとですね。

書きあがったらPNGで保存します。

ボタン画像をWordPressサイトにアップロード

「百均浪漫/SiSO-LAB」はWordPressで構築したブログサイトで、テーマは無料で国産でカスタマイズしやすい「Gush2」を使っています（宣伝じみた言い回しですが宣伝です。せっかく無料で遣わさせていただいているので、やはり開発者様に何か貢献しないとですね）。

普通にWordPressの管理機能でアップロードすると、あまりシステムっぽいところに保存されないので、今回はFTPクライアントを使って、Gush2の共通で使用されている画像ファイルが入っているディレクトリ（フォルダ）にアップロードしました。具体的には「WordPressがインストールされているディレクトリ」の下の「themes/gush2/image/」内です。

feedlyで自動生成した埋め込みコードを修正

feedlyで自動生成したコードをちょっと修正します。自動生成方法については“昨日の記事を参照してください。

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F100s.siso-lab.net%2Ffeed%2F'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png' alt='follow us in feedly' width='131' height='56'></a>

コードが横に長くて見づらいですが、「img」タグ内を編集します。ここのところです。

<img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png' alt='follow us in feedly' width='131' height='56'>

今回作成した画像ファイル名は「icon-fdl.png」で、画像サイズは90x90pxです。これを、こんな風にしたらいいんじゃないんでしょうか？

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F100s.siso-lab.net%2Ffeed%2F'  target='blank'><img src='サイトURL/wp-content/themes/gush2/images/icon-fdl.png' alt='follow us in feedly' width='90' height='90'></a>

ウィジェットでサイドバーに実装！

あとはこれをWordPressのウィジェット機能を使ってサイドバーに貼り付けます。やり方については“昨日の記事にちょっと書いてますので、よかったら参考にしてください。

というわけで動作もうまく行きましたので、当初の予定位置に並べてみました。うむ、素晴らしい！

今日の一言二言三言

意外とね　MSペイント　使えるな

画像関係で使っているソフトウェアは、Jtrim、ViX、Skitch、そしてMSペイントぐらいなのですが、大概のことはなんとかなるものです。でも、GIMPとか使いこなせるようになりたいなぁ。