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

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

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

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

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

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

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

スポンサーリンク

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

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

カスタマイズしたものをご覧いただく前に、まずはデフォルトのデザイン「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カスタマイズ用)」を選択して作成してください。

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

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

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

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

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

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

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

まとめ

いかがでしたか?

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

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

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

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

カエレバ・ヨメレバ・トマレバのカスタマイズならあわせてチェック!
CSSコピペでOK!カエレバ・ヨメレバ・トマレバのデザインをまとめてカスタマイズ!
WordPressユーザーでしたら「Rinkerプラグイン」も便利です!
CSSコピペでOK!Rinker(リンカー)プラグインのデザインをカスタマイズ
HTMLやCSS初心者でしたらまずは書籍で基本をおさえておきましょう。

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

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

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

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

27 件のコメント

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

    • > 神無月様

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

  • CSSの知識もなくどうしようかと迷っていたところこのデザインに出会いひとめぼれしました。
    恐れながら、使用させていただくことを報告いたします。
    素晴らしいデザインをありがとうございます。

    • tkg様

      はじめまして。
      記事がお役に立てたようで何よりです!
      何か気になる箇所ありましたらお気軽にご連絡ください。

  • 参考にさせて頂きました。
    ですがワードプレステーマ「ストーク」では反映されないみたいです。
    テーマによっては対応してないのでしょうか?
    ストークを販売しているオープンケージにもCSSがあるのですが、RoughLogさんのデザインの方がキレイなので、、笑

    • D様

      コメントありがとうございます。
      WordPressテーマ「ストーク」では表示を確認しているのですが、どのように反映されませんでしょうか。

      コードを全文「style.css」ファイルにコピペされているにも関わらず何も変化がないようでしたら、
      ブラウザのキャッシュを削除してから再読込してご確認いただけますと幸いです。

      • ブラウザのキャッシュを削除したら反映されました。知識不足ですみません。
        ありがとうございます。
        有難く使わせて頂きます(^^)/

  • PC版でも1行に3つ並びしかできないようにするにはどうしたらいいのでしょうか?今の自分のブログのテンプレでは、1行に4つ並んでしまうで3つ並びに変更したいのです。

    • 神無月様

      以下のように変更してみてはいかがでしょうか。

      .booklink-link2>div,
      .kaerebalink-link1>div,
      .tomarebalink-link1>div {
      float:left;
      width:24%;
      min-width:128px;
      margin:0.5%;
      }

      上記「width」の値を「24%」→「32.33%」へ変更します。

      またあわせて「解像度768px以下のスタイル」で適用させている
      以下の記述は不要になるので消していただいても結構です。

      .booklink-link2>div,
      .kaerebalink-link1>div,
      .tomarebalink-link1>div {
      width: 32.33%;
      margin: 0.5%;
      }

  • カエレバをレスポンシブ対応をしようとしてこのサイトにたどりつきました。
    ステキなデザインで利用させてもらいました。
    ありがとうございます!

    • アキクボ様

      コメントありがとうございます。
      以下のコードを入れ替えてご確認していただけますでしょうか。

      ▼除去
      .cstmreba p {
      display: none;
      }

      ▼代わりに挿入
      .cstmreba .booklink-name p,
      .cstmreba .kaerebalink-name p,
      .cstmreba .tomarebalink-name p, {
      margin-bottom:0;
      }

  • ヨメレバの画像がamazonか楽天ブックスに変更されてから、表紙画像が大きくなってしまい見た目がアンバランスになりした。

    amazonの表紙画像は160だったのが、楽天ブックスだと200×200になってます。

    どこを変更したらいいのでしょうか?

    • >神無月様

      ヨメレバの画像ですが、現在は以下のサイズで楽天から画像を取得しているようですね
      ・画像小の場合:64px
      ・画像中の場合:200px

      まずは暫定的な対処方法を2点記載します
      (1)楽天市場・楽天KOBOのリンクを選択しない
      リンク先に楽天を選択しなければAmazonの画像を取得しているようなので、
      あまり必要でなければ楽天を外しておくと従来通りの表示になります

      (2)手動で画像サイズを変更する
      画像サイズ中(200px)で取得したコードを記事へ貼り付けする際に、
      img要素へ「width=”160″」を追加します

      例)

      毎回手動で追加しなければなりませんが、これで任意のサイズへ小さくして
      表示することができます。

      上記2点はあくまで暫定的な対処方法です。

      あわせてスタイルシート側での調整は今後考えていきます。
      調整箇所は以下になります。
      .cstmreba .booklink-image,
      .cstmreba .kaerebalink-image,
      .cstmreba .tomarebalink-image {
      width: 150px;
      float: left;
      margin: 0 14px 0 0;
      text-align: center;
      }
      赤字の部分で画像周りの枠サイズを指定しています。

  • 当分、(1)楽天市場・楽天KOBOのリンクを選択しない
    でやっていこうと思います。
    楽天市場・楽天KOBOのリンクのチェックを外したら、Amazonの画像を取得できるのを知りませんでした。
    とても助かりました。本当にありがとうございます。

  • とても素敵でしたので、使わせていただきます!
    素敵なデザインで、自分のブログがおしゃれになりました!
    本当にありがとうございます、感謝です…!

  • はじめまして。
    素晴らしいデザインなので使わせていただいたのですが、
    PC表示ではまったく問題ありませんが、
    スマホで表示したときにボタンがカラー一色になってしまい、
    文字が見えない状態となってしまいます。
    テーマの問題でしょうか?

    • >ゆうやー様

      はじめまして。
      コメントいただきありがとうございます。

      ボタンカラーについてはPCとスマホどちらも同じコードを用いて
      いますので、まずはスマホのブラウザのキャッシュを削除して再確認
      してみてはいかがでしょうか。

  • はじめまして。
    デザイン使わせていただいております。
    とても素敵なデザインで気に入っています。ありがとうございます!

  • コメントを残す

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

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください