WEB関連

FeedlyボタンとRSSボタンを並べて設置する方法は?

FeedlyボタンとRSSボタンを並べて設置する方法は?

今回は、以前から付けたいと思っていたFeedlyRSSのボタンの設置方法です。

私自身はそれほど活用してないのですが、毎日沢山のブログをチェックされている方には「Feedly」はかなり人気ですよね。

ここはいっちょボタンを着けてみよう!みたいな軽~い気持ちで取り掛かりました。

Feedlyボタンの設置方法

このサイトのサイドバーにあるようにfeedlyボタンRSSボタンを設置してみます。

FeedlyボタンとRSSボタンを並べて設置完成例

Feedlyボタンの設定はなんと3ステップ。めっちゃカンタンです。

 

Feedlyボタン設置手順

 

まずは、Feedlyのボタンを作るページを表示しましょう。→FeedlyButton

 

ステップ1 好きなデザインを選びましょう

Feedlyボタンを選ぶ

一覧から好きなボタンの形を選びます。

私は左下のタイプを選びました。

 

ステップ2 あなたのフィードURLを入力しましょう

feedlyボタンにURLを入れる

フィードURLは、WordPress使用の場合、

https://あなたのサイトURL/feed/

と、なります。

 

ステップ3 コードをコピーしましょう

Feedlyボタンコードをコピーする

コードが表示されますのでコピーして、貼り付けたい場所にペーストすればOKです。

RSSと一緒に表示させたい場合は、とりあえずメモ帳などに保存しておきます。

 

 

RSSボタンの設置方法

RSSボタンは、sabotem * blogさんが作って頂いたものを有り難くダウンロードさせて頂きました!

RSSボタン

スゴイ!feedlyボタンと並べた時の相性ピッタリです!

 

RSSボタン設置手順

RSSボタンをダウンロードします

sabotem * blogさんのサイトでダウンロードさせて頂きます。(ありがとうございます!)

RSSボタンダウンロード

本文中の「こちらから」をクリックしてzipファイルをダウンロードします。

 

ダウンロードしたzipファイルを解凍すると、6つのボタンが用意されています。

RSSボタンのダウンロード一覧

私は一番大きなサイズの「rectangle-flat-big_2x.png」のボタンを使わせて頂きました。

後ほどFeedlyのボタンサイズに合わせて縮小します。

 

RSSボタンのアップロード

rectangle-flat-big_2x.pngのボタンをWordPressの「ダッシュボード」-「メディア」にアップロードします。

「メディア」-「ライブラリ」を開きます。

ファイルのURLをコピー

ファイルのURLをコピーしておきます。

 

RSSボタンの設置

下記のコードに、あなたのサイトURLや先程コピーしたURLを当てはめます。

ボタンの幅と高さはFeedlyのボタンサイズに合わせます。

 

FeedlyとRSSの2つのボタンを横並びにすると、私はこんなコードになりました。

間にはスペースを入れてみました。

あとは、ウィジェットなどに貼り付けたら完成です!

stingerの方は、ウィジェットより上に貼りたい場合、sidebar.phpに貼り付けてみて下さい。

(私はsidebar.phpにある自己紹介の下に無理やり貼り付けました(笑))

 

まとめ

FeedlyとRSSのボタン、並べてみるとセットのように本当にピッタリ!

私は横並びにしましたが、サイドバーのスペースが狭い方は立て並びにしてもかわいいですよ。

よろしければお試し下さいね。