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

2016-08-30 21.51.12 2

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

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

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

スポンサーリンク

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

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

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

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をまとめてカスタマイズしたのでコードもまとめています。

CSSコード記述内容

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

このコードでは画面幅480pxを分岐点に置いています。480pxより大きい画面幅だと商品画像横にショップボタンが表示され、480px以下だと商品画像が中心に表示され、その下にショップボタンが表示されます。

外枠を追加したパターン

上述したカエレバ・ヨメレバ・トマレバの外側に枠線を追加したければ、2つ目の「.booklink-box, .kaerebalink-box, .tomarebalink-box」の部分を以下のように変更してください。

上3行はもとのまま、下3行が追加したものです。こうすることで、カエレバ・ヨメレバ・トマレバの外側に枠線が追加されます。

カエレバ

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

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

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

CSSカスタマイズまとめ

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

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

とにかくシンプルなデザインを心がけてカスタマイズしたデザインをご紹介しましたが、今後も別バージョンを考える機会があればシェアいたします。

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

カエレバ・ヨメレバ・トマレバのカスタマイズならあわせてチェック!
CSSコピペでOK!カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]
HTMLやCSS初心者でしたらまずは基本をおさえておきましょう。
スポンサーリンク
2016-08-30 21.51.12 2