9

Heroku で SendGrid サービスを使用しているため、HTML ベースのメールを送信すると、CSS が効果がないことに気付きました。何が問題なのか教えてもらえますか?

html.haml、html.erb として送信しようとしましたが、送信されたメールで画像が正しく表示されますが、両方とも機能しませんでした。

何か案が ？

4

5 に答える 5

13

外部スタイルシートの代わりにインライン スタイルを使用してみてください。このような：

<div style="color:green;" id="div"></div>

このようなものの代わりに：

<style>
    #div {
        color:green;
    }
</style>
    
<div id="div"></div>

（これを指摘してくれたKelvis Mihoに感謝します）

編集: Google で @Joe のテキストを検索したところ、そのほとんどが http://css-tricks.com/using-css-in-html-emails-the-real-story/からコピーされたものであることがわかりました。

編集: Joe が投稿を編集して参照リンクを含めました。

ほとんどの電子メール クライアントは多くの CSS をサポートしていないため、ほとんどの場合、画像と表の両方を使用する必要があります。

たとえば、素晴らしいメール デザインをコーディングして、スクリーンショットを作成できます。表を使用すると、ロゴを上部中央に配置し、スクリーンショットされた美しい「特集」ペインを左側に配置し、コンテンツとしての「割引」をロゴの下の中央に配置できます。

于 2012-12-29T20:28:58.270 に答える
8

できないこと:

  • スタイルのあるセクションを含めます。Apple Mail.app はサポートしていますが、Gmail と Hotmail はサポートしていません。Hotmail は本文のスタイル セクションをサポートしますが、Gmail はまだサポートしていません。
  • 外部スタイルシートへのリンク。これをサポートしている電子メール クライアントは多くありません。
  • 背景画像/背景位置。これもGmailが原因です。
  • フロートをクリアします。再びGmail。
  • マージン。ええ、真剣に、Hotmail は余白を無視します。基本的に、CSS の配置はまったく機能しません。
  • フォント何でも。Eudora は、フォントで宣言しようとするものを無視する可能性があります。

知っておくべきことは他にもたくさんあります。どのオンライン メール サービスが何をサポートしているかの完全なリストについては、Xavier Frenette のこの記事を参照してください。

あなたができること。

つまり、インライン スタイルです。私たちは基本的に 1 回限りのメールを開発しているので、インライン スタイルは Web サイトで使用するほどひどいものではありません。

このサイトから

于 2012-12-29T20:29:04.213 に答える
1

インライン スタイルを使用する必要があります。

于 2012-12-29T20:26:45.223 に答える
0

私にとって、premailer-rails gem は魔法のように機能します。このgemをGemfileに追加するだけです

gem 'nokogiri'
gem 'premailer-rails'

また、すべてのメールには、assets フォルダーのスタイルが含まれます。私は通常email.css.less、資産フォルダーに を作成し、次<head>のようにメールのに含めます。

<%= stylesheet_link_tag 'email.css' %>

また、画像を含める必要がある場合は、このヘルパーを見つけて、画像をメールに添付してロゴなどを含めることができます。

module EmailHelper
  def email_image_tag(image, **options)
    attachments[image] = File.read(Rails.root.join("public/#{image}"))
    image_tag attachments[image].url, **options
  end
end

そして .erb テンプレートで

<%= email_image_tag "img/logo.png", :class => "some-class" %>

それが誰かを助けることを願っています、よろしく

于 2016-04-17T20:10:28.990 に答える