私がサイドバーにRSSボタンを追加してみた3つの手順(WordPress stinger3)

いつもご購読ありがとう御座います。まなびやの学です。

先日、feedlyのボタンを追加する2つの記事を書きました。

記事直下にfeedly設置失敗

その後サイドバーに設置成功

とりあえず、feedlyは設置できましたが、なんだか一つだけだと淋しそう…

2014-08-20_01h22_09

そこで、隣にRSSボタンも置いてみようと思いました!

同じ穴のムジナですもんね!(←完全なる誤用)

 

そこで

google老師に訊いてみたところ、「こんな方法、あんな方法、どんな方法?そんな方法!」がアルデヨ、アルデヨ、アルデンテ~!とのお達し。

なんだかよく分かりませんが、要約すると次の3つの手順が必要とのこと。

1.RSSボタン画像の準備

2.サイトの設置したい位置に、画像とRSSフィードのリンクを設定

3.サイズバランスを調整

ということで、実際に私が設置した内容を公開したいと思います。

なお、内容はかなり不十分です。

ちゃんとした記事をお読みになりたいのなら、他のブログをご参照されることを強くオススメします^^

と、予防線を張ったところで…

 

RSSボタン画像の準備

 

これは、なんと無償でRSSボタンの画像を配布していただいているサイト様を見つけたので、ポチらせていただきました。

sabotem blog様

上記サイトでは、この様なボタン画像をzipファイルでフリーダウンロードできます。

20130819071904

使わせて頂きました!ありがとう御座います!!

(ちなみに、当サイトでは一番左上の画像を使用しております)

 

サイトの設置したい位置に、画像とRSSフィードのリンクを設定

 

さて、ここからが本番です。

難しい手順では無いのですが、記事だけ読むと面倒くさ~く、まぶたが重~くなってくるので、実際に設定しながらが良いかも知れません。

画像のアップロード

まず、先ほど入手した画像を、ブログのサーバにアップロードします。

手順は、メディア⇒新規追加 です。

2014-08-20_02h11_31

 

画像のURLをコピー

次ぎに、アップロードした画像のURLをコピーします。

2014-08-20_01h29_20

コピーしますが、また別のテキストをコピーしますので、とりあえず「メモ帳」にでもURLを貼り付けておきます。

 

サイトの設置したい位置に移動

今から設定箇所にテキストを入れていくので、そこへ移動します。

私の場合サイドバーでしたので、外観⇒ウィジェット でテキストを選びました。

2014-08-20_02h20_23

 

画像とRSSフィードのリンクを設置

ここからテキストを打ち込んでいきますが、内容は次の様になります。

<a href=’自分のブログURL/feed’ target=’blank’><img id=’RSSFollow’ src=’画像のURL‘ alt=’follow us in RSS’ width=’画像の横幅‘ height=’画像の高さ‘></a>

赤字で書いた部分は、自分で入力する必要があります。

私のサイトの設定を載せておきますので、コピーしていただいて、上記赤字部分の内容を適宜変えていってください。

 

 

赤字箇所の意味について、せっかくなので順番に内容を確認していきましょう。

①自分のブログURL

まず知っておかなければならないのは、サイトのRSSは、ブログURL/feed というアドレスで出力されるということです。

当然、ブログURLは各自のサイトにより異なりますので、確認のうえ記入が必要です。

分からない場合は、ブログのトップページに行き、そこのURLを貼ればよいでしょう。

ちなみに、当ブログでは、http://manabiyablog.comがブログURLとなっています。

 

②画像のURL

これは先ほどコピって、「メモ帳」に貼り付けておいたやつです。

この部分に上書きしてください。

 

③画像の横幅・高さ

画像の横幅と高さを数字で指定できます。

ここは、各自のサイトのデザインにより調整が必要です。

詳しくは次にみていきます。

とりあえず、分からなければ変更せずに先に進みましょう。

 

以上、ここまで出来たら、いったん保存し、実際に画像が表示されているか、リンクが正常かを確認しましょう。

問題があれば、先ほどまでの設定(特にURL)に間違いがある可能性が高いです。

入力ミスが無いか、確認してみましょう。

表示もリンクも問題なければ、次にサイズ調整に移ります。

 

サイズバランスを調整

 

サイズバランスの調整に関しては、各ブログ主さんのセンスに依存しますので、特に正解があるわけではありません。

私もこのあたり、センスが無いのでうんちくを語るのは辞めにして、自分の設定したコード内容を貼り付けます。

 

私の場合、feedlyのボタンと並列横並びに置きたかったので、この様な配置になりました。

2014-08-20_01h37_47

中に不自然なスペース(空白)がありますが、これは位置調整のためにわざと入れたものです。

たぶん、スペースの使い方としては間違えていますし、スペースの数も無駄に多いので見習わないでください^^

これで、こんな感じになりました。

2014-08-20_01h39_15

もっとキレイに幅寄せをしたかったのですが、そしてそれはきっとCSSで出来るのでしょうが、持ち前のO型気質を活かして、「もうええわ」となりました。残念!!なむ~。

コメントを残す

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