どうも!ウィリスです!
今回ははてなブログにfeedlyのFollowボタンを設置してみようと思う!
もくじ
feedlyとは
feedlyとは、簡単にいうと
ウェブページの更新を知らせてくれる便利ツールや
例えば、俺が次の3つのWebページが好きだったとする
Aブログ Bブログ Cニュース
このとき、毎日毎日
「Aブログは今日更新したやろか」「Bブログはどうやろ」
「Cニュースは速報出たかな」
ってな感じで、更新したか見に行くのはめんどくさい!
こんなとき、feedlyに登録して
Aブログ、Bブログ、Cニュースをフォローしていたら
更新をお知らせしてくれるんや!
新着記事がでるとお知らせしてくれるから
いちいち書くウェブページに更新があるかどうか見に行かなくてよくなる
feedlyはそういう便利ツールってわけや
ブログにFollowボタン付いてる?
![f:id:uxirisu:20170616024222p:plain f:id:uxirisu:20170616024222p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616024222.png)
feedlyを使っている人がもし、「このブログをフォローしたい!」
って思ってくれた時のために
自分のブログにfeedlyのFollowボタンをつけとこう!
feedlyのFollowボタンをつける方法
①feedlyボタンコード作成するで!
まずfeedlyのFollowボタンを作成するためのサイトに行ってみよう!
このリンクを「新しいタブで開く」などで開いておこう
開くと、いろいろ設定する項目現れる
そこに生成したいボタンの情報を打ち込んで行くことになるで!
②ボタンの種類を選ぶんや!
![f:id:uxirisu:20170616024520p:plain f:id:uxirisu:20170616024520p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616024520.png)
まず、どんな形、大きさのボタンが良いか選ぼう!
好みのやつを選んでや!
選んだ時に、選んだボタンの背景がちょっと薄暗くなるくらいのアクションしか起こらないけど、それでOKや
下の方の項目にちゃんと反映されとるで
選択したら下にスクロールして次に進もう
③自分のブログのURLを教えてあげて!
![f:id:uxirisu:20170616024532p:plain f:id:uxirisu:20170616024532p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616024532.png)
お次は自分のブログのTOPページURLを記入するで
もちろん、コピペでOKや
ここで一つ重要な点がある
自分のブログのTOPページURLに「/feed」を
末尾に付け足したものを記入してくれ
例えば、このブログだとTOPページURLが
「/feed」を付け足して
![f:id:uxirisu:20170616024550p:plain f:id:uxirisu:20170616024550p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616024550.png)
というふうにすれば良い!
これが終わったら、また下にスクロールして次の項目に進もう!
④コードが自動生成されるからコピーや!
![f:id:uxirisu:20170616024559p:plain f:id:uxirisu:20170616024559p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616024559.png)
最後のステップや
ここでは、さっき入力した情報を元にFollowボタンのコードが自動生成されとる
ちなみに、ボタンの見本が表示されとるけど、これは②でボタンを選択したものが反映されとるはずや
選択したものじゃないものが表示されてたら②をやり直してみてな
生成されたコードをコピーしよう!
次のはてなブログのある部分に貼り付けるで!
⑤はてなブログのHTML部にコピペするで!
生成したコードは記事中でもフッタでも
好きなところに貼り付けることができる
feedlyを使っている人は、記事をフォローするというよりかは
ブログ自体をフォローすることが多いから記事中にボタンをつけるより
サイドバーやフッタなどに設置するとええやろう
おすすめのFollowボタン設置場所は
サイドバーorフッタのプロフィール欄の下や
ここでは、その場所にボタンを貼る方法を紹介しよう
![f:id:uxirisu:20170616025925p:plain f:id:uxirisu:20170616025925p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616025925.png)
まず、はてなブログのページを開く
ログインすると右上の自分のアイコンが表示されるので
クリックするとこのような一覧が開く
![f:id:uxirisu:20170616030034p:plain f:id:uxirisu:20170616030034p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616030034.png)
ここから「デザイン」を選択してしよう
すると、開いた画面の左側に次のような項目が表示される
![f:id:uxirisu:20170616030121p:plain f:id:uxirisu:20170616030121p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616030121.png)
ここの「サイドバー」を選択しよう
→開いた項目の一番下に「モジュールの追加」という項目がある
![f:id:uxirisu:20170616030226p:plain f:id:uxirisu:20170616030226p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616030226.png)
これをクリックしよう
表示されたページの左側に追加できるモジュールが一覧で表示されとる
この中から「HTML」を探してクリックしてくれ!
![f:id:uxirisu:20170616030313p:plain f:id:uxirisu:20170616030313p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616030313.png)
すると、右側に「タイトル」と「<p>…</p>」という欄が現れる
この「<p>…</p>」の欄にさっき自動生成したコードを貼り付けてみてくれ!
「タイトル」は無記入でOKや!
そのあと、左下の適用を押す
これで「Followボタンサイドバー」が作成された!
戻ってきた画面で、Followボタンの位置を決めてあげないといけない
このままだと、サイドバーの一番下に配置されてしまう
ドロップアンドドラッグで作成した「Followボタンサイドバー」をプロフィールなどの下に移動させよう
![f:id:uxirisu:20170616030602p:plain f:id:uxirisu:20170616030602p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616030602.png)
このブログの場合プロフィール「筆者はこいつや!」の下に移動させた
「Follow@uxirisu…」ってのがFollowボタンやな
これで全て完了!
最後に画面左上の「変更を保存する」をクリックして完了や!
サイドバープロフィール下にfeedlyのFollowボタンが設置される
![f:id:uxirisu:20170616031016p:plain f:id:uxirisu:20170616031016p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616031016.png)
これで、終了!
お疲れ様でした!
![f:id:uxirisu:20170616031350p:plain f:id:uxirisu:20170616031350p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170616031350.png)