カエレバブックマークレットの見た目をCSSでカスタマイズしてみた

先日、ブロガー必須のブックマークレット『ShareHtmlメーカー』をCSSでイジってみました！でshareHTMLのCSSカスタマイズをしたのですが、今回はカエレバブックマークレットで出力されるソースコードをCSSでメイクアップしてみたいと思います！

CSSでカスタマイズ

カエレバではブログパーツを生成する際にamazlet風-2(cssカスタマイズ用)というデザインで書き出せるのでコイツを使ってカスタマイズしていきましょう！

ちなみに、amazlet風-2(cssカスタマイズ用)で書き出した生の状態だとこんな感じです。ここからcssでどう変わるのか！乞うご期待！

便利すぎるwebサービス

OneClickCSS と、その前に…カエレバで出力したソースを見ていると入り交じっていてパッと見ただけじゃどこがCSSのclassなのかがわかりません！そんな時にはこのwebサービス！

OneClickCSS

OneClickCSSはHTMLコードを元に、様々なStyleSheetを自動生成するサービスです。

これはスゴイ！ヤバイ！ベンリ！ソースコードをコピペするだけでcssのidとclassをガッと抜き出してくれます。詳しくは@shintarowfreshさんの*frasmで説明されています！

CSSのコーディングが光の速さになるかも知れない、っていうかなったwebジェネレーター「OneClickCSS」*frasm

クラスとかいちいちアレするのがめんどうなんですよね。もう、面倒。

OneClickCSSのおかげで作業時間短縮です。

ガッツリカスタマイズ

CSSのクラスがこれだけ整頓されていればあとはポチポチとプロパティを追加していくだけです。

できたー

Canon デジタル一眼カメラ EOS M(ブラック) ダブルレンズキット　EOSMBK-WLK

posted with カエレバ

キヤノン 2012-09-29

[css]
.kaerebalink-box{
position: relative;
overflow: hidden;
width:420px;
height: 100%;
}

.kaerebalink-box a {
text-decoration: none;
}

.kaerebalink-image{
float:left;
overflow: hidden;
margin: 0 10px 0 0;
padding: 5px;
width: 160px;
height: 180px;
vertical-align:middle;
text-align:center;
line-height:170px;
}
.kaerebalink-image img {
vertical-align: middle;
}
.kaerebalink-info{
float: left;
width:230px;
}
.kaerebalink-name{
overflow: hidden;
padding-top: 5px;
height: 75px;
text-overflow: ellipsis;
word-wrap: break-word;
font-weight: bold;
line-height: 18px;
}
.kaerebalink-name a {
color:#333;

}
.kaerebalink-name a:hover {
color:#03f;

}
.kaerebalink-powered-date{
position: absolute;
right:0;
bottom:0;
margin-top:15px;
margin-right: 12px;
color: #999;
font-size: 10px;
}
.kaerebalink-powered-date a {
color: #999;
}
.kaerebalink-detail{
display:none;
}
.kaerebalink-link1{
float: left;
width: 230px;
}

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkyahoo,
.shoplinkyahooAuc,
.shoplinkseven,
.shoplinkkakakucom{
float: left;
margin: 3px 3px;
padding: 2px 5px;
width: 97px;
height:20px;
border: 1px solid rgba(0,0,0,0.4);
border-radius: 5px;
background: #666;
box-shadow: inset 0 -1px 3px rgba(0,0,0,0.5),
inset 0 1px 1px rgba(255,255,255,1);
text-align: center;
font-size: 13px;
line-height: 21px;
}

.shoplinkamazon:hover,
.shoplinkrakuten:hover,
.shoplinkyahoo:hover,
.shoplinkyahooAuc:hover,
.shoplinkseven:hover,
.shoplinkkakakucom:hover {
box-shadow: inset 0 2px 10px rgba(0,0,0,0.8),
inset 0 -1px 0px rgba(0,0,0,1);
}

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a,
.shoplinkyahooAuc a,
.shoplinkseven a,
.shoplinkkakakucom a {
display: block;
color:#fff;
text-shadow: 0 -1px 0 rgba(0,0,0,1),
0 1px 0 rgba(0,0,0,0.7);
font-weight: bold;
}

.shoplinkamazon{
background: #ff9900;
}
.shoplinkrakuten{
background: #bd0000;
}
.shoplinkyahoo{
background: #ff0033;
font-size: 10px;
}
.shoplinkyahooAuc{
background: #2d2d2d;
}
.shoplinkseven{
background: #314f91;
}
.shoplinkkakakucom{
background: #051d93;
}