2018年5月16日Amazonや楽天の商品や、Kindle本を紹介するときに便利なカエレバ・ヨメレバ。リンクが生成できて便利ですが、「初期のままだとデザインが気に入らないな」「もうちょっと可愛くしたいな」なんて思ったことはありませんか?自分のブログ用に改めてカスタマイズしたので、CSSを公開します。お役に立てれば嬉しいな。カエレバ・ヨメレバをカスタマイズカエレバヨメレバタイトルリンクの下線を少し離し、本のタイトルの前にアイコンフォントをつけました。ボタンにシャドウをつけて目立つように調整しました。※リンクは「楽天」「Amazon」「Kindle」のみです。「Yahoo!ショッピング」追加しました。ヤフーショッピングのアフィリエイトへの提携方法は「カエレバにヤフーショッピングを追加する方法【画像手順つき】」を参考にしてください。画像も小さく調整しました。カエレバ・ヨメレバカスタマイズ用CSS下記のコードをCSSに追加してお使いください。※カエレバ・ヨメレバ側の設定では「amazlet風-2(CSSカスタマイズ用)」をお選びください。先ほどご紹介したコードをさらにカスタマイズして、自分のブログにあったものを作成してみましょう。#eef4fb;}[/box]赤い#eef4fbをお好きなカラーコードに変更すると、背景色が変わります。auto;}[/box]ピンクの20pxの数字を変えると、角の丸みが変わります。サンプルは5pxで、若干丸みをもたせました。0pxにするか、この行を削除すると角ばります。#FFFを変えると、破線のデザインが変更できます。type="normal"]※ボーダーの種類は下記を参考にしてください。'\f02d';}[/box]青の部分のカラーコードを変えることで、文字色などを変更できます。2点違うところがあるので、上記のコードを見て解説していきます。はじめにでてくるカラーコードはタイトルの下線のカラーコードです。先頭にborder-bottomとある行のカラーコードは下線のものです。最後のでてくるカラーコードは、本のアイコンのカラーコードです。先頭は他にもでてくるcolorですが、下に"FontAwesome"とあります。残りの青色のカラーコードはボタン以外のリンクの色です。「リンクは青だろ!」とか「ブログのカラーは茶色じゃないんだよなぁ」って人は変えてください。おわりに:コピペで簡単にカエレバ・ヨメレバのデザインをカスタマイズできる!いかがでしたでしょうか?サンプルは可愛らしいデザインですが、さらにカスタマイズすることでいろんなブログに溶け込めるものになるかと思います。00:19カエレバのCSS変更使わせて頂きました、ありがとうございます!これ見やすくて良いですね~。カエレバのデザイン変更は、ぱるさんの記事がわかりやすく大変参考になりました。21:24ヨメレバのCSS使わせていただきました。わたしのようなWordpress超絶初心者には本当にありがたかったです。05:36カエレバのCSS変更使わせて頂きました、ありがとうございます!可愛くて気に入ってしまいました。コメントをキャンセルメールアドレスが公開されることはありません。時間IllustratorWEBサービス・アプリフリーランスぱるお家大好き!ずっとお家で過ごしたくて新卒でフリーに。ブロガー・イラストレーター・漫画家・YouTuber等のクリエイター活動をしてます。家にいながら稼ぐ方法を発信中。フリーランス2019/04/02新卒フリーランスから1年。良かったこと・悪かったことを振り返る。