AFFINGERでカエレバのCSSをカスタマイズする方法をご紹介します。
Style.cssにコードを追加しても反映されず、右往左往したので備忘録として残しておきます。
反映方法は非常に簡単で、方法さえ分かっていれば簡単に好みのデザインにすることができますよ。お試しあれ。
目次で流し読み
AFFINGERでカエレバのCSSをカスタマイズする
さて、まずは今回の記事の目的から。
カエレバってとっても便利ですが、そのまま使っていると見た目がこんな感じでナンセンス。
これを、CSSを追加して以下のような表示にします。
カエレバってなに？
カエレバというのは、Amazonや楽天市場、Yahooショッピングへの商品リンクをひとつにまとめることができるブログパーツです。
例えば、冷凍カリフラワーを買うとしましょう。
楽天ユーザーは楽天で買い、AmazonユーザーはAmazonで買うというように、値段がそれほど変わらず、どの大手通販サイトでも扱っているような商品を購入する場合は、各々いつも使っている馴染みのサービスを使う傾向にあります。
Amazonのリンクしか貼ってなかったーという場合には、楽天ユーザーやyahooユーザーを取りこぼしてしまうので、できればそれぞれへのリンクを表示したいですよね。
それを可能にしたのがカエレバです。
書籍の紹介用のヨメレバというパーツもあります。
＞＞カエレバはこちら
AFFINGERでカエレバをカスタマイズする手順
さて、恐らくこの記事読んでくださってる方は、カエレバが何だとかそんなことよりも、Style.cssにカスタマイズ追加しても変わらないんだけど…ってことでお悩みなのかと思います。
私も子テーマのStyle.cssに追加してみたり、親テーマのStyle.cssに追加してみたり、キャッシュのせいかとキャッシュをクリアしてみたり、色々試しましたがうまくいきませんでした。
AFFINGERの場合は追加CSSを編集
さくっと結論からいきますね。
AFFINGERの場合、追加CSSを編集するとカスタマイズが反映されます。
AFFINGER4もAFFINGER5も試したので、恐らくこの方法で上手くいくはず。
追加CSSはどこにあるかというと。
WP管理画面⇒外観⇒カスタマイズ
画面遷移した先の左側一番下にあります。
そこにコピペで使えるCSSをえいっと貼るとこの通り。
AFFINGER5のカスタマイザーを停止してみたけど…
ちょっと余談ですが、AFFINGER4の公式に以下のような記事がありました。
AFFINGER4でオリジナルのCSS（スタイル）が効かない反映されない
ものすごくかいつまんで纏めると、オリジナルカスタマイザーとランキングCSS停止すればオリジナルのCSSが反映されるよってことのようです。
これをやってうまくいったという方がいたので試してみたのですが…。
うまくいきませんでした。
オリジナルカスタマイザーとランキングCSSを停止すると、これまでのカラー設定がなかったかの様に純白のサイトに戻ってしまいます。
驚きの白さ
まぁテストサーバーなので停止してStyle.cssにカスタマイズ追加してみたのですが…
反映されなかった。。
うーんこの辺はCSSとか詳しい方の方が強そうですね。
取りあえずAFFINGERの場合は追加CSSにカスタマイズコピペすればOKです！
カエレバのカスタマイズおすすめ
コピペで使えるCSSを載せてくださっているサイト様いくつか紹介します。
①ベーシックなカスタマイズ
CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]
②シンプルで洗練されたカスタマイズ
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！
③可愛らしいカスタマイズ
出典：Kanamii
カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ
まとめ
カエレバカスタマイズ方法
- WP管理画面⇒外観⇒カスタマイズ⇒追加CSS
- 追加CSSにカスタマイズをコピペ
コピペで使えるCSSを置いてくださってるサイトさんはたくさんあるので、好みのカスタマイズにしてみてくださいね。