ブログテーマであるStinger3が、自分の理想とするシルエットに近づきつつある@itzTA2OWです。
自分のようなペーペーが、PHPやCSSを弄りながらカスタムできて、自分なりに楽しくブログが書けるのは、Google検索でStinger3をカスタマイズされてるたくさんのTipsに出会うからなわけで、それはつまり本当に多くの方がENJIさんが開発されたStingerシリーズを使われていて、「人のために知識をシェアする」というみなさんの貢献の意識の高さを日々実感しています。
感謝の気持ちを込めました
ある時ふと「自分も何かweb上で役にたてないか」と考えた結果、Googleリーダーが終了してRSSリーダーをFeedlyに移行された方は多いはずだし、同じように利用者の多いStinger3用のFeedlyボタンを作ってはどうかと思いました。
デフォルトのFeedlyボタンはStinger3のサイドに設置するとアクセントにはなるんだけどなんか、グイグイ感がないというか。大阪人からすると「もっと前出ようや！」と、そらもう内心ツッコミまくる仕上がり。
だから作りました。同じようなツッコミをしてる人は限りなく少ないと思うけど作りました。
また自分がiPhoneなのでスマフォでの観覧時はRetinaディスプレイに対応するようにFeedlyボタンをサイドバーの3倍のサイズにして、さらに色んなバージョンを製作しました。
feedlyボタン
サイドバー設置方法
このボタンを使用しようと思っていただいた方は、ウィジェットに既存のFeedlyボタンを持っている方だと思います。そのコードの画像アドレスとそれ以下の部分を少し削除するだけでOKです。
持っていなくて「これからだ！」って方は、取得したfeedlyのコードをそのままウィジェットの「テキスト」にコピペしてください。
書き換える画像アドレスは、僕の作ったfeedlyボタンを保存 → メディアにアップロード → 画像を編集 → 右にあるURL欄がアドレスになります。
［feedlyボタンを持っていない方はコチラで取得してください → feedly. your news. delivered.］
STEP.2のInsert your feed URLにご自身のサイトアドレスを入力すると下記のようにHTMLコードが出てきますので、取得してコードをウィジェットの「テキスト」内にコピペ。
feedlyオリジナルの画像アドレスは以下のようになってると思います。
[php]
<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'>
[/php]
これを
[php]
<img id='feedlyFollow' src='http://ta2oweb.com/wp-content/uploads/2013/10/feedly_tourokubb.png' alt='follow us in feedly'>
[/php]
上記のようにご自身の画像アドレスを書き換えて、width以下を消去すれば完成です。
ただ、アドレスを差し替えただけだと、逆に今度はグイグイ感がパナ過ぎるボタンが設置されてしまいますので、style CSSの一番下に以下のコードをコピペしてください。もちろんスマフォ用のsmart CSSの一番下にも同じようにコピペでコードを追加してください。
style CSSはこちら
[css]
#feedlyFollow{
max-width: 100%;
height: auto;
}
[/css]
smart cssはこちら
[css]
#feedlyFollow{
max-width: 281px;
height: auto;
}
[/css]
今回のマジでっ！！
素人ながら考え抜いた結果が上記の方法で、もっと良い表示の仕方があるよって方はぜひコメントよろしくお願いします！
顔が見えなくとも、お世話になっている方が多いので、微力ながら力になれたらと思い製作しました。どなたでも無断でお気軽に使ってください！いつもありがとうございます！
