[アイコン配布]「Inoreaderで購読する」ボタンを作った

RSSリーダーのシェアは、やっぱりFeedlyが一番なんでしょうか。何となくそんな気がしていたので、うちのブログではRSSボタンのリンクをFeedlyで購読するURLにしていたのですが、私自身がFeedlyではなくInoreaderを愛用しているものですから、Inoreaderで購読するボタンを作ってみました。

単体で使うことはないと思いますが、とりあえず上が使用例です。うちのブログはシェアボタンをひとかたまりにしているので、実際は記事下のシェアボタン群に入れています。

「Inoreaderで購読する」のURL

URLは下記のようになります。使用される場合はそのまま使わないで、イコールの後ろをご自分のウェブサイトのものに変更してください。

Inoreaderのアイコン

知名度が少ないのか、検索してもあまりヒットしないんですよね。Fontawesomeにあれば助かるのですが、Inoreaderは疎かFeedlyでさえもない始末。

ということで作りました。私の作ったもので良ければ、置いておきますのでご自由にお使いください。ただし、二次配布はしないでください。

ダウンロード

このファイルについて

フォーマットはSVGです。大きさは1024x1024px、アイコンの色は水色になっていますが自由に変更することも可能です。SVGファイルは使い勝手が良くて、オンラインコンバーターなどを使ってウェブフォントや別の画像フォーマットに変換することが容易にできます。また、拡大縮小してもベクターなので劣化しません。

図形の間隔や大きさを計算するロジックが一部わからなかったので、そこはウェブ上の画像を参考にしました。ライブトレースは使っていないのでギザギザになったりとかはしていません。

余談ですが、Inoreaderのロゴは6つの正円から成る単純な図形の組み合わせで、円を重ねて型抜きしたり、アンカーポイントを削除して連結したりすると作ることができます。（図形だけ作るのなら1分掛からないくらい簡単）私もそんなにパスの扱いに慣れているわけではないですが、初歩的なパスの扱いを学ぶのに良い教材になるのではないかと思いました。

SVGファイルの編集

画像編集ソフトで編集できるのはいうまでもありませんが、SVGファイルはテキストベースのファイルなので、テキストエディタで編集することも可能です。流石にテキストエディタで図形の形を変えたりは難しいですが、表示サイズや色は簡単に変更できます。

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="1024px" height="1024px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">
<path fill="#00a2d7" d="M361,188c278.352,0,504,225.648,504,504h86c0-325.848-264.152-590-590-590V188z"/>
<path fill="#00a2d7" d="M361,368c178.939,0,324,145.06,324,324h86c0-226.437-183.563-410-410-410V368z"/>
<path fill="#00a2d7" d="M361,451c-133.101,0-241,107.899-241,241s107.899,241,241,241s241-107.899,241-241S494.101,451,361,451z
  M429.5,691c-37.832,0-68.5-30.669-68.5-68.5s30.668-68.5,68.5-68.5s68.5,30.669,68.5,68.5S467.332,691,429.5,691z"/>
</svg>

テキストエディタで開くと上のようなXMLに似たコードが表示されます。width、heightは全体の幅と高さ、fillは図形の色を定義する属性になります。その他、詳しくはリファレンス等で調べてください。