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

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

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


CSSでカスタマイズ

カエレバではブログパーツを生成する際にamazlet風-2(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のクラスがこれだけ整頓されていればあとはポチポチとプロパティを追加していくだけです。

できたー

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

[/css]

なかなかいい感じにできたのではないでしょうか!

ボタンひとつひとつをロゴのキーカラーを拾って色付けしてみたのですが、ちょっと微妙?

でもCSSですからね!修正は簡単なので良しとします!

今回のポイント

今回はズルいデザインテクニックをアレンジして使わせてもらいました。

各ボタンはbox-shadowで疑似グラデーションを作り、それぞれにbackgroundで色をつけています。

カラー指定もrgba(255,255,255,1)rgba(0,0,0,1)を使用し、どんな色を使っても対応できる様にしています。

ズルいデザインテクニック様々ですな:)

そういえば…

思えばスマホ用のカエレバもそうですがshareHTMLも作ってないのでスマホから見られている方にとってはなんのこっちゃかわからんと思います。

スマホ用にもCSSをポチポチ作っていきたいと思います。

それから、ヨメレバのCSSカスタマイズもしたいですね。