photo credit: feedly-500-mil-usuarios via photopin (license)
こんにちわ。47才無職です。
ブログの購読者さんが増えてくれることを期待して、feedlyボタンとRSSボタンを、Stinger5のサイドバーに追加してみました。先人の教えにしたがってやってみたのですが、なかなかうまくいきませんでした。
試行錯誤のうえ何とか形になったので、備忘録として残しておきたいと思います。WordPressで横に並べて表示するというのは、簡単そうで難しいです。本当に大変でした。
スポンサーリンク
feedlyボタンとRSSボタンを並べて実装したい
ネットでブログを読んでいると、feedlyボタンとRSSボタンが綺麗に並んで表示されているのを、よく見かけます。自分のブログでも、まねしてみたいと思いました。
先人の教えに従ってみる
ディーエムガジェットさんの以下の記事を参考にしながら、実装してみました。尚、RSSボタンについては、sabotemさんのボタンを使わせていただきました。ありがとうございました。
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
並べて使おうと、feedlyの購読ボタンっぽいデザインのRSSボタンを作ってみた。ので公開。
うまく表示できない…
ディーエムガジェットさんの解説どおり、「pタグ」で横並びを実現しようとしたのですが、残念ながら私の環境では、横並びにすることができませんでした。
Google先生に教えを乞うたところ、「tableタグ」で横並びを実現できそうでしたので、早速試してみました。
試した結果、横並びで表示することができましたが、不要な縦線が4本入ってしまい、かっこよくありません。こんな感じです。
そこから、試行錯誤が始まりました。
何とか実装できました
再びGoogle先生に聞いてみました。中々答えが見つかりません。半ばあきらめかけていたところ、某氏の猫空さんの記事を見つけました。
Amazonや楽天のアフィリエイトリンク画像を横に並べる簡単な方法
以下の記載を参考にしつつ、微調整することでようやく横にきれいに並べることができました。
<div style="float:left;padding-right:10px;">
アフィリエイト
</div>
……
某氏の猫空さん、本当にありがとうございました！
ブログをやっていくうえで、HTMLやCSSの最低限の知識は持っておいた方がよさそうです。ちなみに、下の本を以前に購入しているのですが、全く読んでいません(笑)早々に読むことにします。
2,360 total views, 10 views today