CSSをインラインCSSに変換/Webサービス「Inline styler」
CSSを記述する際は、外部ファイルに記述するか、＜head＞＜/head＞内に＜style＞・・・・＜/style＞として記述することが多いかと思います。
＜タグ style=CSSを記述・・・・＞ といったインラインCSSを記述することはあまりないですよね。ソースが長くなり可読性が落ちたり、デザイン変更時の手間が増えたりと使われる機会が少ない、そんなインラインCSSですが必要になる場面も少なからず、まだあるんですよね。
本日は、あまり需要のなさそうなことなので使う場面は少ないかもしれませんが、もし必要になった時には作業効率にかなり影響しそうなCSSをインラインCSSに変換してくれるサービスを紹介したいと思います。
CSSをインラインCSSに変換してくれるWebサービス「Inline styler」
HTML email inline styler
http://inlinestyler.torchboxapps.com/
使い方は簡単、URLを指定するか、ソースを貼り付けて「Convert」ボタンをクリックするだけです。
たとえば、↓↓のようなソースを変換すると
メルマガ書き方の参考になるサイト
インラインCSSに変換後
メルマガ書き方の参考になるサイト
といった変換をしてくれるサービスになります。
わざわざ、インラインCSSへ変換することは、あまりないかとは思いますが、いくつか使えそうな場面を挙げてみます。
Yahoo!ショッピングのストア構築の際の手間削減
Yahoo!ショッピングのストアマネージャーでは、＜style＞・・・＜/style＞の記述でCSSを指定することが出来ません。それぞれのタグに直接記述するインラインCSSで書く必要があります。楽天など他ショップですでにデザインなどがあり、移行する場合は、面倒なCSSからインラインCSSへの変換の手間を削減出来るのではないでしょうか。
ただし、オプションサービス「トリプル」を使えば、外部CSSで構築することは可能です。有料なので利用しない方も多いかと思います。その場合には、インラインCSSへの変換サービスが役に立つかもしれません。
メルマガ(HTMLメール)作成時の手間削減
メルマガ作成する際には、HTMLメールを使っていることが多いのではないでしょうか。
HTMLでメルマガを作成する際に注意する点として、CSSの書き方があります。外部CSS、本文内に＜style＞・・・＜/style＞で作成した場合は、メールを受信して見る環境（パソコン、スマホ、メールソフト、Webメール・・・）によってはCSSが適用されないことがあります。
メルマガの装飾（CSS）を記述するのはインラインCSSで記述するのが一番良いとされていますので、メルマガ作成の際にインラインCSSへの変換をする際の手間削減にもなるかもしれません。
「CSS inliner」同様のサービスを紹介
さきほど紹介した「Inline styler」と同じくインラインCSSに変換してくれるサービスが他にもあります。
CSS inliner
変換元のCSSの書き方によってはうまく変換出来ない可能性もあるので、こういったサービスを複数知っておくと良いかもしれません。ぜひ、活用してみてください。
Your Message