初心者おばちゃんもできた!WordPress(ワードプレス)講座

ワードプレスでブログを始めませんか?テーマSTINGERなど。おばちゃんのカスタマイズ保存版

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

      2015/04/20

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

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

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

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

スポンサーリンク

Feedlyボタンの設置方法

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

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

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

 

Feedlyボタン設置手順

 

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

 

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

Feedlyボタンを選ぶ

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

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

 

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

feedlyボタンにURLを入れる

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

http://あなたのサイト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のボタン、並べてみるとセットのように本当にピッタリ!

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

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

 

 - WordPress, STINGER ,

  • このエントリーをはてなブックマークに追加
  • Pocket

Message

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

  関連記事

ワードプレス関連記事
WordPress カテゴリーの新規作成法は?

今回はカテゴリー作成についてのご説明です。 カテゴリーとは、投稿記事を分類分けで …

[初心者]ワードプレスのテーマSTINGER3をインストールする
[初心者]ワードプレスのテーマSTINGER3をインストールする

今回は、ワードプレスにテーマを設定してみましょう。 スポンサーリンク このページ …

WordPress 記事を投稿しよう
WordPress 新規投稿記事の作成方法は?

サイトを作る手順の最後は、記事の投稿の方法についてご紹介します。 スポンサーリン …

[初心者]絶対インストールしたい&便利・使えるプラグインはコレ!

[初心者]ワードプレスの初期プラグインとインストール方法の続きの記事となります。 …

snsボックス
【Stinger3】SNSボックスを縦に トップページ以外は非表示にする

お世話になっているStinger3で、少し気になるところと言えば、追尾してくるS …

WordPressのウィジェットの設定と削除方法
WordPressのウィジェット設定と削除方法

今回はWordPressのウィジェットの設置方法についてご説明します。 ◆ウィジ …

ワードプレスで最初に行う設定と手順 サイトタイトルの変更
WordPressサイト作成の手順 タイトル・キャッチフレーズの変更

みなさん、ワードプレスは無事インストールできましたでしょうか? 今回は、ワードプ …

[stinger3]ワードプレスヘッダー画像と背景色の変更
[STINGER3]ワードプレスのヘッダー画像と背景色の変更方法

今回は、いよいよワードプレスのテーマSTINGER3のカスタマイズです。 ◆今回 …

STINGER5
STINER5インストールとカスタマイザーで色のカスタマイズ

とうとう、STINGER3からSTINGER5にバージョンアップを行いました。 …

STINGER3 基本的なカスタマイズ
[初心者]STINGER3の基本的なカスタマイズ

スポンサーリンク このページの目次1 STINGER3 テキスト色や装飾の変更1 …