スポンサーリンク

STINGER・AFFINGERカスタマイズ 備忘録(WordPress)

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

投稿日:2018年1月23日 更新日:



記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。
カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。
利用されている方も多いですよね。

当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。

ここでは、コピーペーストだけで「カエレバ・ヨメレバ」のカスタマイズができるCSSコードを3種のカラーパターン別にご紹介します。
デザインは当ブログの見出しに合わせてステッチ風のラインを入れました。

カエレバ ピンクVer(Amazon・楽天・Yahooショッピング対応)

ヨメレバ ピンクVer(Amazon・Kindle・楽天ブックス対応)

表示確認

上記は、実際に動作する「カエレバ・ヨメレバ」です。
Google Chromeで「F12」キーを押すとパソコンからスマホやタブレット各端末での表示確認ができます。(切り替え後は「F5」キーでリロードしてください)

Kanami
偶然見つけたかわいいスイーツと大切なお友達が出版されているおすすめ書籍をご紹介しています♪

 

カエレバ・ヨメレバ グリーンVer

カエレバ・ヨメレバ パープルVer

Kanami
賑やかすぎて主張が強いなぁ。と感じる場合は、ボックス全体の背景色を白(#fff)にすることで比較的シンプルな表示に。ステッチ風のラインを消したり、ご自身のサイトに合わせたお好きなカラーで自由自在にカスタマイズすることも可能です。

Kanami
カラーのチョイスに迷ったときは、ブラウザ上のカラーコードを簡単に知ることができるカラーピッカーが便利ですよ。
2,019view
WordPressカスタマイズに役立つ2大アイテム!おすすめカラーピッカーと「ピクセル定規」

WordPressのカスタマイズをしていると、「ここは何ピクセル位かな?」とか、「この部分と同じ色を他の部分でも使いたいなぁ」と思うことがありませんか? ここでは、私が長年愛用している2大アイテム!( ...

スポンサーリンク

カエレバ・ヨメレバのコード取得の際の注意事項

これからご紹介するCSSコードは、カエレバ・ヨメレバのブログパーツ生成画面のデザインを「amazlet風(改)-1」に設定して生成されるコードに対応しています。

その他のコードの場合は表示が崩れますのでご注意ください。

設定項目の「rel=なし」「rel=nofollow」は任意で設定されてください。
こちらのページが参考になります。
参考カエレバの「rel=nofollow」の意味と解説/雑記ブログ卒業

カラーカスタマイズ用CSSコード解説

「カスタマイズコードをコピペしただけでは、どのようなカスタマイズを行っているのかわかりにくい」「どんな風にコードを書いているのか知りたい」といったお声を耳にすることがあります。

カラー別にご紹介する「カエレバ・ヨメレバ」の各コードは全て応用できますので、こちらでは「カエレバ ピンクVer」のコードのみ細切れの解説つきで掲載していきます。

「解説はいらないよ~」という方は、こちらに一括でコピーできるコードを掲載していますのでお使いになってください。

ポイント

コードを追加する場所は、WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」(子テーマ)の最下部です。
各項目ごとにコピーペースト→更新→カエレバを表示している画面を「F5」キーでリロードしていくと、どの部分のCSSコードがどんな風に反映されているかの確認ができます。
カラーコード(#******)の変更が可能な部分は全て/**/で囲んだコメントを入れてあります。

Kanami
変更が反映されない場合はブラウザのキャッシュをクリアしてから「F5キー」で再度確認してみてくださいね。

ボックス全体

カエレバのボックス全体のスタイルを指定するコードです。

  • 背景色を#fff1f5に指定 変更可
  • 内側の余白を上20px、左右20px、下10pxに指定
  • 外側の下の余白を40pxに指定
  • ステッチ風ボーダーを太さ2px、カラー#d8b1ffに指定 変更可
  • ボックスの角丸を5pxに指定
  • ボーダーの周りの影を#fff1f5(背景色と同じコード)に指定 変更可

商品名

右上商品名のスタイルを指定するコードです。

  • 文字サイズを16pxに指定
  • 行の高さを22pxに指定
  • 文字を太字に

クレジット表記部分

商品名の下のカエレバのクレジット表記部分のスタイルを指定するコードです。

  • リンク部分の文字サイズを8pxに指定

Amazonボタン

Amazonのリンクボタンのスタイルを指定するコードです。
マウスホバー時は、AFFINGER4の記事下にあるデフォルトのソーシャルボタンと同じように動作するようにしました。

  • ボタンの幅を31%に指定
  • 文字サイズを16pxに指定
  • 文字を太字に
  • リンク文字の下線を非表示に
  • 余白入りで要素を横並びにするコード(inline-block)
  • 文字を中央寄せに
  • 内側の余白を上下10px、左右0に指定
  • 外側の下の余白を5pxに指定
  • 文字色(ボタンテキスト色)を#fffに指定 変更可
  • ボタン背景色を#d8b1ffに指定 変更可
  • ボタンの影を3pxのカラー#bf7effに指定 変更可
    ※背景色よりも3段階暗い色がおすすめです。便利なカラーツール(「ENTER A COLOR」をクリックしてカラーコードを入力)
  • ボタンの角丸を5pxに指定
  • マウスホバー時にボタンを1px下にずらす
  • マウスホバー時のボタンの影を2pxのカラー#bf7eff(ボタンの影と同じコード)に指定 変更可

楽天・Yahooショッピングボタン

全体のスタイルはAmazonボタンと同じですが、Yahooショッピングボタンの文字サイズのみ小さめの14pxで指定しています。

Kanami
3種それぞれのボタンカラーを変えることもできますよ♪

タブレット・スマホ

タブレットとスマホ表示は、このようなデザインになります。

上記デザインのスタイルが適用されるデバイス幅は最大1100pxとしています。

デベロッパーツールでの端末別の表示確認の際、iPad Proでは表示されるコンテンツ幅の関係でどうしても3つ目のボタンが落ちてしまうのでやむなくそのようにしました。

実際の端末で表示確認ができる方は、数値を変更してくださっても大丈夫です。

  • 商品のサムネイル画像(左側)の幅を40%に指定
  • Amazon、楽天、Yahooショッピング各ボタン(右下)の幅を100%に指定

コピーペースト用「カエレバ・ヨメレバ ピンクVer」

カエレバ

ヨメレバ

コピーペースト用「カエレバ・ヨメレバ グリーンVer」

カエレバ

ヨメレバ

コピーペースト用「カエレバ・ヨメレバ パープルVer」

カエレバ

ヨメレバ

以上、「カエレバ・ヨメレバ」のカスタマイズ用CSSコードを3種のカラーパターン別にご紹介しました。

気に入っていただけた方はぜひお試しください♪

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

スポンサーリンク

-STINGER・AFFINGERカスタマイズ, 備忘録(WordPress)

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.