HTMLからclassを抽出するWebサービス「OneClickCSS」

OneClickCSS

最近ブログのCSSカスタマイズをすることが多いからかHTMLの中からclassを綺麗に抽出してくれる OneClickCSS が大いに役立っています。サイトを開いてHTMLをコピペするだけなので簡単です。

スポンサーリンク

OneClickCSSでできること

OneClickCSSを使うとHTMLタグの中からCSSで使うclassの部分だけを抜き出してシンプルで編集しやすい形にしてくれます。

↓例えばこういうごちゃごちゃしたHTMLタグの中から、

↓こういうふうにclass部分だけを綺麗に抜き出してくれてあとは自分で追記すればCSSカスタマイズできるようにしてくれます。

もしOneClickCSSが無かったら自分で「class」を検索してコピペすることになるので効率が全然違います。

OneClickCSSの使い方

使い方は簡単。OneClickCSSの公式サイトにアクセスしてHTMLを貼り付けしてからボタンをポチっとするだけです。

classを抽出したいHTMLをコピー

カエレバリンクコピー

※例として カエレバ のHTMLを使っています。

OneClickCSSに貼り付け

OneClickCSSのサイトの左側にHTMLを貼り付けする欄があるのでそこに貼り付けします。

OneClickCSS入力欄

真ん中にあるボタンをクリックしたら右側に抽出した内容が表示されます。大抵の場合は一番上にある「Simple CSS」をクリックすればOK。

OneClickCSS変換

あとは右側に出力されたテキストをコピーしてCSSのカスタマイズなどに利用します。

リンク作成のWebサービスで使うと便利

アフィリエイトリンクを作成するようなWebサービスのHTMLタグで使うと簡単にclassを抽出できるのでとても相性が良くておすすめです。

代表的なサービスをリストアップしてみるといろいろありますね。

どのサイトもHTMLタグの中にclassがたくさんあるのでOneClickCSSを使えばかなり効率化できます。

<関連>
WordPressビジュアルエディタのCSSに実際の表示を適用する方法

素早くCSSを見れるChrome拡張機能「CSSViewer」

極限までChromeを便利にする拡張機能まとめ

スポンサーリンク

このページのシェア・保存はこちら

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。