class="post-template-default single single-post postid-1494 single-format-standard" >

Virtualist Dreamer

Virtualistの後ろに影は無い 僕は幻影にすぎない

Thanks

[Stinger5]苦労しました!FeedlyボタンとRSSボタンの追加

投稿日:4月 17, 2015 更新日:

Stinger5のfeedlyボタン、RSSボタンの設置photo credit: feedly-500-mil-usuarios via photopin (license)

こんにちわ。47才無職です。
ブログの購読者さんが増えてくれることを期待して、feedlyボタンとRSSボタンを、Stinger5のサイドバーに追加してみました。先人の教えにしたがってやってみたのですが、なかなかうまくいきませんでした。

試行錯誤のうえ何とか形になったので、備忘録として残しておきたいと思います。WordPressで横に並べて表示するというのは、簡単そうで難しいです。本当に大変でした。

スポンサーリンク

feedlyボタンとRSSボタンを並べて実装したい

ネットでブログを読んでいると、feedlyボタンとRSSボタンが綺麗に並んで表示されているのを、よく見かけます。自分のブログでも、まねしてみたいと思いました。

先人の教えに従ってみる

ディーエムガジェットさんの以下の記事を参考にしながら、実装してみました。尚、RSSボタンについては、sabotemさんのボタンを使わせていただきました。ありがとうございました。

ブログイメージ1

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法

 

 

 

ブログイメージ2

並べて使おうと、feedlyの購読ボタンっぽいデザインのRSSボタンを作ってみた。ので公開。

 

 

 

うまく表示できない…

ディーエムガジェットさんの解説どおり、「pタグ」で横並びを実現しようとしたのですが、残念ながら私の環境では、横並びにすることができませんでした。

Google先生に教えを乞うたところ、「tableタグ」で横並びを実現できそうでしたので、早速試してみました。

試した結果、横並びで表示することができましたが、不要な縦線が4本入ってしまい、かっこよくありません。こんな感じです。

ボタンイメージ

そこから、試行錯誤が始まりました。

何とか実装できました

再びGoogle先生に聞いてみました。中々答えが見つかりません。半ばあきらめかけていたところ、某氏の猫空さんの記事を見つけました。

ブログイメージ3

Amazonや楽天のアフィリエイトリンク画像を横に並べる簡単な方法

 

 

 

以下の記載を参考にしつつ、微調整することでようやく横にきれいに並べることができました。

<div style=“float:left;padding-right:10px;”>
アフィリエイト
</div>
……

某氏の猫空さん、本当にありがとうございました!

ブログをやっていくうえで、HTMLやCSSの最低限の知識は持っておいた方がよさそうです。ちなみに、下の本を以前に購入しているのですが、全く読んでいません(笑)早々に読むことにします。

 1,037 total views,  6 views today

<

<

-Thanks
-, , , ,

執筆者:


comment

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

関連記事

備忘録:Stinger5でお世話になった記事一覧(主にスマホ関連)のアイキャッチ

備忘録:Stinger5でお世話になった記事一覧(主にスマホ関連)

photo credit: Viktor Hanáček via picjumbo こんにちわ。47才無職です。 スマホの表示を重点的にカスタマイズし、見やすくしてみました。その他にもユーザビリティの…

続きを読む

 1,033 total views,  4 views today

【Stinger5】ブログをカスタマイズした際にお世話になった記事のアイキャッチ

【Stinger5】ブログをカスタマイズした際にお世話になった記事

photo credit: 秋英 Cosmos via photopin (license) こんにちわ。47才無職です。 季節も春になったことですし、心機一転、ブログを少々リニューアルしてみました。…

続きを読む

 1,093 total views,  3 views today

備忘録:Stinger5でお世話になった記事一覧ですのアイキャッチ

備忘録:Stinger5でお世話になった記事一覧です

photo credit: Viktor Hanáček via picjumbo こんにちわ。47才無職です。 Stinger5のカスタマイズも一段落したので、備忘録的に参考にした記事をアップしてお…

続きを読む

 1,015 total views,  6 views today

【Stinger5】スマホ関連カスタマイズ完了しましたのアイキャッチ

【Stinger5】スマホ関連カスタマイズ完了しました

photo credit: Sandy River Show Swine via photopin (license) こんにちわ。47才無職です。 スマホ向けのカスタマイズがほぼ完了しました。ようや…

続きを読む

 990 total views,  3 views today

発達障害の感謝。Google先生から初の報酬が振り込まれましたのアイキャッチ

発達障害の感謝。Google先生から初の報酬が振り込まれました

photo credit: 10 via photopin (license) こんにちは。47才無職です。 ブログを書きはじめてからかなり経ちますが、先日Google先生から初の報酬をいただきました…

続きを読む

 1,032 total views,  5 views today