CSSをインラインCSSに変換してくれるWebサービス「Inline styler」

公開日:  最終更新日:2015/12/16

CSSをインラインCSSに変換してくれるWebサービス「Inline styler」
CSSを記述する際は、外部ファイルに記述するか、<head></head>内に<style>・・・・</style>として記述することが多いかと思います。

<タグ style=CSSを記述・・・・> といったインラインCSSを記述することはあまりないですよね。ソースが長くなり可読性が落ちたり、デザイン変更時の手間が増えたりと使われる機会が少ない、そんなインラインCSSですが必要になる場面も少なからず、まだあるんですよね。

本日は、あまり需要のなさそうなことなので使う場面は少ないかもしれませんが、もし必要になった時には作業効率にかなり影響しそうなCSSをインラインCSSに変換してくれるサービスを紹介したいと思います。

スポンサードリンク

CSSをインラインCSSに変換してくれるWebサービス「Inline styler」

143-1.png
HTML email inline styler
使い方は簡単、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に変換してくれるサービスが他にもあります。
143-2.png
CSS inliner
変換元のCSSの書き方によってはうまく変換出来ない可能性もあるので、こういったサービスを複数知っておくと良いかもしれません。ぜひ、活用してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑