テーマご購入後はメールでの無料サポートがあります。

[ver.2] カエレバ・ヨメレバ・トマレバのシンプルなデザインのCSSサンプル

ブログで商品紹介などをされている方でよく使われているのが、カエレバやヨメレバというツールです。

以前の記事で、「カエレバ・ヨメレバ・ポチレバ用のCSSサンプルをご紹介」という記事をご紹介していたのですが、今回はデザインをシンプルなタイプにして、かつ「トマレバ」を追加しました。※今回のCSSでは「ポチレバ」は入っていません。

どんなデザイン?

今回は以前よりもさらにシンプルなデザイン。

※これは画像です※カエレバのデザイン

カエレバのデザインはこのようなデザイン。
一応「amazlet風-2(CSSカスタマイズ用)」と「amazlet風(改)-1」のどちらでもある程度デザインが整うようにしています。

※これは画像です※ヨメレバとトマレバのデザイン

かなりシンプルです。

カスタマイズ用のコードはこれ

下のコードをまるっとコピーして、【子テーマのstyle.css】や【外観 > カスタマイズ > 追加CSS】などに追加して保存すればデザインが適用されます。

実装方法

例えば、スワローの子テーマの場合は、下の画像のようにstyle.cssに貼り付けて保存すればOKです。

できればファイルのバックアップは取っておいてください。
【外観 > カスタマイズ > 追加CSS】に記載する場合

すでにCSSをカスタムしている場合の注意点

すでにカエレバ等のCSSをカスタムしている場合

もし、すでにCSSをカスタムしている場合は、今回のCSSを貼り付ける前に、古いCSSは削除しておきましょう。CSSが競合して表示が崩れたり思ったとおりの表示にならない場合があります。

なので、表示がうまくならない場合は、すでにカエレバのCSSをカスタムしていないかご確認ください。

もちろんレスポンシブ

表示はPCとスマートフォンどちらでもきれいにされます。(古い端末やブラウザでは確認していないので、うまく表示されない場合もあります。。。)

スマホ表示
PCなど画面幅の大きなディスプレイの場合の表示

シンプルなデザインなので、幅広いジャンルのデザインに適用できると思います。

よろしければお使いください。

おすすめのWordPressテーマ

ブロックエディタ」に完全対応したSTORK19。

CHECK! OPENCAGEのアフィリエイトプログラムについて /

NEWバージョン!

究極のモバイルファースト
WPテーマ「STORK19」

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。

ABOUT US
アバター画像
オープンケージ
ブロガー・アフィリエイター向けのWordPressテーマを制作しています。