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

タイムライン

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

泣いた。

最近ちまちま自分のブログのCSSなんかを変更かけてるんですが、クラスとかいちいちアレするのがめんどうなんですよね。もう、面倒。

この辺の面倒さというか、ちまちま感がカスタマイズしてみたいけど、なんかアレだわって人多いと思います。はい。

そんなわけで、コーディングするためのタグやらコードやらを一撃で自動作成してくれるの、あります。

CSSで装飾したいHTMLを放り込むと、そこからタグやセレクタを拾ってまとめて整形して、あとはCSSを書くだけの状態に持って行ってくれます。
さらに言うと、HTMLはクリーンな状態じゃなくても、ちゃんと認識してくれるので、最高クラスに助かります。

OneClickCSS

もっと具体的に

どういう風にえげつないかと言うと、

商品とか書籍とかを紹介する神ブログパーツ

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

おなじみですね。

コチラはデフォルトでそこそこいい感じにしてくれるテンプレを備えているんですが、そこはなんていうか、自分で制御したい!訳じゃないですか。いやまあ、僕はね。

そこでCSSでいい感じにしてくれるわ!と思うんですが、クラスやらをいちいちアレするのがアレな訳で。

そこで、先に紹介した「OneClickCSS」の登場ですが

<div class="kaerebalink-box"><div class="kaerebalink-image"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00ALVD91A/ref=nosim/" rel="nofollow" target="_blank"><img class="lazyload" src="https://images-fe.ssl-images-amazon.com/images/I/4107N7qRiHL._SL160_.jpg" style="border: none;" /></a></div><div class="kaerebalink-info"><div class="kaerebalink-name"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00ALVD91A/link-detail"> お店</div><div class="kaerebalink-link1"><div class="shoplinkamazon"><a href="http://www.amazon.co.jp/gp/search?keywords=iOS6.1%20iPhone5%2FiPad&__mk_ja_JP=%83J%83%5E%83J%83i&tag" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten"><a href="http://hb.afl.rakuten.co.jp/" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div><div class="shoplinkkakakucom"><a href="http://kakaku.com/search_results/iOS6.1%20iPhone5%2FiPad/" rel="nofollow" target="_blank" title="kakakucom" >価格.com</a></div></div></div><div class="booklink-footer"></div></div>

具体的に言うと、こういう風にカエレバで作成されたコード、ありますね。ちなみにCSS用のカスタマイズコードを選択してます。インラインでstyleを書かれてしまうともうお手上げですので。

もうなんて言うか、ここからクラス拾うとか考えるだけで、見て見ぬふりですよ。でもまあ、

こいつをそのまま

2013-3-7-04

このボックスに放り込む。もう、そのまま放り込む。いろいろHTML書いてあるけど、もう、そのまま。

そして、とりあえずボタンを押してみると。

.kaerebalink-box{
}
.kaerebalink-image{
}
.kaerebalink-info{
}
.kaerebalink-name{
}
.kaerebalink-powered-date{
}
.kaerebalink-detail{
}
.kaerebalink-link1{
}
.shoplinkamazon{
}
.shoplinkrakuten{
}
.shoplinkkakakucom{
}
.booklink-footer{
}

こんな感じでクラスを拾ってくれたり

div.kaerebalink-box {
}
div.kaerebalink-box div.kaerebalink-image {
}
div.kaerebalink-box div.kaerebalink-image a {
}
div.kaerebalink-box div.kaerebalink-image a img {
}
div.kaerebalink-box div.kaerebalink-info {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-name {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-name a {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-name div.kaerebalink-powered-date {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-name div.kaerebalink-powered-date a {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-detail {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-link1 {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-link1 div.shoplinkamazon {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-link1 div.shoplinkamazon a {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-link1 div.shoplinkrakuten {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-link1 div.shoplinkrakuten a {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-link1 div.shoplinkkakakucom {
}
div.kaerebalink-box div.kaerebalink-info div.kaerebalink-link1 div.shoplinkkakakucom a {
}
div.kaerebalink-box div.booklink-footer {
}

子孫タグなんかまで詳細に整形した状態でポンと出力される!

マジか!マジなのか!

idの指定があればコメント付きだと!

と、死ねるほど便利なんですよ。

当然全部を装飾する必要なんてないわけですからね、必要なものだけゴニョればいいわけだわ。

LESSやSASSなんかにも対応しているので、バサッとゴニョりたい人出も安心!

ここまで一瞬でやってくれたら、なんかやる気も起きますよね。

記事関連アイテムですわ

やろうと思えばこんな感じで、自分でもろもろ制御出来るんです。

ちなみに「書籍紹介ブログパーツ ヨメレバ」を使っています。

これは便利ですぞ。
OneClickCSS

文:シンタロヲフレッシュ

一緒に読んで欲しい記事

前の記事(Previous)
【jQueryプラグイン】ブラーがかかった背景の上にソーシャルシェアボタンが出現するプラグインが実にオシャレ!
次の記事(Next)
ブロガーやwebマスターなら見ないと損だわGoogle公式「ウェブマスター アカデミー」