web-dev-qa-db-ja.com

電子メールのHTMLコードを作成するためにCSSスタイルを自動的にインライン化するツールは何ですか？

http://www.campaignmonitor.com/css/ を見ると、メールクライアントでメールを読むためにHTMLにインラインスタイルを埋め込む必要があることがわかります。 。

宣言されたHTMLファイルを、インラインCCSスタイル属性のみを持つHTMLファイルに自動的に変換するツールまたはスクリプトを知っていますか？

Edit：Javascriptソリューション（つまり： http://www.robertnyman.com/2006/04/24/get-the-要素のレンダリングスタイル/ ）？ jQueryで？

htmlcssemailinlinehtml-email
123
Pierre-Jean Coudert

premailer.dialect.ca オンラインコンバーターまたはこの Pythonスクリプト を確認してください。

79
Saleh Al-Zaid

インラインツールをすぐに使用できるWebベースのリストを次に示します。以前にいくつか触れました。見逃したものがあれば、気軽に編集して追加してください。私はそれぞれの作品を宣伝通りに約束することはできませんので、コメントを落としてください、しかしメッセンジャーを撃ってはいけません...

そして、これは逆に機能するものです（CSSのインライン展開を解除します）

33
John

PHPソリューションが必要な場合は、 CssToInlineStyles を試してください。

20
chiborg

2つのC＃バリアント：

http://chrispebble.com/Blog/7/inlining-a-css-stylesheet-with-c

PreMailer.Net- https://github.com/milkshakesoftware/PreMailer.Net

まだテストしていませんが、もし私がやった場合はポストバックします。

10
GFoley83

Styliner という名前のNode.jsライブラリを作成しました。これは、サーバー側のJavaScriptでCSSをインライン化します。

LESSスタイルシートもサポートしています（他の形式のプラグインもサポートしています）

8
SLaks

PostageApp をご覧ください。

本当に強力な機能の1つは、HTMLとCSSを問題なく自動的にインライン化できる非常に堅牢なテンプレートシステムを備えていることです。

（完全開示：私はPostageAppのプロダクトマネージャーです。）

7
JonLim

これは少し遅すぎるかもしれませんが、HTMLを電子メールマーケティングに最適なものにしたい場合（CSSをインライン化し、他のクールなツールを使用して）、 Premailer を使用します。その無料、そしてもちろん、CampaignMonitor自体とのパートナーシップで作られました。

それが役に立てば幸い。

6
André Armenni

私はゲームに少し遅れていますが、うまくいけばこれが誰かを助けるでしょう。

ページに埋め込むことができるこの素敵な小さなjQuery/javascriptメソッドを見つけました- http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes -using-jquery /

IEをサポートし、スタイルを正しい順序で適用する複数のCSSファイルが添付されたページをサポートするために、少し編集しました。

$(document).ready(function ($) {
            var rules;
            for(var i = document.styleSheets.length - 1; i >= 0; i--){
                if(document.styleSheets[i].cssRules)
                    rules = document.styleSheets[i].cssRules;
                else if(document.styleSheets[i].rules)
                    rules = document.styleSheets[i].rules;
                for (var idx = 0, len = rules.length; idx < len; idx++) {
                    if(rules[idx].selectorText.indexOf("hover") == -1) {
                        $(rules[idx].selectorText).each(function (i, elem) {
                            elem.style.cssText = rules[idx].style.cssText + elem.style.cssText;
                        });
                    }
                }
            }
            $('style').remove();
            $('script').remove();
            $('link').remove();
        });

その後、ページをコピーしてメール本文に貼り付けることができます。

5
John C

CSSを単にインライン化するだけでは不十分です。どの電子メールクライアントが使用された場合でも、HTML電子メールがどのように表示されるかについて、標準はありません。それらはすべて異なった方法で行われ、メールを設計すればするほど、より多くのクライアントに侵入する可能性が高くなります。この分野の多くの専門家は、単に画像とテーブルを使用し、背景色も使用しますが、それ以外は使用しません。電子メールの作業コピーがあるWebサイトへのリンクを常に含め、常にプレーンテキストのバリエーションを提供します。

5
Bjorn Tipling

ここtikkuによるjavascriptソリューション： https://tikku.com/open-source/utilities/css-inline-transformer/

5
EpokK

Mailchimpの別の1つ http://beaker.mailchimp.com/inline-css

2
palaniraja

PHPプログラマー：これを確認するには オンラインコンバーター またはこの PHPスクリプト を確認してください。

1
Peter Krauss