【WordPress】ウィジェット内でRSSやソーシャルボタンを横並びに表示する方法

本日、僕もRSSやFeedlyボタンを設置しました。良かったら登録してくださるとうれしいです。

ウィジェット内にRSSボタンやFeedlyボタンの設置は簡単にできたのですが、それらを横並びにして表示するのに思った以上に苦労しました。

おそらく僕と同様に悩んでいる方もいると思いますので、この記事ではソーシャルボタンをウィジェット内で横並びにする方法を紹介します。

ちなみに、ソーシャルボタンに限らず広告や画像でも同じように横並びができます。

RSSボタンのhtmlコードの作り方

RSSボタンの作り方も紹介しておきます。まず、RSSボタンに使いたい画像を準備します。

今ではいろんなボタンが無料で使えますが、僕はこのサイトを使いました。いろんなサイズのボタンが選べるのがうれしいです。

ダウンロードした画像をWordpress上にアップロードします。アップロードはメニュー＞メディア＞新規追加から行います。

画像を追加したあとは、ライブラリからその画像のURLをコピーしておきましょう。

そしたら、下のhtmlコードの必要なところを書き換えれば完成です。RSSのURLは”http://xz4u.com/feed/”といったものです。

<a href="（RSSのURL）"> <img src="（RSS画像のURL）" alt="RSSを購読"> </a>

 

ボタンを横並びにする方法

事前に、各ソーシャルボタンのhtmlコードを準備しておいてください。

twitter、facebook、RSS、Feedlyなどといった、自分がウィジェット内に張り付けたいソーシャルボタンのhtmlコードをメモ帳とかにそれぞれ書いておきます。

横並びにする方法はいくつかあるのですが、今回はCSSを使った方法を紹介します。

下のhtmlコードの必要なところに各ソーシャルボタンのhtmlコードを追加して、それをウィジェットのテキスト欄にコピペすれば完成です。

<div style="float:left;padding-right:10px;">
<!--以下にソーシャルボタンののコードを追加 -->

</div>



<div style="float:left;padding-right:10px;">
<!--以下にソーシャルボタンののコードを追加 -->

</div>


<!--さらに追加したいときはここにコードを追加 --> 


<div style="clear:both;"></div>

 

2つ以上追加したいときも上2つと同じように、一番最後の行の一つ上に下のコードを追加してください。これを繰り返すことでいくつでもソーシャルボタンを追加できます。

<div style="float:left;padding-right:10px;">
<!--以下にソーシャルボタンののコードを追加 -->

</div>

ボタンの数が多すぎて横幅を超えそうなときは自動的に改行されて回り込むようになります。

ちなみに、padding-rightの値を変えることでボタン間の余白幅を設定することもできます。

※レイアウト崩れを防ぐために、最後には必ず<div style=”clear:both;”></div>が必要です。

まとめ

RSSを使っている人ってどのくらいいるのだろう。

僕はRSSを使ったことがないのでこのボタンの必要性がいまいちわからないのですが、ブログには必須ということを聞いて設置しました。

実はFeedlyボタンを設置する前から僕のブログがすでに購読されていました。それもあっていち早くRSSボタンを準備したというわけです。

びっくりしたと同時にほんとにうれしかったです。僕のブログにも少なからず価値を感じてくれる人がいるんだ、と。

これからも頑張って更新していきますのでよろしくお願いします。

 - ブログ