MINWEB[ミンウェブ]

みんな使えるWeb活用術『ミンウェブ』
by株式会社セルリア

フェイスブック

ツイッター

RSS

MINWEB[ミンウェブ]

みんな使えるWeb活用術『ミンウェブ』
by株式会社セルリア

フェイスブック

ツイッター

RSS

WordPressでFeedlyとRSS設定&ボタンを設置する方法

Date: Category: Webソリューション活用
  • このエントリーをはてなブックマークに追加

ブログを開設してからちょうど1ヶ月が経過しました。まだまだ訪問数は少ないのですが、最近少しづつfeedlyやRSS経由で見に来てくださるリピーターの方も増えております。

皆様の中にもRSSリーダーとしてfeedlyを活用し、気に入っているブログが更新されたとなればfeedly経由でマメにサイトをチェックするようにしている方が多くいらっしゃるのではないでしょうか。そういったfeedly・RSSユーザーの方にしっかり更新情報を伝えるために、feedlyやRSSを準備しておくことはブログ運営者にとって欠かせない作業といえます。

今回はfeedlyとRSSの設定とボタン設置について簡単におまとめします。よろしければご覧下さい。

 

feedlyの設定・ボタンを設置するまで

 

feedlyの設定・ボタン設置は以下の2つの手順で完了します。

 


 1. feedlyボタンのソースコードを取得

 2. 取得したソースコードをブログに設置


 

[1]feedlyボタンのソースコードを取得

まず始めに【feedlyボタンの設定ページ】へアクセスします。

feedlyボタン設定ページ

 

Step.1 ボタンのデザインを選択

自分のブログに合ったデザインのものを好きに選びましょう。

デザイン選択

 

Step.2 ホームページのfeedURLを入力

自身が運営するWebサイトのfeedURLを入力します。feedURLの取得にはこちらのツールが便利です。(RSSリスティング

feedURLを入力

 

 

Step.3 生成されたコードをコピー

Step2までが完了していれば、その下Step3とある箇所に自動でコードが生成されています。こちらがWebサイトに設置するHTMLコードスニペットです。枠内を全て選択し、コピーを行って下さい。

コードをコピー

 

 

[2]取得したソースコードをブログに設置

WordPressにて、ウェジェット編集画面を開きます。[外観 > ウィジェット]

ウィジェット

 

テキストをサイドバーに設置し、テキストボックスに取得したコードを貼り付けます。

テキストボックスに貼り付け

 

「保存」ボタンをクリックすると、Webサイトに反映されます。これにてfeedlyボタンの設置は完了です。

サイドバーにボタン設置完了

参考:feedlyボタンをオリジナル画像にする方法

取得したコードのうち、ボタン画像を表す部分を書き換えることで、オリジナルのボタンを使うことができます。

<a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fthink-the-web.com%2Ffeed%2F’  target=’blank’><img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png‘ alt=’follow us in feedly’ width=’71’ height=’28’></a>

先程feedlyボタン設定ページにて取得したコードのうち、赤く示している部分が画像を指定しています。よって、この部分をオリジナル画像と入れ替えます。

僕が実際に使っている以下の画像に書き換えてみます。

http://think-the-web.com/wp-content/uploads/2015/02/follow-on-feedly.png

サイドバーにオリジナル画像

 

 

指定している画像を変更したことで、オリジナルの画像を設置することができました。しかし、サイズが小さくなってしまっているようです。

 

サイドバーにオリジナル画像表示されたが小さい

 

したがって、次は画像の大きさを変更します。

<a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fthink-the-web.com%2Ffeed%2F’  target=’blank’><img id=’feedlyFollow’ src=’http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png‘ alt=’follow us in feedly’ width=’71’ height=’28’></a>

赤く示している箇所が画像の大きさを表しています。この部分を表示したい画像の大きさにあわせて設定していきます。

サイドバーにオリジナル画像サイズを正す

 

表示したいサイズに変更することができました。こちらにてオリジナル画像を指定する手順は完了です。

サイドバーにオリジナル画像完了

 

RSSの設定・ボタンを設置するまで

 

RSSの設定・ボタン設置は以下の2つの手順で完了します。

 


 1. コードを作成

 2. 作成したコードをブログに設置


 

それぞれ解説します。

[1]コードを作成

RSSボタンを設置するためのコードを作成します。

コードは以下の様な形になります。

<a href=’(自分のブログのRSSフィードURL)’><img src=’(画像のURL)’alt=’RSS’></a>

自分のブログのRSSフィードURLは【RSSリスティング】を使って生成して下さい。

また、RSSボタン用の画像を用意する必要があります。

RSSボタンは公式の素材配布がありませんが、フリー素材を提供しているサイトがいくつか有りますので自身で作るのが難しい場合は積極的に利用すると良いかもしれません。

 

【参考:RSSボタンのフリー素材を提供しているサイト】


 ◯ 【フリー素材.com】http://designsozai.com/item/web/rssicon/

 ◯ 【無料で使えるフリーアイコン素材】http://www.material-land.com/view__2681__0.html

 ◯ 【Curo.jp】http://curo.jp/67


 

[2]作成したコードをブログに設置

今回はRSSのフリー素材を【デザイン素材.com】からお借りしてご説明いたします。

feedlyボタンを設置した時と同じ手順で、[外観 > ウィジェット]より、サイドバーにテキストを設置します。続いて、テキストボックスに生成したコードを入れ込みます。

サイドバーにRSSボタン設置

 

コードの設置が完了すれば、Webサイトに反映されているかと思います。

 

サイドバーにRSSボタン設置完了

 

以上でRSSボタンの設置は完了です。

 

まとめ

 

feedlyやRSSは定期的にユーザーを定期的にサイトに誘致する効果があります。ぜひしっかり設定しわかりやすい位置にボタンを設置して、feedlyとRSSをフル活用していきましょう。

定期的にユーザーに来てもらうには、もちろん継続的な更新・質の高いコンテンツが大前提ですので、それも忘れないようにしておきたいですね。

 

-カテゴリ:Webサービス

みんな使えるWeb活用術 MINWEB

Date: Category: Webソリューション活用
  • このエントリーをはてなブックマークに追加

Webソリューション活用のウェブアクセル

最新記事一覧
カテゴリー

Webソリューション活用のウェブアクセル