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

2016-08-18WordPress

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

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

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

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

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

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

スポンサーリンク

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

スクリーンショット

PC版

 

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

 

モバイル版

 

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

ソースコード

改変点

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

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

使い方

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

20160818_03

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

あとがき

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

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

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

自己満足の世界です。笑

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