cBlog

Tips for you.

サイドバーのプロフィールにFeedlyボタンを設置

スポンサーリンク
※当ブログのAmazon、iTunes、サウンドハウス等のリンクはアフィリエイトを利用しています。

f:id:cruller:20151230100745p:plain

年末年始1日目の午後。

 

そういや、Feedlyの購読ボタン設置しようとしていたなしな。

 

Feedlyについて

きっかけ&設置方法

mob-channel.hateblo.jp

 

効果

はてなユーザー以外にも読者になってもらえる。

 

Feed URL

http://〜/feedとhttp://〜/rssがあるなっしー。feedはAtom、rssはRSS 2.0という配信フォーマットらしい。

 

どっちにすればいいのかわかんなかったから、すでにFeedlyで読者になってくれてる方(いるのか?)の数で決めることにしたなっしー。

 

Feedly読者数の調べ方

このサイトのフォームに自分のブログのURLをブチ込むと、Feed URL毎のアカウント数がわかるなっしー。

knowledgecolors.net

 

結果

f:id:cruller:20151230100756p:plain

いたなっしー!(驚愕) こんな辺境のブログにありがとうございます( ;∀;)

 

偉大なる先人たちに従い、http://〜/feedを使うことにしたなっしー。

 

 

カスタマイズ

サイドバーのプロフィールにはHTMLを貼れないので、とりあえずHTMLモジュールに貼り、プロフィール下に持ってくる。

 

モジュールのタイトルを空欄にしたけど、プロフィール欄との間隔が気になるなっしー。CSSでなんとかするなっしー。

 

CSS(「デザインCSS」にある@import url("");内のアドレスにアクセス)を見るとWrittenテーマの場合だけど、モジュール下に50 pxのパディング(「.hatena-module」で検索)、モジュール本体上に15 pxのパディング(「.hatena-module-body」で検索)を発見。

 

プロフィール下は.hatena-module-profileで、モジュール本体上は.hatena-module-htmlだと他のHTMLモジュールにも影響するから、適当にクラスを定義してネガティブマージンでなんとかするなっしー。

 

まとめ

プロフィール直下に設置したHTMLモジュールに、タイトル空欄で以下のコードを貼るなっしー。

<div class="feedly">
    ここにFeedlyボタンのコードを貼り付ける。
</div>

クラス名はなんでもいいなしよ。

 

デザインCSSに以下を追記するなっしー。

.hatena-module-profile{padding-bottom:0;}
.feedly{margin-top:-15px;}

 

 

Follow on feedly

なんということでしょう。匠の技によって、まるでプロフィール欄と一体化しているかのようにFeedlyボタンが設置されていますなっしー。

 

サイドバーのプロフィールに直接HTMLを使えればもっと簡単なのになしなー。みんなー、ぜひ押してくれなっしー。

HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座