CSSコピペでOK!カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]

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

Amazonや楽天などの商品や書籍を紹介できる「カエレバ」「ヨメレバ」、そして楽天トラベルやYahoo!トラベルなど宿泊予約サイトのプランを紹介できる「トマレバ」は、以前から重宝している便利なツールです。

本日はこの「カエレバ」「ヨメレバ」「トマレバ」3つのデザインをまとめてカスタマイズしたので紹介します。

以前に「CSSコピペでOK!カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ!」で紹介したものと同様レスポンシブデザインですので、パソコン・タブレット・スマホなど各画面サイズに対応します。

CSSをコピペして頂ければカスタマイズ完了しますので、どうぞお試しください。

※2017年11月17日コードを一部修正いたしました。

スポンサーリンク

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

デフォルトデザインを確認

カスタマイズしたものをご覧いただく前に、まずはデフォルトのデザイン「amazlet風-2(cssカスタマイズ用)」をあらためて確認しておきましょう。

カエレバ・ヨメレバ・トマレバのデフォルト

上の画像はヨメレバを「amazlet風-2(cssカスタマイズ用)」で作成して表示したものです。商品(書籍)タイトルや各サイトへのテキストリンクが並んでいるシンプルなデザインです。
 ※ここでは省略しますが、カエレバ・トマレバも特にカスタマイズしなければ同様のデザインです。

「cssカスタマイズ用」という名前ですが、カスタマイズせずこのまま使用することもできます。ただしカエレバ・ヨメレバ・トマレバはいずれも利用者が多く、カスタマイズせずに使用すると多くのブログなどとかぶってしまいます。

それもとくに気にしないなら問題ありませんが、せっかく載せるなら自分のサイトにあったデザインや、自分好みのデザインで表示させたいですよね?

そこで今回カスタマイズした、カエレバ・ヨメレバ・トマレバのデザインがこちらです。

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

カエレバをカスタマイズ

基本シンプルなデザインが好みなので余計な装飾は控え、各サイトへのテキストリンクをサイトカラーのボタンにしています。

ヨメレバをカスタマイズ

マウスオーバーしたボタンは白抜き背景になり、テキスト部分がサイトカラーになります。

トマレバをカスタマイズ

カエレバ・ヨメレバ・トマレバいずれも基本デザインは共通です。異なるのはサイト別のボタンカラーぐらい。

カスタマイズ後のデザイン(タブレットやスマホ)

レスポンシブデザインのため、画面横幅の狭いタブレットやスマホで表示した場合も基本的なデザインは変わりません。

ヨメレバをカスタマイズ
タブレット(ここでは768px以下)で表示したデザインがこちら。PC表示で横並びだったサムネイル画像と各サイトへのリンクを、中央寄せの縦並びへ変更。各サイトへのボタンは1行に3つ並んで表示されます。
カエレバをカスタマイズ
スマホ(ここでは480px以下)の表示したデザインがこちら。基本はタブレットと同様ですが、画面横幅が狭いので各サイトへのボタンを1行に2つに表示させています。

ここまではわかりやすくカエレバ・ヨメレバ・トマレバいずれもすべてのサイト(ボタン)を表示させたサンプル画像を用意しました。でも普段使う時って、僕自身そうなんですが2〜3種類になることが多いですよね。

カエレバをカスタマイズ

上は僕がよく利用するパターンです。カエレバでAmazon・楽天・Yahoo!ショッピングに絞るとこんな感じです。

こちらのデザインがイマイチでしたら別バージョンもあります。

スポンサーリンク

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

それでは今回紹介したデザインのCSSを紹介します。

CSSコード内容

上記をコピペしてください。貼り付け先はお使いのブログサービスによって異なるのでご確認ください。ちなみにWordPressなら、ご使用中のテーマ(もしくは子テーマ)内にある「style.css」へ貼り付けしましょう。

商品タイトルのテキストリンクや各サイトへのボタンなど、カラーを調整する場合は、コード内に挿入しているコメントを参考に位置を特定してカスタマイズしてください。

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

カエレバ・ヨメレバ・トマレバのデフォルト

本デザインを使用するにあたって、カエレバ・ヨメレバ・トマレバでコード生成する際の推奨設定は以下の通りです。

  • デザイン:amazlet風-2(cssカスタマイズ用)
  • 画像サイズ:小(トマレバは150px)
  • 「で購入」「で探す」「で予約する」などの文言:なし
  • rel:nofollow(任意)

とくにデザインの部分は、必ず「amazlet風-2(cssカスタマイズ用)」を選択して作成してください。

上記の通りでなくとも表示可能ですが、レイアウト等崩れる可能性がありますので適宜調整をお願いします。

まとめ

いかがでしたか?

以前に紹介したデザインとはまたちょっと雰囲気が異なり、僕自身も気に入って使用しています。

カスタマイズはCSSをコピペして頂ければOKですが、サイトによってはCSSをコピペしてもうまく反映されない部分があるかもしれません。そのためカスタマイズは自己責任にてお願いします。また事前にバックアップしてから作業をはじめましょう!

ご利用される際や、その他おかしな点がありましたら、コメントやSNSでご連絡いただけると嬉しいです。

カエレバ・ヨメレバ・トマレバはとにかく便利なツールなので今後も使い続けると思います。気分でまたデザインを変更したくなった時には、あらためてシェアします!

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

よくあるご質問(Q&A)

本デザインのカスタマイズに関してご質問いただいた内容を共有します。

商品/書籍/ホテル名リンクの下線を消したい

本デザインでは、商品や書籍、ホテル名のリンクに下線を表示させています。
該当のCSSは以下の通り。

この下線を非表示にしたければ、border-bottomからはじまる1文だけ削除してください。

これでカエレバ・ヨメレバ・トマレバすべての該当下線を消すことができます。

スポンサーリンク
カエレバ・ヨメレバ・トマレバをカスタマイズ

5 件のコメント

  • 使っているブログがレスポンシブタイプのブログを使ってませんが、それでも「rel:nofollow」は必要でしょうか?
    以前、「rel:nofollow」を使用してヨメレバを使っていたら、ブログランキが下がったりしました。

    • > 神無月様

      「rel:nofollow」については任意です。
      不要でしたら外して頂いてもデザインに影響はありません。

  • コメントを残す

    メールアドレスが公開されることはありません。