以前、WordPress高速化目的でアイコンフォントでソーシャルボタンを自作しました。最近Feedlyの勢いが無視できない感じがしてきたので、Feedly購読ボタンも自作してみました。

Feedly購読ページURL

ボタンを作るためには、特定のフィードを購読するためのFeedlyページのURLを把握しないといけません。

そのURLはこんなつくりになっています。

• http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F（ここにドメイン）%2Ffeed%2F

当サイトのfeedを購読するためのFeedlyページのURLはこうなります。

• http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fwebshufu.com%2Ffeed%2F

こちらの記事にとても分かりやすく書いてありました。ありがとうございます。

[img-link url=”http://music-car.com/stinger-head-custom/” title=”I LOVE Stinger!!ヘッダーカスタム記事何回目だ！２回目だ！”]

ボタン作りのためのコード

いよいよボタン作りです。

しかし、今回はFeedlyのアイコンフォントで「いいなあ」と思えるものに出会えなかったので、何の変哲もない「Feedly」という文字列をCSSでボタンっぽく見せかけました。

ナビゲーションバー右端に他のSNSボタンと並べています。

HTML

<nav id="site-navigation" class="main-navigation" role="navigation">
    ‥‥‥‥‥‥（中略）‥‥‥‥‥‥
    <div class="navi-social-li">
        ‥‥‥‥‥‥（中略）‥‥‥‥‥‥
        <a class="feedly-squared" href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fwebshufu.com%2Ffeed%2F"><span>fee<br>dly</span></a>
    </div>
</nav><!-- #site-navigation -->

CSS

#site-navigation .navi-social-li a:hover{
    opacity:0.7;
}
#site-navigation .navi-social-li{
    font-size:35px;
    padding:0 10px;
    border-right:0px solid #ffffff;
    float:right;
    background:#000000;
}
#site-navigation .navi-social-li a.feedly-squared{ 
    background:#6cc454;
    font-size:12px;
    line-height:0.5;
    padding:3px 7px 5px 7px;
    margin-top:6px;
    display:inline-block;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
} 
#site-navigation .navi-social-li a.feedly-squared span { 
    font-size:12px;
    color:#ffffff;
    vertical-align:-5px;
    display:inline;
}

Google Page Speed Insightの計測結果

今回作ったFeedly購読ボタンは画像もアイコンフォントも使わないつくりなので、高速化の妨げになっていないはず。

‥と思いましたがGoogle Page Speed Insight で計測しておきました。

例によって「Krad XinによるロリポップWordpressサイト大量ハッキングまとめ｜ウェブシュフ」で計測します。

すると、

@web_shufu的には満足な数字です。上には上があるのでしょうが、目指しませんww

皆様のサイト高速化のヒントとなれば幸いです。