スポンサーリンク

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

カエレバ・ヨメレバ・トマレバ カスタマイズ

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

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

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

CSSをコピペして頂ければカスタマイズ完了のレスポンシブデザインですので、気に入った方はどうぞお試しください。

※2018年4月コードを一部修正しました

スポンサーリンク

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

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

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

2016-08-30 20.49.42

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

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

カエレバ カスタマイズ

カスタマイズ後のデザインがこちら。あまり装飾せずシンプルなデザインです。

ヨメレバ カスタマイズ

各ショップへのリンクはベースカラーを統一し、文字色をブランドカラーでわけてボタンのようなデザインへ。

トマレバ カスタマイズ

ご覧の通り、カエレバ、ヨメレバ、トマレバ全てまとめてカスタマイズすることができます。

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

カエレバ・ヨメレバ・トマレバ カスタマイズ スマホ版

レスポンシブデザインなので、スマホなど画面幅の狭い機器で表示するとこの通り。

カエレバ・ヨメレバ・トマレバ カスタマイズ スマホ版

具体的には画面幅480px以下の場合、全体を中央寄せにし、商品画像の下に、商品名や各ショップのボタンが並ぶような配置に。

いかがでしょうか?もしこちらがイマイチでしたら、別デザインも用意しているのでご覧ください。

スポンサーリンク

CSSをコピペするだけでカスタマイズ完了!

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

CSSコード記述内容

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

※サイトによってはうまく反映されない可能性もありますので、カスタマイズの際は事前に必ずバックアップを取り、作業は自己責任で行いましょう。

外枠を追加したパターン

上述したカエレバ・ヨメレバ・トマレバは周囲を囲む枠線がありません。もし外枠を追加したければ、上記コード内の「.booklink-box, .kaerebalink-box, .tomarebalink-box」の部分を以下のように変更してください。

こうすることで以下のように、カエレバ・ヨメレバ・トマレバの外側に枠線が追加されます。

カエレバ・ヨメレバ・トマレバ カスタマイズ

「#ddd」の部分を変更すれば外枠の色を変えることができるので、お好みで設定してみてください。

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

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

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

外部リンクに対してアイコンフォントが指定されていてデザインが崩れる場合

WordPressなどブログテーマによっては、外部リンクに対してアイコンフォントが指定されていているケースがあります。その場合、各ショップへのリンクボタンの表示が崩れる可能性があります。

例えばWordPressテーマ「ストーク」の場合、以下のように表示されます。

カエレバ・ヨメレバ・トマレバとWordPressテーマ「ストーク」

各リンクの後ろに外部リンクを示すアイコンが表示されています。他のテキストリンクと違い、今回のようにカエレバ・ヨメレバ・トマレバのデザインをカスタマイズした場合には、これが邪魔に感じる方もいるはずです。

そんな時は以下のコードを最後に追加してください。

これでWordPressテーマ「ストーク」の場合には、カエレバ・ヨメレバ・トマレバのアイコンフォントだけ非表示になります。

このような細かな修正はご利用のブログテーマによって異なります。上記はあくまでWordPressテーマ「ストーク」の場合の修正例ですのでご注意ください。

まとめ

いかがでしょうか。

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

ご利用される際や、その他おかしな点がありましたら、コメントやSNSでご連絡いただけると嬉しいです。「うまくカスタマイズできない」などの相談も可能な範囲でお答えしています。

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

カエレバ・ヨメレバ・トマレバのカスタマイズならあわせてチェック!
HTMLやCSS初心者でしたらまずは書籍で基本をおさえておきましょう。

WEBデザインやプログラミングは最初が肝心です。
初心者でも短期間で着実にスキルを身に着けるなら、マンツーマンサポートと通い放題で学習継続率No.1の「WebCamp」がオススメ。

全額返金保証制度もありますので、まずは無料の説明会で話を聞いてみましょう! 
WebCampの無料説明会へ申し込み

「プログラミングを本業にしたい!」そんな方には就職・転職まで保証している「WebCamp Pro」もあわせてチェックしてみましょう!
WebCamp Proの無料説明会へ申し込み

スポンサーリンク
\この記事が少しでも役に立ったらシェアお願いします/
カエレバ・ヨメレバ・トマレバ カスタマイズ