【Blogger】QooQでカエレバを使うためのカスタマイズ【初心者でも簡単にできました】
本ページはプロモーションが含まれています
BloggerにAmazonや楽天、Yahoo!ショッピングのリンクを載せるのに便利な「カエレバ」というサービスがあります。このサービスはAmazonや楽天、Yahoo!ショッピングのリンクを簡単に作成してくれる非常に便利なサービスなのですが、自分が愛用しているBloggerテンプレートの「QooQ」でカエレバを実装すると、ちょっと文字が見づらくなってしまうようでした。そのため、今回は「QooQ」でカエレバを使う際のカスタマイズ方法を紹介します。
参考にしたサイト
こちらのサイトが「カエレバ」というサービスが利用できるページです。自分の貼りたい商品のリンクを検索するだけで利用できるサービスです。詳しい利用方法などもこのページに紹介されています。
カエレバのデフォルトのデザインを変更するためのCSSを掲載してくださっています。自分はこのデザインが非常におしゃれだなと思いましたので、このCSSを利用させてもらいました。
【課題】QooQにそのままカエレバを実装すると文字が見にくかった
自分は、他の多くのブログに掲載されているようなブログパーツっぽくしたいなと思っていたので、mbdbさんのサイトのCSSを活用させてもらいました。記載のとおり、最初にそのまま実装してみたところ以下の画像のように、ボタンの箇所がリンクの色と同じになってしまいました。本当は白抜きのボタンになるはずなので、これだとちょっと見づらいですね。
色付きのボタンに、色付きの文字なので視認性が悪く感じる
【解決策】どのようにして文字が見にくいのを解決したのか
共有頂いているCSSを少しだけカスタマイズして、文字を白抜きにできるように変更しました。具体的には以下のようにしています。（全体のソースはmbdbさんのサイトで確認をお願いします）
【変更前】
.shoplinkamazon a { color:#ffffff; background:#ff9900; }
.shoplinkrakuten a { color:#ffffff; background:#bf0000; }
.shoplinkyahoo a { color:#ffffff; background:#fc1d2f; }
【変更後】
#single-content .shoplinkamazon a { color:#ffffff; background:#ff9900; }
#single-content .shoplinkrakuten a { color:#ffffff; background:#bf0000; }
#single-content .shoplinkyahoo a { color:#ffffff; background:#fc1d2f; }
QooQの記事部分のid属性が[#single-content]となっているようだったので、それを追記した感じです。変更後は以下のようにイメージどおりのリンクになりました。
ボタンの文字が白抜きになり、見やすくなった
まとめ
WordPressだとこのような商品紹介リンクを簡単に追加できるプラグインがあるのですが、Bloggerにはそういう便利なものがないので、「カエレバ」をありがたく活用させてもらいました。QooQのテンプレートを使っていて、「カエレバ」のリンクボタンが見づらくなってしまって、直せないかなと悩んでいる方のためにこの記事が参考になれば幸いです。
