Webデザインやガジェット、格安SIMの情報ブログ

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

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

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

スポンサードリンク

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

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

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

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

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

作成方法

2014-04-28_182051

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

2014-04-28_182514

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

2014-04-28_182918

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

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

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

完成!

2014-04-28_180958

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

Ligature Symbols

2014-04-28_181107

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

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;
}

まとめ

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

鹿
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。
  • Feedly(RSS)で
    ブログを購読してみる
    購読する
  • Push7(プッシュ通知)で
    ブログを購読する
    購読する