【WordPressの高速化日記】Feedly購読ボタンを自力で作成・設置してみた

更新

2014-02-06_2344
以前、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

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

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

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

しかし、今回は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サイト大量ハッキングまとめ|ウェブシュフ」で計測します。

すると、

2014-02-06_2008

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です