初心者おばちゃんもできた!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

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

  関連記事

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

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

【初心者】WP-DBManagerでバックアップと日本語化の方法
【初心者】WP-DBManagerでバックアップと日本語化の方法

ここでは、初心者の私でもできた簡単なバックアップ方法をご紹介します。 ワードプレ …

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

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

[STINGER3]トップページ・サイドバーのカスタマイズ
[STINGER3]トップページ・サイドバーのカスタマイズ

STINGER3の基本的なカスタマイズ第2弾です。 改めて新しいサイトを作るとき …

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

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

ワードプレス関連記事
[初心者]ワードプレスの初期プラグインとインストール方法

今回は、2回に渡ってワードプレスのプラグインについてのお話です。 ● プラグイン …

WP-DBManagerをロリポップサーバで使う場合のエラー回避方法について
WP-DBManagerをロリポップサーバで使う場合のエラー回避方法は?

ワードプレスをアップグレードする際、データベースを簡単にバックアップできるプラグ …

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

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

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

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

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

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