Bloggerでカエレバをポチップ風にカスタマイズ

 Bloggerで楽天・Amazon・Yahoo!ショッピングの商品リンクを簡単にまとめて表示できる便利ツールが カエレバ です。複数のストアの商品を統一感のあるデザインで表示できるため、記事の見栄えを整えながら読者にクリックしてもらいやすくなります。

カエレバを利用するには、まず もしもアフィリエイト への登録が必要です。Amazon・楽天・Yahoo!との提携申請も行うことで、カエレバで使えるIDを取得できます。登録手順やリンク作成方法は、前回の記事 で詳しく解説していますので、初心者の方でも迷わず設定できます。

今回のCSSカスタマイズは カエレバ限定 で、ヨメレバやトマレバには対応していません。また楽天・Amazon・Yahoo!ショッピング3ストアを前提にしたカスタマイズです。

デザイン: の部分は「amazlet風(改)-2」を選んでください。

デザイン完成イメージ

Nintendo Switch 2（日本語・国内専用）

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

カスタマイズCSSコード

/*--------------------------------------------------
  カエレバ・Bloggerの場合（ボタン下寄せ対応版）
---------------------------------------------------*/
.cstmreba {
    width: 100%;
    height:auto;
    margin:36px 0;
    font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
    line-height: 1.5;
    word-wrap: break-word;
    box-sizing: border-box;
    display: block;
}
.cstmreba a {
    transition: 0.8s ;
    color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
    color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}

/* .kaerebalink-box全体を横並びにしてボタン下寄せ対応 */
.cstmreba .booklink-box,.cstmreba .kaerebalink-box {
    width: 100%;
    background-color: #fff;  /* 全体の背景カラー */
    overflow: hidden;
    border:double #d2d7e6;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 12px 8px;

    display: flex;
    flex-wrap: wrap; /* スマホで縦並びに対応 */
}

/* サムネイル画像ボックス */
.cstmreba .booklink-image, .cstmreba .kaerebalink-image {
    width:150px;
    flex: 0 0 150px;
    margin:0 14px 0 0;
    text-align: center;
}

/* サムネイルリンク */
.cstmreba .booklink-image a, .cstmreba .kaerebalink-image a {
    width:100%;
    display:block;
}

/* サムネイル画像 */
.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img {
    margin:0 auto;
    padding: 0;
    text-align:center;
}

/* テキスト部分を縦方向flexにしてボタンを下寄せ */
.cstmreba .booklink-info,.cstmreba .kaerebalink-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow:hidden;
    line-height:170%;
    color: #333;
}

/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a, .cstmreba .kaerebalink-info a {
    text-decoration: none;
}

/* 作品・商品名 リンク */
.cstmreba .booklink-name>a, .cstmreba .kaerebalink-name>a {
    border-bottom: 1px dotted ;
    font-size:16px;
}

/* タイトル下にPタグ自動挿入された際の余白を小さく */
.cstmreba .kaerebalink-name p, .cstmreba .booklink-name p {
    margin: 0;
}

/* powered by */
.cstmreba .booklink-powered-date, .cstmreba .kaerebalink-powered-date {
    font-size:10px;
    line-height:150%;
}
.cstmreba .booklink-powered-date a, .cstmreba .kaerebalink-powered-date a {
    border-bottom: 1px dotted ;
    color: #333;
}
.cstmreba .booklink-powered-date a:hover, .cstmreba .kaerebalink-powered-date a:hover {
    color:#333;
}

/* 著者 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail {
    font-size:12px;
}

/* ボタン画像非表示 */
.cstmreba .kaerebalink-link1 img,.cstmreba .booklink-link2 img {
    display:none !important;
}

/* ボタンコンテナ */
.cstmreba .kaerebalink-link1,.cstmreba .booklink-link2 {
    display: inline-block;
    width: 100%;
    margin-top: auto; /* 商品説明の下に下寄せ */
}

/* ボタン個別 */
.cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div {
    float:left;
    width:31%;
    min-width:125px;
    margin:0.5% 1%;
}

/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a, .cstmreba .kaerebalink-link1 a {
    width: 100%;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: bold;
    line-height: 180%;
    padding:3% 1%;
    margin: 1px 0;
    border-radius: 4px;
    box-shadow: 0 2px 0 #ccc;
    background-color: #fff;  /* 初期背景色 */
    border: 2px solid;       /* 枠線 */
    color: inherit;           /* 文字色 */
}

/* カエレバストアカラー */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a { color:#1a4fff; border-color:#1a4fff; letter-spacing:normal;}
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; border-color:#84be24;}
.cstmreba .kaerebalink-link1 .shoplinkcecile a { color:#8d124b; border-color:#8d124b;} 
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a { color:#314995; border-color:#314995;}
.cstmreba .kaerebalink-link1 .shoplinkamazon a, .cstmreba .booklink-link2 .shoplinkamazon a { color:#FF9901; border-color:#FF9901;}
.cstmreba .kaerebalink-link1 .shoplinkrakuten a , .cstmreba .booklink-link2 .shoplinkrakuten a { color: #c20004; border-color:#c20004;}
.cstmreba .kaerebalink-link1 .shoplinkseven a, .cstmreba .booklink-link2 .shoplinkseven a { color:#225496; border-color:#225496; }

/* ホバー時反転 */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover { background-color:#1a4fff; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { background-color:#84be24; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { background-color:#8d124b; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover { background-color:#314995; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover, .cstmreba .booklink-link2 .shoplinkamazon a:hover { background-color:#FF9901; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover , .cstmreba .booklink-link2 .shoplinkrakuten a:hover { background-color: #c20004; color:#fff;}
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover, .cstmreba .booklink-link2 .shoplinkseven a:hover { background-color:#225496; color:#fff; }

/***** ボタンデザインここまで ******/
.cstmreba .booklink-footer { clear:both; }

/*** 解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
    .cstmreba .booklink-image, .cstmreba .kaerebalink-image { width:100%; float:none; }
    .cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div { width: 95%; margin: 0 auto 8px auto; float:none; }
    .cstmreba .booklink-info, .cstmreba .kaerebalink-info { text-align:center; padding-bottom: 1px; }
}
  

もしもアフィリエイト

初心者でも簡単に登録でき、Amazon・楽天・Yahoo!の商品リンクをまとめて作成可能です。

今すぐ登録