TA2OWeb.(たつおウェブドット)

Stinger3用Feedlyボタンを作ってみました。そしてボタンの設置方法![Stinger3]

 


ブログテーマであるStinger3が、自分の理想とするシルエットに近づきつつある@itzTA2OWです。

自分のようなペーペーが、PHPやCSSを弄りながらカスタムできて、自分なりに楽しくブログが書けるのは、Google検索でStinger3をカスタマイズされてるたくさんのTipsに出会うからなわけで、それはつまり本当に多くの方がENJIさんが開発されたStingerシリーズを使われていて、「人のために知識をシェアする」というみなさんの貢献の意識の高さを日々実感しています。

SPONSORED LINK


感謝の気持ちを込めました

ある時ふと「自分も何かweb上で役にたてないか」と考えた結果、Googleリーダーが終了してRSSリーダーをFeedlyに移行された方は多いはずだし、同じように利用者の多いStinger3用のFeedlyボタンを作ってはどうかと思いました。

デフォルトのFeedlyボタンはStinger3のサイドに設置するとアクセントにはなるんだけどなんか、グイグイ感がないというか。大阪人からすると「もっと前出ようや!」と、そらもう内心ツッコミまくる仕上がり。

だから作りました。同じようなツッコミをしてる人は限りなく少ないと思うけど作りました。
また自分がiPhoneなのでスマフォでの観覧時はRetinaディスプレイに対応するようにFeedlyボタンをサイドバーの3倍のサイズにして、さらに色んなバージョンを製作しました。

feedlyボタン


feedly_black_stand

feedly_gray_stand

feedly_green_stand

feedly_pink_stand

feedly_black_r1

feedly_black_r

feedly_black_r2

feedly_gray_r

feedly_green_-r

feedly_pink_r

feedl_pink_r1

feedly_black_d

feedly_gray_d

feedly_pink_d

feedly_black_touroku

feedly_pink_touroku

feedly_touroku

feedly_tourokubb

feedly_tourokubbb

feedly_tourokugr

feedly_tourokugg

feedly_tourokupp

サイドバー設置方法


このボタンを使用しようと思っていただいた方は、ウィジェットに既存のFeedlyボタンを持っている方だと思います。そのコードの画像アドレスとそれ以下の部分を少し削除するだけでOKです。
持っていなくて「これからだ!」って方は、取得したfeedlyのコードをそのままウィジェットの「テキスト」にコピペしてください。

書き換える画像アドレスは、僕の作ったfeedlyボタンを保存 → メディアにアップロード → 画像を編集 → 右にあるURL欄がアドレスになります。

feedlyボタンを持っていない方はコチラで取得してください → feedly. your news. delivered.

STEP.2のInsert your feed URLにご自身のサイトアドレスを入力すると下記のようにHTMLコードが出てきますので、取得してコードをウィジェットの「テキスト」内にコピペ。
feedlyオリジナルの画像アドレスは以下のようになってると思います。

<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'>

これを

<img id='feedlyFollow' src='http://ta2oweb.com/wp-content/uploads/2013/10/feedly_tourokubb.png' alt='follow us in feedly'>

上記のようにご自身の画像アドレスを書き換えて、width以下を消去すれば完成です。

ただ、アドレスを差し替えただけだと、逆に今度はグイグイ感がパナ過ぎるボタンが設置されてしまいますので、style CSSの一番下に以下のコードをコピペしてください。もちろんスマフォ用のsmart CSSの一番下にも同じようにコピペでコードを追加してください。

style CSSはこちら

#feedlyFollow{
    max-width: 100%;
    height: auto;
}

smart cssはこちら

#feedlyFollow{
    max-width: 281px;
    height: auto;
}

今回のマジでっ!!

素人ながら考え抜いた結果が上記の方法で、もっと良い表示の仕方があるよって方はぜひコメントよろしくお願いします!

顔が見えなくとも、お世話になっている方が多いので、微力ながら力になれたらと思い製作しました。どなたでも無断でお気軽に使ってください!いつもありがとうございます!

▼シェアしてもらえるとめっちゃ嬉しいです:)
  2014/07/30
       
SPONSORED LINK