副業

カエレバとヨメレバをオシャレにカスタマイズするCSS設定【プラグイン不要】

こんな人におすすめの記事です

  • カエレバやヨメレバのデザインを綺麗にカスタマイズしたい人

 

Amazonや楽天などの商品をWebサイトで紹介して紹介料を稼ぎたい場合、もしもアフィリエイトに登録してカエレバ・ヨメレバを使う人が多いと思います。

 

カエレバとは?

カエレバとは簡単に言うと、もしもアフィリエイトなどを経由してAmazonや楽天などの商品リンクを貼り付けるブログパーツです。ヨメレバはカエレバの本を紹介するver.です。

Amazonや楽天で販売されている商品をブログで紹介して稼ぎたい人にはもはや必須のアイテムと言っても過言ではありません。

カエレバ公式サイト

ヨメレバ公式サイト

 

 

ヒロ
カエレバのデザインはなーんにもしなければデフォルトはだいたいこんな感じの地味なデザインなんですけど

 

 

 

ヒロ
本記事で紹介するCSS設定をすればこんな感じの綺麗なデザインになります
CSS設定はコピペでOKで、プラグインも不要です
ヨメレバのブログパーツの設定もできます

 

 

 

もしもアフィリエイトに登録していない人は先に登録しておきましょう。

 

\\無料登録//

もしもアフィリエイト

 

 

カエレバをカスタマイズしない通常の場合

 

まずはカエレバのリンクの貼り方の流れです。

※ヨメレバも同じですが便宜上カエレバの説明で進めます。

カエレバの公式サイトにアクセスして下にスクロールしてユーザーデータ入力を済ませている前提での説明です。

 

【商品キーワード】に商品名を入れ、希望の商品の【ブログパーツを作る】をクリックします。

 

ブログパーツ生成画面の商品リンクをコピーします。

 

WordPressのテキストモードでリンクを貼り付けます。

 

すると何もしていないデフォルトの状態だと先ほど紹介したようにこんな風に地味な感じになっています。

 

 

以下からはオシャレなデザインになるようにCSS設定をしていきます。

この設定をしてしまえば、今後は普通にブログパーツを張るだけでかっこいいデザインになっていますので、非常に便利ですよ。

CSSはコピペするだけでOKですし、もちろんプラグインも不要です。

 

カエレバのカスタマイズ用CSS設定方法

 

まずはWordPressのダッシュボードの【外観】から【追加CSS】をクリックします。

 

※使用しているWordPressのテーマによっては【追加CSS】の項目がない場合があるので、その場合は【Simple Custom CSS】などのプラグインを使用してCSSをコピペしてください。

 

【追加CSS】をクリックするとデフォルトでは何も書かれていません。

 

この空欄に以下のCSSをコピぺするだけです。

 

.cstmreba {

width: 98%;

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; /* テキストリンクカラー(マウスオーバー時) */

}

.cstmreba .booklink-box,.cstmreba .kaerebalink-box,.cstmreba .tomarebalink-box {

width: 100%;

background-color: #fff; /* 全体の背景カラー */

overflow: hidden;

border:double #d2d7e6;

border-radius: 5px;

box-sizing: border-box;

padding: 12px 8px;

}

/* サムネイル画像ボックス */

.cstmreba .booklink-image,

.cstmreba .kaerebalink-image,

.cstmreba .tomarebalink-image {

width:150px;

float:left;

margin:0 14px 0 0;

text-align: center;

}

.cstmreba .booklink-image a,

.cstmreba .kaerebalink-image a,

.cstmreba .tomarebalink-image a {

width:100%;

display:block;

}

/* サムネイル画像 */

.cstmreba .booklink-image a img,.cstmreba .kaerebalink-image a img,.cstmreba .tomarebalink-image a img {

margin:0 ;

padding: 0;

text-align:center;

}

.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {

overflow:hidden;

line-height:170%;

color: #333;

}

/* infoボックス内リンク下線非表示 */

.cstmreba .booklink-info a,

.cstmreba .kaerebalink-info a,

.cstmreba .tomarebalink-info a {

text-decoration: none;

}

/* 作品・商品・ホテル名 リンク */

.cstmreba .booklink-name>a,

.cstmreba .kaerebalink-name>a,

.cstmreba .tomarebalink-name>a {

border-bottom: 1px dotted ;

font-size:16px;

}

/* タイトル下にPタグ自動挿入された際の余白を小さく */

.cstmreba .kaerebalink-name p,

.cstmreba .booklink-name p,

.cstmreba .tomarebalink-name p {

margin: 0;

}

/* powered by */

.cstmreba .booklink-powered-date,

.cstmreba .kaerebalink-powered-date,

.cstmreba .tomarebalink-powered-date {

font-size:10px;

line-height:150%;

}

.cstmreba .booklink-powered-date a,

.cstmreba .kaerebalink-powered-date a,

.cstmreba .tomarebalink-powered-date a {

border-bottom: 1px dotted ;

color: #333;

}

.cstmreba .booklink-powered-date a:hover,

.cstmreba .kaerebalink-powered-date a:hover,

.cstmreba .tomarebalink-powered-date a:hover {

color:#333;

}

/* 著者・住所 */

.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {

font-size:12px;

}

.cstmreba .kaerebalink-link1 img,.cstmreba .booklink-link2 img,.cstmreba .tomarebalink-link1 img {

display:none !important;

}

.cstmreba .kaerebalink-link1,.cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {

display: inline-block;

width: 100%;

margin-top: 5px;

}

.cstmreba .booklink-link2>div,

.cstmreba .kaerebalink-link1>div,

.cstmreba .tomarebalink-link1>div {

float:left;

width:31%;

min-width:125px;

margin:0.5% 1%;

}

/***** ボタンデザインここから ******/

.cstmreba .booklink-link2 a,

.cstmreba .kaerebalink-link1 a,

.cstmreba .tomarebalink-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: -moz-linear-gradient(top,#fafafa,#EEE);

background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));

}

.cstmreba .booklink-link2 a:hover,

.cstmreba .kaerebalink-link1 a:hover,

.cstmreba .tomarebalink-link1 a:hover {

text-decoration: underline;

}

/* トマレバ */

.cstmreba .tomarebalink-link1 .shoplinkrakuten a { color: #76ae25; }/* 楽天トラベル */

.cstmreba .tomarebalink-link1 .shoplinkjalan a { color: #ff7a15; }/* じゃらん */

.cstmreba .tomarebalink-link1 .shoplinkjtb a { color: #c81528; }/* JTB */

.cstmreba .tomarebalink-link1 .shoplinkknt a { color: #0b499d; }/* KNT */

.cstmreba .tomarebalink-link1 .shoplinkikyu a { color: #bf9500; }/* 一休 */

.cstmreba .tomarebalink-link1 .shoplinkrurubu a { color: #000066; }/* るるぶ */

.cstmreba .tomarebalink-link1 .shoplinkyahoo a { color: #ff0033; }/* Yahoo!トラベル */

/* カエレバ */

.cstmreba .kaerebalink-link1 .shoplinkyahoo a {color:#ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */

.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; } /* ベルメゾン */

.cstmreba .kaerebalink-link1 .shoplinkcecile a { color:#8d124b; } /* セシール */

.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {color:#314995;} /* 価格コム */

/* ヨメレバ */

.cstmreba .booklink-link2 .shoplinkkindle a { color:#007dcd;} /* Kindle */

.cstmreba .booklink-link2 .shoplinkrakukobo a{ color:#d50000; } /* 楽天kobo */

.cstmreba .booklink-link2 .shoplinkbk1 a { color:#0085cd; } /* honto */

.cstmreba .booklink-link2 .shoplinkehon a { color:#2a2c6d; } /* ehon */

.cstmreba .booklink-link2 .shoplinkkino a { color:#003e92; } /* 紀伊國屋書店 */

.cstmreba .booklink-link2 .shoplinktoshokan a { color:#333333; } /* 図書館 */

/* カエレバ・ヨメレバ共通 */

.cstmreba .kaerebalink-link1 .shoplinkamazon a,

.cstmreba .booklink-link2 .shoplinkamazon a { color:#FF9901; } /* Amazon */

.cstmreba .kaerebalink-link1 .shoplinkrakuten a ,

.cstmreba .booklink-link2 .shoplinkrakuten a { color: #c20004; } /* 楽天 */

.cstmreba .kaerebalink-link1 .shoplinkseven a,

.cstmreba .booklink-link2 .shoplinkseven a { color:#225496;} /* 7net */

/***** ボタンデザインここまで ******/

.cstmreba .booklink-footer {

clear:both;

}

/*** 解像度480px以下のスタイル ***/

@media screen and (max-width:480px){

.cstmreba .booklink-image,

.cstmreba .kaerebalink-image,

.cstmreba .tomarebalink-image {

width:100%;

float:none;

}

.cstmreba .booklink-link2>div,

.cstmreba .kaerebalink-link1>div,

.cstmreba .tomarebalink-link1>div {

width: 95%;

margin: 0 auto 8px auto;

float:none;

}

.cstmreba .booklink-info,

.cstmreba .kaerebalink-info,

.cstmreba .tomarebalink-info {

text-align:center;

padding-bottom: 1px;

}

 

 

 

空欄の【追加CSS】に上記のCSSをぶっこみます。するとこんな感じなので、このまま【公開】をクリックします。

 

 

これでもうカエレバのブログパーツはこのようにオシャレなデザインにかわっています。

 

 

 

スマホの画面で見るとこんな感じになっています。

 

ヨメレバでもこんな感じで綺麗なデザインになっています。

 

 

注意点です。

ブログパーツを作成する時の設定方法です。

〇デザインの項目は【amazlet風-2(CSSカスタマイズ用)】に設定。

〇画像サイズは中に設定。

〇最後に更新をクリック。

 

 

これでカエレバのブログパーツがオシャレにカスタマイズされます。

ブログパーツ設定画面は一度設定したら今後いちいち設定する必要はありませんが、設定が変わっていないかブログパーツを作成する前にチェックしてみてくださいね。

カエレバ公式サイト

ヨメレバ公式サイト

 

\\無料登録//

もしもアフィリエイト

 

  • この記事を書いた人

ヒロ

楽活ブログ運営者のヒロです | 接客業でしたが30代からブログを始めて事業会社のWebマーケティング責任者にキャリアチェンジ|ブログ&YouTube&Twitterで【キャリアチェンジ・稼ぐ力・スキルアップ】の情報発信中|Webの力で、楽しく自由に生きる人を増やしたい 運営者プロフィール

-副業