CSSコピペでカエレバ・ヨメレバをカスタマイズ【CSSデザインサンプル】

2016-12-18WordPress

こんにちは、とみーです。

ブロガーにとって外せないツールとなっているカエレバヨメレバ
私も愛用しています。

スタイルシートで自分好みにデザインを変えられるので、自分のブログに合わせやすいですよね。

そんなカエレバ、ヨメレバですが・・・今回、わたしもデザインを作成してみました!

参考にしたサイトはこちら。
一から作成するのは大変なので、非常に助かりました。ありがとうございます。

カエレバ・ヨメレバのデザインをCSSコピペで簡単カスタマイズ!(レスポンシブver.1) – イロイロひとりごと。

ブログで商品を紹介するときに、Amazonや楽天のリンクを貼りたいときがありますよね。 そんなときは「わかったブログ」の かん吉さんが作った、Amazonも楽天も両方のリンクを同時に貼れちゃう便利なツール「カエレバ」と「ヨメレバ」を使いましょう! すごく便利なので、私も愛用していますが、デザインをカスタマイズしてもっとおしゃれに商品を紹介しちゃいましょう(*´∀`*) カエレバ・ヨメレバは下記サイトです。 ⇒ 商品紹介ブログパーツ カエレバ ⇒書籍紹介ブログパーツ ヨメレバ Amazonアソシエイトを登録しなくても、もしもアフィリエイトに登録すれば報酬も受け取りやすいのでオススメです。 はてな…

スポンサーリンク

カエレバ・ヨメレバのデザインカスタマイズ

スクリーンショット

PC版

 

PC版だとカーソルを合わせた際に背景色がアニメーションで変化します。

 

モバイル版

 

もっちさんのコードを流用したので、全てのショップリンクに対応しています。
スクリーンショットでボタンが3つしかないのは、私がそのショップにしか対応していないためです・・・。あれこれ登録するのってめんどくさいよね・・・。

ソースコード

改変点

  • レスポンシブ対応
  • 商品リンク(全体)が左寄りになっていたのを中央に(レスポンシブ対応にしたのでスマホ表示の場合のみとなります)
  • ショップリンクボタンも出来るだけ中央になるように調整(完全に中央ではないけれど、パッと見分からない程度にはなってます)

主にこの3点を重点に調整しました。

使い方

カエレバ、ヨメレバのデザインでamazlet風-2(CSSカスタマイズ用)を選択します。

20160818_03

あとは上記のソースコードを自分のブログのスタイルシートにコピペすればOK!
WordPressなら 外観 > テーマの編集 > style.css です。

あとがき

すっごいすっごいシンプルなのが作りたかったんです!

けれど、シンプルすぎるのも味気ないと思い、マウスオンでちょっとオシャレに背景色を変化させてみました。
前々から、にゅっと出てくる背景色がやりたかったので今回心血注ぎました。笑

でも、どのブログサイトでも大半のユーザーがモバイルユーザーのため、あまり日の目を浴びません(´・ω・)

自己満足の世界です/(^o^)\

ちなみにマウスオンの背景色はブランドカラーそのままだとキツイ色味なため、少し透過させて色味を抑えています。
rgba()の0.7の数値を1に変更すれば元の色になりますので、お好きにカスタマイズしてくださいね!