CSSコピペでOK!カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ!

この記事をシェアする

2016-08-30 21.51.12 2

このブログはわかったブログの運営者かん吉さんが開発したブログツール「カエレバ」「ヨメレバ」「トマレバ」を利用しています。

これらのツールは、商品・書籍・宿泊施設を紹介するのにとても便利で、多くのブログサイトで利用されています。

今まで僕は、3つのツールを個別にカスタマイズして使っていたのですが、今回そのデザインを統一させようと思いカスタマイズしました。

スポンサーリンク
Google AdSense 336×280

カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ

今回のカスタマイズでは、各ショップのボタンをあまり主張させず、全体をできる限りシンプルにしました。デフォルトの状態と比較するとこんな感じに仕上がっています。

カエレバのデフォルトデザイン

2016-08-30 20.49.42

カエレバの「amazlet風-2(cssカスタマイズ用)」を選択すると、デフォルトではこのように表示されます。CSSは特に何も指定していません。

デザインカスタマイズ後(PC版)

2016-08-30 20.50.22

カスタマイズ後のデザインがこちら。あまり装飾せずシンプルなデザインです。各ショップのボタンもベースカラーを統一し、文字色だけロゴカラーでわけています。

デザインカスタマイズ後(スマホ版)

2016-08-30 21.11.29

スマホなど画面幅の狭い機器で表示するとこのように表示されます。

ヨメレバ・トマレバ

2016-08-30 21.51.12

2016-08-30 21.50.58

せっかくなので、「トマレバ」「ヨメレバ」もサンプル画像を載せておきます。基本的なデザインは同じで、違いは各ボタンの文字色のみです。

CSSをコピペでカスタマイズ完了!

「カエレバ」「ヨメレバ」「トマレバ」のCSSをまとめてカスタマイズしたのでコードもまとめています。

コード記述内容

上記コードをコピペすればカスタマイズ完了です。WordPressでなら「style.css」へ貼り付けしましょう。

このコードでは、480pxより大きい画面幅だと画像の横にボタンなどが表示され、480px以下だと画像の下に表示されます。

カエレバ・ヨメレバ・トマレバ側の設定

2016-08-30 21.28.50
「カエレバ」「ヨメレバ」「トマレバ」でパーツ作成時は、必ず「amazlet風-2(cssカスタマイズ用)」を選択してください。

2016-08-30 21.33.28
「トマレバ」の画像サイズは「150px」を選択していただくとバランスが良いと思います。「カエレバ」「ヨメレバ」の画像サイズは「小」を使用しています。

まとめ

今回はサンプルとしてわかりやすく全てのショップ(サイト)ボタンを表示した画像を載せていますが、実際に使用する際は適宜必要なものだけ選択して頂くのがいいと思います。

もし不具合がありましたら、Twitterやコメントなどでご連絡いただけると幸いです。

はじめにも書きましたが、「カエレバ」「ヨメレバ」「トマレバ」は商品・書籍・宿泊施設を紹介する時にとても便利で重宝しています。ツール開発者のかん吉さん、ありがとうございます。

スポンサーリンク
Google AdSense 336×280