STINGER3のサイドバーにfeedlyボタンを設置してみた

      2016/07/08

feedlygazou

情報を収集する、今はGoogle Chrome(グーグルクローム)のブックマークに沢山入っているサイトやブログをいちいち読みに行っていますが、楽しみにしているブログが更新されていなかったりすると少し残念に思ってしまいます。

そんな事を解決するのがRSSだと知りました、RSSを使うと更新通知がくるようで登録してあるブログやサイトが更新をするとお知らせしてくると言う物。

めちゃ便利じゃん!

STINGER3に購読ボタンをサイドバーに設置

なんで今まで使ってなかったのかが不思議、その中で「フィードリー」というRSSのサービスがグーグルクロームの拡張機能だと知りまたビックリ早速使いたいと思ったわけです。

で、使いたいと思ったけど例のごとく何をしたら良いのやらわからないので少しばかりの検索の旅。

検索っていいね、検索して解決する事が全部記事になっちゃうし(笑)

手始めにfeedlyに登録して使ってみる

サイトこちらね

出て来たサイトの真ん中の緑色した四角をクリック↓

feedly1

始めるって書いてあるところをクリックしたら、次はOPMLファイルをインポート(緑色の文字)をクリックしてみる↓

feedly2

googleとサインアップをクリックする(青い部分)、但しグーグルのアカウントを持っている場合なので、持ってない方はサクッとグーグルのアカウントを取りましょう、それ以外の方法は自分で検索してください。

feedly3

googleアカウントでログインする

feedly4

アカウントが沢山あるけど、メインで使うアカウントでログインしました。

ログインしたら下の画像が出てきます、よくわからないが、「自分だけ」にして承認した。

feedly5

すると、グレーの表示が出た、英語がわからないので翻訳したら「タブを閉じろ」と出て来たので閉じます。

feedly6

これで一応登録出来たようです・・本当か??

とりあえずの使い方

とりあえず使えるようになりたいのでチャチャとやってみた。

使い方として左側にある、「コンテンツを追加」に読みたいブログのURLを入れる

feedlyset1

上の画像の赤枠にいつも楽しみにしている「わかったブログ」さんのURLをとりあえず入れてみることにして、ENTERキーを押したら出ました!

feedlyset3

ほ~シンプルでスッキリとしていて見やすい表示で良いですね。

なるほど、ここに追加追加でドンドン登録していけば良いと言うことがわかりました。

詳しい使い方は後日また調べるとします。

装飾物が大好きなので早速自分のブログが購読して貰えるかどうかはお構いなしに、ボタンを設置したくなりました。

こういうやつね↓

feedlybutton

まぁいつもの事なんですが、やりたい事はあるけど、やり方がいつもわかりませんw

こんな時は検索です、ワードを入れて検索すると5秒で出ました~、きましたね~わかりやすい解説ありがとうございます。

設置するためのボタンを作る

サイトにボタン作成のページがありますのでクリック

Feedlyボタンの作成

feedlybotan1

英語・・・だと思ったらすぐに日本語になりました。

どっちにしても簡単な3ステップで作業が進みます。

ステップ1 あなたのデザインを選択してください(ボタンの事です)

ノートPCで画面の小さい方は少し下へスクロールしてください、ちなみに僕はノートで小さいのでスクロールしないとステップ1が見えていません。

ここで自分に合いそうな素敵なボタンデザインを選んでクリックする。

feedlybotan2

ステップ2はあなたのフィードのURLを挿入します。

僕の場合はワードプレスなので「http://lifefrom45.net/feed/」と入れれば良いみたい。

feedlybotan3

ステップ3としてコピーしてHTMLコードスニペットを埋め込むと出てきますが、下の画像の赤い枠内にあるボタン用のコードを全部コピーしておけば良いのです。

feedlybotan4

さて、ボタンの用意が出来ました、ちゃんとコピーしたコードはメモ帳などにペーストしてあるでしょうか?

ここから先は、「えけこのくるる」さんのご指示通りに作業を進めます、そうしないと無知な僕にはどうする事も出来ません。

サイドバーにボタンを設置する方法

サイドバーの検索窓の下に表示させますと「えけこのくるる」さんがおっしゃってますので仰せの通りに行います、またサイドバーに設置するのを私も望んでおります。

サイドバー以外に設置したい方は自力で検索し直してください。

進めます。

管理画面(ダッシュボード)→外観→テーマ編集→右側にある「サイドバー(sidebar.php)」の8行目。

feedlybotanset1

1,2,3の順番でクリックすれば出てきますからね~。

feedlybotanset3

8行目ですね、上の画像の赤枠部分がそうです、<?php get_search_form(); ?>とありますね。

ちなみに検索窓って見てみるとこういう奴ね(下の画像)グレーの横長四角に黒四角がくっついているやるが「検索窓」

feedlybotanset2

上の画像の赤枠の所にボタンを配置しようとしているわけですよー。

8行目の<?php get_search_form(); ?>の下に、ボタンのコード、先ほどコピーしたコードを貼るだけです・・と書いてあるので素直にやってみる。

feedlybotanset4

上の画像は実際にコードを貼り付けてみた直後です(赤枠の中がコード)

もちろん、上から下まで先にコピペしてバックアップは取ってから行いましょうね。

ドキドキしながら「更新ボタン」を押してみる。

恐る恐る、ブログの表示を覗いてみたらこんなん出来ましたー↓

feedlybotanset5

大成功でした。

ありがとう、ありがとう、ありがとう~。

画像を見るとわかるのですが、検索窓とボタンに隙間が全く無く、くっついているんでこれが嫌な方は、8行目とボタンのソースコードの間に「<br />」を入れると空間が出来ます。

実際にやったら出来ました。

botanseto

ありがと~ありがと~ありがと~~

編集後記

検索っていいね、わからない事がどんどん解決していきますね。

情報提供してくださった先輩方に頭が下がります。

ドンドン素敵な感じでブログが仕上がりつつ、それがネタになって記事が増えていきます

 - STINGER3カスタマイズ