WordPressテーマ変更！SimplicityからCocoonへ
スポンサーリンク

カエレバ、デザイン変更CSSカスタマイズ！ほか簡単な登録方法

カエレバのデザインを変更したい場合の変更方法とCSSでのスタイルを紹介します。カエレバはWordPress・はてなブログ、その他の無料のブログサービスでも利用できるのでデザインの変更方法を色々書いてるので、見出しをチェックしてください。

カエレバの3つのカスタマイズ

スポンサーリンク
スポンサーリンク

カエレバ利用準備！Amazon・楽天アフィリエイトidの登録

カエレバではAmazonアソシエイト・楽天アフィリエイト・バリュコマ・A8ネットなどの登録が可能ですが、最低でもAmazonのアフィリエイトIDが必須になってます。

Amazonと楽天を利用する場合など、もしもアフィリエイトを利用するとAmazonの審査が通らなかった場合でも、もしも経由なら身元の確認関連で審査が通りやすいです。もしもアフィリエイトは登録して損はないので、そのIDの貼り方を紹介します。

もしもアフィリエイトのAmazon・楽天のIDをカエレバに登録

もしもアフィリエイトのAmazon・楽天のアフィリエイトID確認場所

このように『楽天・Amazon簡単リンクですぐアフィリエイトID』もわかるし、登録サイトに合う・収入の見込みがある広告を紹介してくれます。しかも検索キーワードと順位付きで教えてくれるので、かなりオススメ＾＾

もしもアフィリエイト登録

アフィリエイトIDが分かったら、ユーザーデータ入力を行います。そのIDはサイト毎に違うので、『サイト名』と『それぞれのID』を登録してください。

カエレバ、ユーザーデータ入力方法

登録したい項目を入れて終わると保存をクリックすれば、cookieの削除を行わない限り情報は保存された状態で表示されます。

『アフィリエイトIDの調べ方』は画像の通り、リンクをクリックすれば該当の見出しへ飛べるし、利用方法も全て書いてる下記カエレバリンクから、まずID登録を完了してください。

LINKカエレバ

カエレバブックマークレットを利用する方法

PCからでしたら、ブックマークレットを利用すれば簡単に利用できます。カエレバ公式サイトではこのように書かれています。

ブックマークレット

カエレバブックマークレット

↑このリンクをマウスでクリックしたままドラッグして、ブラウザのツールバーやお気に入りに追加してご利用ください

※Sleipnirをお使いの方は、下記コードを直接登録してください
ブラウザメニューメニュー⇒「お気に入り」⇒「お気に入りに追加」⇒「タイトル」に「カエレバ」「場所」に下記コードコピペ⇒「フォルダ」⇒「リンク」⇒「OK」

javascript:window.open('http://kaereba.com/blogparts/?&url='+encodeURI(document.location.href));undefined;

この通りですがブックマークレットをお気に入りに追加して、カエレバを貼りたいAmazonなどの商品ページでお気に入りに入れたブックマークレットをクリックすれば、カエレバを貼る準備が整います。

ちなみに、カエレバトップにある商品キーワードを入れて検索も可能

カエレバ入力欄の設定

カエレバ入力欄の設定

  • デザイン
    • CSSでカスタマイズするには後述の通りamazlet風-2(cssカスタマイズ用)を選択
    • 上記でID登録し、利用したいサイト名を選択

※cssカスタマイズ用以外はstyleの指定があらかじめ入ったものだから、思った通りのスタイルにするには面倒（後述）。

  • 商品キーワード
    • Amazon・楽天とも、検索でヒットして欲しいキーワードを入力
    • で探す。にするのか、なし・で購入・で調べる・で見る・で最安値を探す・で検索・でチェック・で最安値をチェック。など選べます。
  • タイトル変更
    • 画像大・中・小で画像サイズを指定
    • 100％は、枠からはみ出さないように指定される
    • nofollowは個人的に付けてるけど、割愛します。
  • Amazon・楽天リンクなどチェックを入れると表示される

さいごに、更新をクリックして、反映させてください。

コードをコピーして、ブログのテキスト：HTMLに張り付ける

コードをコピーする場所

設定が完了したら、上記コードをコピーしてサイトのテキスト（HTML）に張り付けて完了です。※CSSはstyleシートで指定が必要。

  • テキストリンク・画像を利用したいとき

テキストリンク・画像リンクのコードの場所

テキストリンクは、上記画像の赤枠・矢印部分をコピペすると、下記のようにリンクが出来ます＾＾

FUJIFILM インスタントカメラ チェキ instax mini 90 ネオクラシック ブラウン INSTAX MINI 90 BROWN

画像のみを貼り付けたいときは、画像の青枠内・矢印部分のコードをコピペ。下記のような感じですね。

  • センタリングしたい場合

下記HTMLのピンクの文字部分を消してコードを入れてください。

<div class="center">この空間にコード</div>

styleシートに下記コードを追記。

.center {
	text-align: center;
}

これでセンタリングできますよ。

カエレバ、デザインをカスタマイズ！

カエレバはあらかじめ決まったデザインがあります。

自分好みのデザインを！と考える場合は、ブログのCSSでスタイル変更ができる、amazlet風-2(cssカスタマイズ用)を使用し、CSSをコピペして使ってください。

カエレバのデザインCSS。PCビュー：画像とタイトル横並び

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

/* 大枠 */
.booklink-box,
.kaerebalink-box {
	border: 1px solid #cc9ef7;
	border-bottom: 2px solid #d3a3ff;
	max-width: 100%;
	margin: 2em auto;
	margin-bottom: 2.2em;
	padding: 1em;
	border-radius: 4px;
	box-shadow: 10px 13px 20px -15px #7b7b7b;
}

/* もしもアフィインプレッション画像・領域とも非表示 */
.booklink-image img[src^="//i.moshimo.com/af/i/impression"],
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"] {
	display: none;
}

/* 画像領域をセンタリング */
.booklink-image,
.kaerebalink-image {
	text-align:center;
	height: auto;
}

/* 画像領域内、画像の大きさ */
.booklink-image img,
.kaerebalink-image img {
	width: 200px;
	height: auto;
}

/* LINK名の装飾 */
.booklink-name p,
.kaerebalink-name p {
	border: 1px solid #f3e8ff; /*枠*/
	background: #f7f0ff; /*背景*/
	border-radius: 5px; /*ボーダーの角丸*/
	padding: 0.2em; /*内側余白*/
	margin-bottom: 1.5em; /*下側余白*/
}

/*カエレバリンクの装飾*/
.booklink-powered-date,
.kaerebalink-powered-date {
	text-align: right; /*テキストを右側*/
	padding-right: 1em; /*カエレバ右余白*/
	font-size: 0.8em;
	border: 1px solid #fbf7ff;
	background: #fdfbfe;
	color: #aaa; /*poweredの色色*/
	margin-bottom: 1.5em;
}

/*詳細情報*/
.booklink-detail,
.kaerebalink-detail {
	text-align: center;
	font-size: 0.9em;
	margin-bottom: 1.5em;
}

/*ショッピングリンク*/
div[class^="shoplink"] {
	margin-bottom: 0.5em;
}

div[class^="shoplink"] a {
	display: block;
	text-decoration: none;
	font-weight: bold;
	padding: 0.8em 0;
	text-align: center;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .4) inset;
	text-shadow: 1px 1px 0 rgb(255, 255, 255);
	border: 1px solid #f3e8ff;
	border-radius: 3px;
	background: -moz-linear-gradient(top, #FFF 0%, #ffd4f4);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#ffd4f4));
}

/*ショップLINK：onマウス共通項目*/
div[class^="shoplink"] a:hover {
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}

/*インプレッション画像*/
div[class^="shoplink"] img {
	display: none;
	margin-bottom: 0;
}

/*Amazonフォント色*/
.shoplinkamazon a {
	color: #FB6A00;
}
/*Amazonオンマウス時*/
.shoplinkamazon a:hover {
	background: #ffa35d;
}

/*楽天フォント色*/
.shoplinkrakuten a {
	color: #ff0016;
}

/*楽天オンマウス時*/
.shoplinkrakuten a:hover {
	background: #ff4753;
}

/*横幅600px以上のスタイル*/
@media screen and (min-width : 600px) {

	/*画像を左へ（右ならright）*/
	.booklink-image,
	.kaerebalink-image {
		float: left; /*画像左へ：右にしたい場合"right"に*/
		width: 210px; /*画像領域の幅*/
		height: auto;
	}

	/*画像の大きさ指定*/
	.booklink-image img,
	.kaerebalink-image img {
		max-height: 230px;
		width: auto;
	}

	/*float解除*/
	.booklink-info,
	.kaerebalink-info {
		overflow: hidden;
	}

	/*ショップLINK横並びに*/
	div[class^="shoplink"] {
		display: inline-block;
		margin: 0 0.5em 0.5em 0;
		width: calc(50% - 1em);
	}
}

132・133行目はwidth: 200px; /*画像の大きさ*/と指定してたところを変更しました。理由は以下の通りです。

LINKhttps://bibabosi-rizumu.com/amazon-img-long-height-css/

このコードの表示は下記の通り。

カエレバのカスタマイズgif

幅の狭い状態でのカエレバ

カエレバスタイル：広めスマホビュー

カエレバPCビュー：600px以上の表示

リンクのonマウス時の表示

画像を右側に置きたいときのスタイル変更

カエレバ画像：右バージョン

124行目のfloat: left; /*画像左へ：右にしたい場合"right"に*/をfloat: right;に変更。それが難しい場合、下記を追記してください。

@media screen and (min-width : 600px) {

	/*画像を左へ（右ならright）*/
	.booklink-image,
	.kaerebalink-image {
		float: right;
	}
}

スマホ・PC、カエレバ画像を上に表示するCSS

スマホもPCもカエレバの画像を大きく上部に表示したいときのコードは、下記。

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

/* 大枠 */
.booklink-box,
.kaerebalink-box {
	border: 1px solid #cc9ef7;
	border-bottom: 2px solid #d3a3ff;
	max-width: 100%;
	margin: 2em auto;
	margin-bottom: 2.2em;
	padding: 1em;
	border-radius: 4px;
	box-shadow: 10px 13px 20px -15px #7b7b7b;
}

/* もしもアフィインプレッション画像・領域とも非表示 */
.booklink-image img[src^="//i.moshimo.com/af/i/impression"],
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"] {
	display: none;
}

/* 画像領域をセンタリング */
.booklink-image,
.kaerebalink-image {
	text-align:center;
	height: auto;
}

/* LINK名の装飾 */
.booklink-name p,
.kaerebalink-name p {
	border: 1px solid #f3e8ff; /*枠*/
	background: #f7f0ff; /*背景*/
	border-radius: 5px; /*ボーダーの角丸*/
	padding: 0.2em; /*内側余白*/
	margin-bottom: 1.5em; /*下側余白*/
}

/*カエレバリンクの装飾*/
.booklink-powered-date,
.kaerebalink-powered-date {
	text-align: right; /*テキストを右側*/
	padding-right: 1em; /*カエレバ右余白*/
	font-size: 0.8em;
	border: 1px solid #fbf7ff;
	background: #fdfbfe;
	color: #aaa; /*poweredの色色*/
	margin-bottom: 1.5em;
}

/*詳細情報*/
.booklink-detail,
.kaerebalink-detail {
	text-align: center;
	font-size: 0.9em;
	margin-bottom: 1.5em;
}

/*ショッピングリンク*/
div[class^="shoplink"] {
	margin-bottom: 0.5em;
}

div[class^="shoplink"] a {
	display: block;
	text-decoration: none;
	font-weight: bold;
	padding: 0.8em 0;
	text-align: center;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .4) inset;
	text-shadow: 1px 1px 0 rgb(255, 255, 255);
	border: 1px solid #f3e8ff;
	border-radius: 3px;
	background: -moz-linear-gradient(top, #FFF 0%, #ffd4f4);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#ffd4f4));
}

/*ショップLINK：onマウス共通項目*/
div[class^="shoplink"] a:hover {
	color: #fff;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}

/*インプレッション画像*/
div[class^="shoplink"] img {
	display: none;
	margin-bottom: 0;
}

/*Amazonフォント色*/
.shoplinkamazon a {
	color: #FB6A00;
}
/*Amazonオンマウス時*/
.shoplinkamazon a:hover {
	background: #ffa35d;
}

/*楽天フォント色*/
.shoplinkrakuten a {
	color: #ff0016;
}

/*楽天オンマウス時*/
.shoplinkrakuten a:hover {
	background: #ff4753;
}

/*横幅600px以上のスタイル*/
@media screen and (min-width : 600px) {

	/*ショップLINK横並びに*/
	div[class^="shoplink"] {
		display: inline-block;
		margin: 0 0.5em 0.5em 0;
		width: calc(50% - 1em);
	}
}

上記コードでの表示のしかた。

カエレバ画像上バージョンの表示

カエレバを貼ると画像下が大きく余白ができるときの直し方

もしもアフィリエイトを利用していて、画像下に大きく空欄ができるようでしたら、もしもインプレッション画像が原因かもしれません。

/* もしもアフィインプレッション画像・領域とも非表示 */
.booklink-image img[src^="//i.moshimo.com/af/i/impression"],
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"] {
	display: none;
}

上記のコードでも余白がなくならないときは、下記のコードに変更してください。

.kaerebalink-name img[src^="//i.moshimo.com/af/i/impression"] {
	display: none;
}

場合によって、コチラのコードで対応できます。

画像 横幅の大きさを、一括で揃えるCSS

大きな画像をカンタンに表示できるようになったカエレバですが、大きさがマチマチなのが気になる場合、画像大を選んだけど大きすぎると感じた場合、一律で画像の大きさを変更するスタイルのご紹介。

※古いカエレバや画像小を貼っている場合、小さい画像まで大きくなり、『画質が悪く』なる。全てのカエレバ画像サイズが大きい場合が前提です❦

/*大きな画像を一律同じ幅で縮小し揃えたい場合*/
.kaerebalink-image img,
.booklink-image img {
	width:300px;
	height:auto;
	max-width: 100%;
}

/*もしもアフィリエイトを使用者インプレッション関連の画像を見えなくする*/
.kaerebalink-image img[src^="//i.moshimo.com/af/i/impression"],
.booklink-image img[src^="//i.moshimo.com/af/i/impression"] {
	display: none;
}

カエレバだけを指定したい場合は、ヨメレバ.booklink…を削除。※ヨメレバだけ反映させたい場合は、.kaerebalink…を削除。

width:300px;と指定したけど、400pxなど好きな数字・サイズを入れてください。

私は当時Amazonでアカウントがとれなかったので、楽天・Amazonの支払い一括でしてくれる『もしもアフィリエイト』を利用してます。『もしも』の場合、インプレッション用の隠れ画像まで大きくなりスペースが空くので、CSSで見えなくする指定を入れてます。

※もしもアフィリエイトを使ってなければ、下4行は削除してください。

過去にamazlet風(改)-1など大量に使用！cssカスタマイズ用のデザインを選んでないときのCSS

例えば『amazlet風(改)-1』だと（後述しますが）HTMLにstyle属性で装飾されたものになり、うまくスタイルが反映しません。

画像小の場合

amazlet風(改)-1の元のデザイン（画像小）

HTMLに入った装飾以外の指定がCSSで書いてあり、style.cssで指定したコードと合わさって、下記のようなスタイルになります。

FUJIFILM インスタントカメラ チェキ instax mini8 「ミニオン」 INS MINI 8 MINION

posted with カエレバ
富士フイルム 2017-07-21
Amazonで探す
楽天市場で探す

上記の比較として下記は、『amazlet風-2(cssカスタマイズ用)』で作ったカエレバ。※上記スタイルではなく、私専用のスタイル。

FUJIFILM インスタントカメラ チェキ instax mini8 「ミニオン」 INS MINI 8 MINION

posted with カエレバ
富士フイルム 2017-07-21
Amazonで探す
楽天市場で探す

画像中の場合は以下。

amazlet風(改)-1の元のデザイン（画像中）

FUJIFILM インスタントカメラ チェキ instax mini8 「ミニオン」 INS MINI 8 MINION

posted with カエレバ
富士フイルム 2017-07-21
Amazonで探す
楽天市場で探す

上記の比較として下記は、『amazlet風-2(cssカスタマイズ用)』で作ったカエレバ。

FUJIFILM インスタントカメラ チェキ instax mini8 「ミニオン」 INS MINI 8 MINION

posted with カエレバ
富士フイルム 2017-07-21
Amazonで探す
楽天市場で探す

HTMLに入ったstyle属性でキレイに反映されない状態です。『amazlet風(改)-1』の場合、タグ内にあるstyle=”ここにスタイルが書かれている”そのstyleの指定をチェックします。

<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
<div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="//af.moshimo.com/af/c/click?a_id=516974&p_id=170&pc_id=185&pl_id=4062&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fwww.amazon.co.jp%2Fexec%2Fobidos%2FASIN%2FB071XH7L8Q%2Fref%3Dnosim" target="_blank" rel="nofollow" >
<img src="https://images-fe.ssl-images-amazon.com/images/I/515gCB1AoQL._SL320_.jpg" style="border: none;" /></a>
<img src="//i.moshimo.com/af/i/impression?a_id=516974&p_id=170&pc_id=185&pl_id=4062" width="1" height="1" style="border:none;"></div>
<div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">
<div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%">
<a href="//af.moshimo.com/af/c/click?a_id=*****p_id=170&pc_id=185&pl_id=4062&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fwww.amazon.co.jp%2Fexec%2Fobidos%2FASIN%2FB071XH7L8Q%2Fref%3Dnosim" target="_blank" rel="nofollow" >FUJIFILM インスタントカメラ チェキ instax mini8 「ミニオン」 INS MINI 8 MINION</a><img src="//i.moshimo.com/af/i/impression?a_id=516974&p_id=170&pc_id=185&pl_id=4062" width="1" height="1" style="border:none;">
<div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div>
<div class="kaerebalink-detail" style="margin-bottom:5px;"> 富士フイルム 2017-07-21 </div><div class="kaerebalink-link1" style="margin-top:10px;">
<div class="shoplinkamazon" style="display:inline;margin-right:5px">
<a href="//af.moshimo.com/af/c/click?a_id=*****&p_id=170&pc_id=185&pl_id=4062&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fwww.amazon.co.jp%2Fgp%2Fsearch%3Fkeywords%3DFUJIFILM%2520%25E3%2582%25A4%25E3%2583%25B3%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%25B3%25E3%2583%2588%25E3%2582%25AB%25E3%2583%25A1%25E3%2583%25A9%2520%25E3%2583%2581%25E3%2582%25A7%25E3%2582%25AD%2520instax%2520mini8%26__mk_ja_JP%3D%25E3%2582%25AB%25E3%2582%25BF%25E3%2582%25AB%25E3%2583%258A" target="_blank" rel="nofollow" >Amazonで探す</a>
<img src="//i.moshimo.com/af/i/impression?a_id=*****&p_id=170&pc_id=185&pl_id=4062" width="1" height="1" style="border:none;"></div>
<div class="shoplinkrakuten" style="display:inline;margin-right:5px">
<a href="//af.moshimo.com/af/c/click?a_id=*****&p_id=54&pc_id=54&pl_id=616&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FFUJIFILM%2520%25E3%2582%25A4%25E3%2583%25B3%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%25B3%25E3%2583%2588%25E3%2582%25AB%25E3%2583%25A1%25E3%2583%25A9%2520%25E3%2583%2581%25E3%2582%25A7%25E3%2582%25AD%2520instax%2520mini8%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0" target="_blank" rel="nofollow" >楽天市場で探す</a>
<img src="//i.moshimo.com/af/i/impression?a_id=*****&p_id=54&pc_id=54&pl_id=616" width="1" height="1" style="border:none;"></div></div></div><div class="booklink-footer" style="clear: left"></div></div>

例えば1行目のクラスkaerebalink-boxのスタイルはこんな感じ。

<div class=”kaerebalink-box” style=”text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;“>

これらのスタイルを全てチェックして、強引に装飾を初期値に戻すか、強引に継承させてあげる必要があります。

/*初期化*/
.booklink-box,
.kaerebalink-box {
	text-align: inherit !important;
	padding-bottom: inherit !important;
	font-size: inherit !important;
	overflow: inherit !important;
}
.booklink-image,
.kaerebalink-image {
	float: inherit !important;
	margin: inherit !important;
}
.booklink-info,
.kaerebalink-info {
	line-height: inherit !important;
	overflow: inherit !important;
}
.booklink-name,
.kaerebalink-name {
	margin-bottom: inherit !importamt;
	line-height: inherit !importamt;
}
.booklink-powered-date,
.kaerebalink-powered-date {
	font-size: inherit !important;
	margin-top: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}
.booklink-detail,
.kaerebalink-detail {
	margin-bottom: inherit !important;
}
div[class^="shoplink"] {
	display: inherit !important;
	margin: inherit !important;
}
.booklink-link1,
.kaerebalink-link1 {
	margin: inherit !important;
}

.booklink-link2,
.kaerebalink-link2 {
	margin-top: inherit !important;
}

上記はザックリですけど、こんな感じで全て継承させ!importantをつけて、CSSの優先順位が高いstyle属性を、手元で編集できるstyle.cssから変更することも可能です。『チカラ技』だけど一応できる❦

それから好きなスタイルを当てるとき上記で指定済みのスタイルの上書きには!importantをつけ優先順位を上げるワケです。

よくわからない場合全て;の後ろに半角スペースを入れ!importantを付ければ、過去のカエレバを好きなスタイルで表示できます＾＾

CSSのコードが長くなるけど、全て『amazlet風-2(cssカスタマイズ用)』に変更するのが面倒な場合とか使える力技！的な❦

※リンクの見直しがてらカエレバを自力で張り替え、画像を大・中など任意のサイズに変更し、『amazlet風-2(cssカスタマイズ用)』を指定し直すのをオススメしたいのが本音❦

さいごに

カエレバのカスタマイズを紹介しましたが、あとはカラーを変更するだけでオリジナル感が出せるので、時間があるときチャレンジしてください。

画像が大きいと細部まで見えるのでユーザー的には見やすく感じます。あなたのサイトで色々試してくださいねっ❦

それでは、もしもアフィリエイトがおすすめ！かうたっくでした。

スポンサーリンク
スポンサーリンク
この記事が気に入ったら
いいね！しよう
最新情報をお届けします。
CSS
Gush Simplicity Stinger5 カスタマイズ ツール
シェアする
フォローする
スポンサーリンク
スポンサーリンク
かうたっく
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

「ビバ★りずむ」ポリシー
トップへ戻る
タイトルとURLをコピーしました