いつもご購読ありがとう御座います。まなびやの学です。
先日、feedlyのボタンを追加する２つの記事を書きました。
とりあえず、feedlyは設置できましたが、なんだか一つだけだと淋しそう…
そこで、隣にRSSボタンも置いてみようと思いました！
同じ穴のムジナですもんね！（←完全なる誤用）
そこで
google老師に訊いてみたところ、「こんな方法、あんな方法、どんな方法？そんな方法！」がアルデヨ、アルデヨ、アルデンテ～！とのお達し。
なんだかよく分かりませんが、要約すると次の３つの手順が必要とのこと。
１．RSSボタン画像の準備
２．サイトの設置したい位置に、画像とRSSフィードのリンクを設定
３．サイズバランスを調整
ということで、実際に私が設置した内容を公開したいと思います。
なお、内容はかなり不十分です。
ちゃんとした記事をお読みになりたいのなら、他のブログをご参照されることを強くオススメします＾＾
と、予防線を張ったところで…
RSSボタン画像の準備
これは、なんと無償でRSSボタンの画像を配布していただいているサイト様を見つけたので、ポチらせていただきました。
上記サイトでは、この様なボタン画像をzipファイルでフリーダウンロードできます。
使わせて頂きました！ありがとう御座います！！
（ちなみに、当サイトでは一番左上の画像を使用しております）
サイトの設置したい位置に、画像とRSSフィードのリンクを設定
さて、ここからが本番です。
難しい手順では無いのですが、記事だけ読むと面倒くさ～く、まぶたが重～くなってくるので、実際に設定しながらが良いかも知れません。
画像のアップロード
まず、先ほど入手した画像を、ブログのサーバにアップロードします。
手順は、メディア⇒新規追加 です。
画像のURLをコピー
次ぎに、アップロードした画像のURLをコピーします。
コピーしますが、また別のテキストをコピーしますので、とりあえず「メモ帳」にでもURLを貼り付けておきます。
サイトの設置したい位置に移動
今から設定箇所にテキストを入れていくので、そこへ移動します。
私の場合サイドバーでしたので、外観⇒ウィジェット でテキストを選びました。
画像とRSSフィードのリンクを設置
ここからテキストを打ち込んでいきますが、内容は次の様になります。
<a href=’自分のブログURL/feed’ target=’blank’><img id=’RSSFollow’ src=’画像のURL‘ alt=’follow us in RSS’ width=’画像の横幅‘ height=’画像の高さ‘></a>
赤字で書いた部分は、自分で入力する必要があります。
私のサイトの設定を載せておきますので、コピーしていただいて、上記赤字部分の内容を適宜変えていってください。
<a href='https://manabiyablog.com/feed' target='blank'><img id='RSSFollow' src='https://manabiyablog.com/wp-content/uploads/2014/08/rectangle-volume-big_2x.png' alt='follow us in RSS' width='150' height='60'></a>
赤字箇所の意味について、せっかくなので順番に内容を確認していきましょう。
①自分のブログURL
まず知っておかなければならないのは、サイトのRSSは、ブログURL/feed というアドレスで出力されるということです。
当然、ブログURLは各自のサイトにより異なりますので、確認のうえ記入が必要です。
分からない場合は、ブログのトップページに行き、そこのURLを貼ればよいでしょう。
ちなみに、当ブログでは、https://manabiyablog.comがブログURLとなっています。
②画像のURL
これは先ほどコピって、「メモ帳」に貼り付けておいたやつです。
この部分に上書きしてください。
③画像の横幅・高さ
画像の横幅と高さを数字で指定できます。
ここは、各自のサイトのデザインにより調整が必要です。
詳しくは次にみていきます。
とりあえず、分からなければ変更せずに先に進みましょう。
以上、ここまで出来たら、いったん保存し、実際に画像が表示されているか、リンクが正常かを確認しましょう。
問題があれば、先ほどまでの設定（特にURL）に間違いがある可能性が高いです。
入力ミスが無いか、確認してみましょう。
表示もリンクも問題なければ、次にサイズ調整に移ります。
サイズバランスを調整
サイズバランスの調整に関しては、各ブログ主さんのセンスに依存しますので、特に正解があるわけではありません。
私もこのあたり、センスが無いのでうんちくを語るのは辞めにして、自分の設定したコード内容を貼り付けます。
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttps%3A%2F%2Fmanabiyablog.com%2Ffeed' target='blank'><img id='feedlyFollow' src='https://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='150' height='60'></a> <a href='https://manabiyablog.com/feed' target='blank'><img id='RSSFollow' src='https://manabiyablog.com/wp-content/uploads/2014/08/rectangle-volume-big_2x.png' alt='follow us in RSS' width='150' height='60'></a>
私の場合、feedlyのボタンと並列横並びに置きたかったので、この様な配置になりました。
中に不自然なスペース（空白）がありますが、これは位置調整のためにわざと入れたものです。
たぶん、スペースの使い方としては間違えていますし、スペースの数も無駄に多いので見習わないでください^^
これで、こんな感じになりました。
もっとキレイに幅寄せをしたかったのですが、そしてそれはきっとCSSで出来るのでしょうが、持ち前のO型気質を活かして、「もうええわ」となりました。残念！！なむ～。
[amazonjs asin=”4883379248″ locale=”JP” title=”WordPressレッスンブック HTML5&CSS準拠”]
