カエレバブックマークのレイアウトをオリジナルデザインに変更する方法

ブロガー御用達のブックマークレットといえば商品紹介ブログパーツ カエレバですが、利用者が多いため、レイアウトがどれも似たり寄ったりになっておりました。

そこで今回は、カエレバブックマークレットでオリジナルのレイアウトを作る方法をご紹介します！

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

「カエレバ」はブログ上で商品を紹介するときに使用します。

「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場、Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

引用元：「カエレバ」ブログパーツとは？

商品紹介ブログパーツ カエレバ

作成方法

まずは、上記のリンクよりカエレバブックマークにアクセスし、ユーザーデーター入力を行います。

登録後、ブックマークレットのコードをお気に入りに登録し、紹介したい商品のページを開きます。

画像+リンクリスト ブログパーツ生成ページで、「amazlet風-2(cssカスタマイズ用)」を選択します。

あとはCSSでレイアウトを調整していきます。レイアウトの調整にはブラウザの開発ツールが便利です。

開発者ツールは「Firebug」より「要素を調査」を使おう | Creator Clip

完成！

このような感じになりました。アイコンはLigature Symbolsを使用しました。

Ligature Symbols

マウスオーバーしたら色が変わってボタンがへこみます。

CSSは以下のように指定しました。
アイコンフォントは自分のサーバーへアップロードしてから使用して下さい。

/* LigatureSymbols */
@font-face {
    font-family: 'LigatureSymbols';
    src: url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot');
    src: url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.woff') format('woff'),
         url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.ttf') format('truetype'),
         url('WordPressのテーマディレクトリ/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* カエレバアイコン */
.kaerebalink-link1 a:before {
	margin-right:5px;
	font-size:200%!important;
	font-family: 'LigatureSymbols';
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-webkit-font-feature-settings: "liga" 1, "dlig" 1;
	-moz-font-feature-settings: "liga=1, dlig=1";
	-ms-font-feature-settings: "liga" 1, "dlig" 1;
	-o-font-feature-settings: "liga" 1, "dlig" 1;
	font-feature-settings: "liga" 1, "dlig" 1;
	vertical-align:middle;
}
.shoplinkamazon a:before {
	content:"\E007";
	color:#f39c12;
}
.shoplinkamazon a:hover:before {
	color:#ffc045;
}
.shoplinkrakuten a:before {
	content:"\E119";
	color:#c04030;
}
.shoplinkrakuten a:hover:before {
	color:#dd4b39;
}

/* カエレバ・レイアウト */
.kaerebalink-box {
	margin-bottom:3em;
}
.kaerebalink-image {
	float:left;
	width:28%;
	text-align:center;
}
.kaerebalink-info {
	margin-left:30%;
}
.kaerebalink-name > a {
	font-weight:bold;
}
.kaerebalink-detail {
	margin-bottom: 1em;
}
.kaerebalink-powered-date {
	margin-top: 0.5em;
	font-size:80%;
	text-align:right;
}
.kaerebalink-link1 div {
	float: left;
	width: 48%;
}
.kaerebalink-link1 div:first-child {
	margin-right:4%;
}
.kaerebalink-link1 a {
	position:relative;
	top:0;
	display:block;
	padding:0.5em;
	color:#fff;
	font-size:100%;
	text-align:center;
	border-radius:5px;
	text-shadow:1px 1px 0 rgba(255,255,255,0.2);
}
.single article .kaerebalink-link1 a:hover {
	top:5px;
	color:#fff;
	box-shadow:none;
	text-decoration:none;
	text-shadow:1px 1px 0 rgba(0,0,0,0.2);
}
.shoplinkamazon a {
	background:#ffc045;
	box-shadow:0 5px 0 #f39c12;
}
.shoplinkamazon a:hover {
	background:#f39c12;
}
.shoplinkrakuten a {
	background:#dd4b39;
	box-shadow:0 5px 0 #c04030;
}
.shoplinkrakuten a:hover {
	background:#c04030;
}

まとめ

こういった細かいところのカスタマイズをしていくことで、ブログのレイアウトのクオリティが上がってくると思うので、前から気になっていたところをどんどんカスタマイズしていきたいと思います！