最近ブログのCSSカスタマイズをすることが多いからかHTMLの中からclassを綺麗に抽出してくれる OneClickCSS が大いに役立っています。サイトを開いてHTMLをコピペするだけなので簡単です。
OneClickCSSでできること
OneClickCSSを使うとHTMLタグの中からCSSで使うclassの部分だけを抜き出してシンプルで編集しやすい形にしてくれます。
↓例えばこういうごちゃごちゃしたHTMLタグの中から、
|
1 |
<div class="booklink-box"><div class="booklink-image"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000UEZ37G/pasolabo-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/31LbhpNAuBL._SL160_.jpg" style="border: none;" /></a></div><div class="booklink-info"><div class="booklink-name"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000UEZ37G/pasolabo-22/ref=nosim/" rel="nofollow" target="_blank">SteelSeries QcK mini マウスパッド 63005</a></div><div class="booklink-powered-date">posted with <a href="http://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div><div class="booklink-detail"> SteelSeries </div><div class="booklink-rank">売り上げランキング : 82<br /></div></div><div class="booklink-footer" style=""><div class="shoplinkamazon" style="display:inline; padding-right:5px;"><a href="http://www.amazon.co.jp/gp/search?keywords=QcK%20mini%20%83%7D%83E%83X%83p%83b%83h&__mk_ja_JP=%83J%83%5E%83J%83i&tag=pasolabo-22" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten" style="display:inline; padding-right:5px;"><a href="http://hb.afl.rakuten.co.jp/hgc/0398cdce.c3ee1b50.059bb4ad.6e4ddff4/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FQcK%2520mini%2520%25E3%2583%259E%25E3%2582%25A6%25E3%2582%25B9%25E3%2583%2591%25E3%2583%2583%25E3%2583%2589%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div></div><div class="booklink-footer" style="clear: left"></div></div> |
↓こういうふうにclass部分だけを綺麗に抜き出してくれてあとは自分で追記すればCSSカスタマイズできるようにしてくれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.booklink-box{ } .booklink-image{ } .booklink-info{ } .booklink-name{ } .booklink-powered-date{ } .booklink-detail{ } .booklink-rank{ } .booklink-footer{ } .shoplinkamazon{ } .shoplinkrakuten{ } |
もしOneClickCSSが無かったら自分で「class」を検索してコピペすることになるので効率が全然違います。
OneClickCSSの使い方
使い方は簡単。OneClickCSSの公式サイトにアクセスしてHTMLを貼り付けしてからボタンをポチっとするだけです。
classを抽出したいHTMLをコピー
※例として カエレバ のHTMLを使っています。
OneClickCSSに貼り付け
OneClickCSSのサイトの左側にHTMLを貼り付けする欄があるのでそこに貼り付けします。
真ん中にあるボタンをクリックしたら右側に抽出した内容が表示されます。大抵の場合は一番上にある「Simple CSS」をクリックすればOK。
あとは右側に出力されたテキストをコピーしてCSSのカスタマイズなどに利用します。
リンク作成のWebサービスで使うと便利
アフィリエイトリンクを作成するようなWebサービスのHTMLタグで使うと簡単にclassを抽出できるのでとても相性が良くておすすめです。
代表的なサービスをリストアップしてみるといろいろありますね。
どのサイトもHTMLタグの中にclassがたくさんあるのでOneClickCSSを使えばかなり効率化できます。
＜関連＞
⇒WordPressビジュアルエディタのCSSに実際の表示を適用する方法
