simplicityの子テーマにコピペする「カエレバ」ボタンリンク化CSS

私はwordpressでsimplicityというテンプレートを使ってこのサイトを作っています。碌な知識のない私にも優しいのでお気に入りです。そんな私のサイトですが、記事の合間にアフィリエイトリンクをはらせてもらって、見に来て下さるお客様から時々お小遣いを貰っています。最近、そのアフィリエイトリンクを見やすくしてくれる「カエレバ」「ヨメレバ」というこれまた凄いブログパーツを見つけまして、私も利用させて貰う事にしました。で、その見た目を更に判りやすくボタンに出来るCSSが公開されていたので私もさっそく利用しました。が、「紀伊国屋」さんや「価格コム」など他のボタンも出せるようにしたくて、その分のソースも追加しました。

simplicityカスタマイズ

スポンサーリンク

simplicityとは

わいひら氏の作られているとてつもなく素晴らしいwordpress用のテンプレートです。このテンプレートに出会うまでは色々と浮気を繰り返しましたがw今は一筋です。

「カエレバ」「ヨメレバ」とは

アフィリエイトでお小遣いが欲しいなあと思っている私のような素人にも優しいアフィリエイトリンクのブログパーツです。見た目もよくなりますし、気に入っています。お小遣いが増えるかどうかはわかりませんが、今後使う予定です。

ちなみに「カエレバ」は物がメインで、「ヨメレバ」は書籍に特価したブログパーツです。

「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

「ヨメレバ」ブログパーツは、ブログ上で書籍を紹介するためのブログパーツです。アマゾン、楽天ブックスなどの複数のブックショップへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

CSSに張るコード

参考にしたのは「下町メダカ日和」さんの情報です。こちらで公開されていたCSSコードを張るだけでボタンリンクに変更できました。感謝感謝です。

しかし、先述した通り、私は他のボタンも追加したかったので、「下町メダカ日和」さんで公開されているコードに「紀伊国屋」「honto」「価格コム」「ベルメゾン」「セシール」のタグもちらっと書き加えてみました。同じようにしたい方は以下のCSSコードを「simplicity」子テーマのCSS(外観→CSS編集)にコピペしてみてください。(本体ではなく子テーマに!でないと本体のバージョンアップで消えちゃうので)

2016/7/29
「e-hon」タグも追加しました。

2017/2/21
「楽天kobo」タグを追加しました。

CSSを張った結果

上のCSSタグを貼付けた結果です。まずはカエレバ。アフィリエイト申請がまだ通ってないものや取り扱いがない商品の場合はリンク切れになります。見本なのでリンクボタンを全部出すようにしたらこんな風になりました。見やすいですね。

取り扱いされていないものも中にはあります。そう言うときは「カエレバサイト」でチェックを外せば良いだけです。

つづいてヨメレバ。

2016/7/29
「ヨメレバ」に「e-hon」も追加しました。こんな風になります。

2017/2/21
「ヨメレバ」に「楽天kobo」タグも追加しました。こんな風になります。

最後にひとこと

リンクの見せ方を工夫するだけでこんなにも判りやすくなるんですね。テンプレートを作っちゃう人もブログパーツを作っちゃう人も改造できちゃう人も、皆様凄いです。そして使わせてもらえる私は幸せです。ありがとうございました!

ここまでお読み下さり、ありがとうございました。

スポンサーリンク

フォローする

関連するかもしれない記事