MJML は、開発者が美しく、応答性に優れ、あらゆるデバイスやメール クライアントで動作する魅力的な電子メールを作成できる最新の電子メール ツールです。このマークアップ言語は、レスポンシブな電子メールの作成の手間を軽減するために設計されました。 セマンティック構文により、簡単に使用できます。また、開発時間を短縮する機能豊富な標準コンポーネントも備えています。このチュートリアルでは、MJML を使用して美しいレスポンシブな電子メールを作成し、複数の電子メール クライアントでテストします。 MJML を開始npm を使用して MJML をインストールし、Node.js または CLI で使用することができます。 $ npm インストール -g mjml メールの構成まず、email.mjml というファイルを作成しますが、他の名前を選択することもできます。ファイルが作成されると、レスポンシブ メールは次のセクションに分割されます。
コラムこれらのセクションは、レスポンシブな電子メールのフレームワークです。上記のように、メールは email.mjml ファイル内で 6 つのセクションに分割されます。 <mjml> <mj-本文> <!-- 会社ヘッダー --> <mj-section 背景色="#f0f0f0"></mj-section> <!-- 画像ヘッダー --> <mj-section 背景色="#f0f0f0"></mj-section> <!-- メール紹介--> <mj-section 背景色="#fafafa"></mj-section> <!-- 列セクション--> <mj-section 背景色="白"></mj-section> <!-- アイコン --> <mj-section 背景色="#fbfbfb"></mj-section> <!-- ソーシャル アイコン --> <mj-section 背景色="#f0f0f0"></mj-section> </mj-body> </mjml> 上記のように、2 つの MJML コンポーネント (mj-body と mj-section) を使用しています。 mj-body は電子メールの開始点を定義し、mj-section は他のコンポーネントを含むセクションを定義します。 定義されたセクションごとに、それぞれの 16 進数値を持つ background-color プロパティも定義されます。 会社ヘッダー当社の電子メールのこのセクションには、中央のバナー位置に当社の会社名/ブランド名のみが記載されています。 <!-- 会社ヘッダー --> <mj-section 背景色="#f0f0f0"> <mj-コラム> <mj-text フォントスタイル="太字" フォントサイズ="20px" align="center" カラー="#626262"> セントラルパーククルーズ </mj-text> </mj-column> </mj-section> mj-column コンポーネントは列を定義するために使用されます。 mj-text コンポーネントはテキスト コンテンツに使用され、フォント スタイル、フォント サイズ、色などのスタイル プロパティを取得します。 画像ヘッダーこのセクションでは、背景画像と会社のスローガンを表すテキストを入力します。さらに詳しい情報が記載されたページへ誘導する CTA ボタンも用意します。 画像のタイトルを追加するには、そのセクションの背景色を background-url に置き換える必要があります。最初の見出しと同様に、パディングをそのままにして、テキストを垂直方向と水平方向の両方で中央に配置する必要があります。 ボタンの href はボタンの位置を設定します。背景を列全体の幅で表示するには、列の幅を 600 ピクセル ( width="600px" ) に設定します。 当社の電子メールのこのセクションには、当社の会社名/ブランド名の中央バナー配置のみが含まれます。 <!-- 画像ヘッダー --> <mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055" 背景サイズ="カバー" 背景繰り返し="繰り返しなし"> <mj-column 幅="600px"> <mj-text align="center" カラー="#fff" フォントサイズ="40px" クリスマス割引 <mj-button background-color="#F63A4D" href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" > プロモーションを見る </mj-button> </mj-column> </mj-section> 画像ヘッダーを使用するには、jms-section コンポーネントに background-url プロパティを追加し、background-size プロパティと background-repeat プロパティを使用して画像のスタイルを設定します。 スローガン テキスト ブロックでは、align プロパティを使用して、テキストを水平方向と垂直方向の両方で中央揃えにします。必要に応じて、テキストの色、フォント サイズ、フォント ファミリなどを設定することもできます。 CTA ボタンは、mj-button コンポーネントを使用して実装されます。 background-color プロパティを使用すると、ボタンの背景色を指定できます。次に、href を使用してリンクまたはページの場所を指定します。 メール紹介紹介テキストは、タイトル、本文、行動喚起で構成されます。 <!-- 紹介テキスト --> <mj-section 背景色="#fafafa"> <mj-column 幅="400px"> <mj-text フォントスタイル="太字" フォントサイズ="20px" フォントファミリー="Helvetica Neue" 究極のクリスマス体験 <mj-text color="#525252"> 水分が蒸発せず、皮膚が腫れてしまうのではないかと心配です。樹液は強いので、簡単に吸収されてしまいます。樹液は強いので、簡単に吸収されてしまいます。 </mj-text> <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >詳細はこちら</mj-button> </mj-column> </mj-section> 列セクションこの電子メール セクションには 2 つの列があります。1 つは説明画像で、もう 1 つは最初のセクションの画像を補足するテキスト ブロックです。 <!-- サイドイメージ --> <mj-section 背景色="白"> <!-- 左の画像 --> <mj-コラム> <mj-image 幅="200px" src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/> </mj-column> <!-- 右段落 --> <mj-コラム> <mj-text フォントスタイル="太字" フォントサイズ="20px" フォントファミリー="Helvetica Neue" カラー="#626262"> 素晴らしい体験 </mj-text> <mj-text color="#525252"> Lorem ipsum dolor sit amet、consectetur adipiscing elit。 わだち掘れは非常に効率的なので、非常に効果的です。 アリクアムはヴォルトパット。クラース・イド・デュイ・レクタス。ヴェスティブルム・セッド・フィニバス レクタス。 </mj-text> </mj-column> </mj-section> 左側の最初の列では、mj-image コンポーネントを使用して、使用する画像を指定します。イメージはローカル ファイルでも、この場合はリモートでホストされているイメージでもかまいません。 右側の 2 番目の列には、タイトル用と本文テキスト用の 2 つのテキスト ブロックが含まれています。 アイコンアイコンセクションは 3 つの列に分かれています。メールの見た目に応じて、さらにコンテンツを追加することもできます。 <!-- アイコン --> <mj-section 背景色="#fbfbfb"> <mj-コラム> <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" /> </mj-column> <mj-コラム> <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" /> </mj-column> <mj-コラム> <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" /> </mj-column> </mj-section> 各列には独自の mj-image コンポーネントがあり、アイコン画像をレンダリングするために使用されます。 ソーシャルアイコンこのセクションには、当社のソーシャル メディア アカウントを指すアイコンが含まれます。 <mj-セクションの背景色="#e7e7e7"> <mj-コラム> <mj-ソーシャル> <mj-social-element name="インスタグラム" /> </mj-social> </mj-column> </mj-section> MJML には、ソーシャル メディア アイコンを簡単に表示できる mj-social コンポーネントが付属しています。私たちの電子メールでは、Twitter の mj-social-element を使用しました。 すべてをまとめるとこの時点で、すべての部分が実装されており、完成した email.mjml は次のようになります。 <mjml> <mj-本文> <!-- 会社ヘッダー --> <mj-section 背景色="#f0f0f0"> <mj-コラム> <mj-text フォントスタイル="太字" フォントサイズ="20px" align="center" カラー="#626262"> セントラルパーククルーズ </mj-text> </mj-column> </mj-section> <!-- 画像ヘッダー --> <mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055" 背景サイズ="カバー" 背景繰り返し="繰り返しなし"> <mj-column 幅="600px"> <mj-text align="center" カラー="#fff" フォントサイズ="40px" クリスマス割引 <mj-button background-color="#F63A4D" href="#" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" rel="外部 nofollow" > プロモーションを見る </mj-button> </mj-column> </mj-section> <!-- メール紹介 --> <mj-section 背景色="#fafafa"> <mj-column 幅="400px"> <mj-text フォントスタイル="太字" フォントサイズ="20px" フォントファミリー="Helvetica Neue" 究極のクリスマス体験 <mj-text color="#525252"> 水分が蒸発せず、皮膚が腫れてしまうのではないかと心配です。樹液は強いので、簡単に吸収されてしまいます。樹液は強いので、簡単に吸収されてしまいます。 </mj-text> <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >詳細はこちら</mj-button> </mj-column> </mj-section> <!-- 列セクション --> <mj-section 背景色="白"> <!-- 左の画像 --> <mj-コラム> <mj-image 幅="200px" src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/> </mj-column> <!-- 右段落 --> <mj-コラム> <mj-text フォントスタイル="太字" フォントサイズ="20px" フォントファミリー="Helvetica Neue" カラー="#626262"> 素晴らしい体験 </mj-text> <mj-text color="#525252"> Lorem ipsum dolor sit amet、consectetur adipiscing elit。 わだち掘れは非常に効率的なので、非常に効果的です。 アリクアムはヴォルトパット。クラース・イド・デュイ・レクタス。ヴェスティブルム・セッド・フィニバス レクタス。 </mj-text> </mj-column> </mj-section> <!-- アイコン --> <mj-section 背景色="#fbfbfb"> <mj-コラム> <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" /> </mj-column> <mj-コラム> <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" /> </mj-column> <mj-コラム> <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" /> </mj-column> </mj-section> <!-- ソーシャル アイコン --> <mj-セクションの背景色="#e7e7e7"> <mj-コラム> <mj-ソーシャル> <mj-social-element name="インスタグラム" /> </mj-social> </mj-column> </mj-section> </mj-body> </mjml> アプリケーションの実行電子メールの作成が完了したので、コンパイルしてどのように見えるか確認してみましょう。これを行うには、ターミナルに次のように入力します。 mjml -r email.mjml -o .
MJML のコンパイルが完了すると、同じディレクトリに email.html ファイルが表示されます。 お気に入りのメール クライアントまたはブラウザーで開くと、次の画像のようになります。 要約する先ほど見たように、MJML は、複数のブラウザーやクライアントで応答する高品質で美しい HTML メールを生成するのに役立ちます。 Vue.js と MJML を使用してレスポンシブなメールを作成する方法についての記事はこれで終わりです。Vue.js と MJML を使用してレスポンシブなメールを作成する方法の詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows 上の MySQL バージョン 5.7 でエンコードを UTF-8 に変更する方法
>>: Linux で ARM 開発ボード用のファイルシステムを作成する
Vue ファースト スクリーン パフォーマンス最適化コンポーネントVue ファースト スクリーン パ...
目次1. コマンド2. docker-compose.yml 3. Dockerファイル4. 直接変...
序文MySQL の日常的な開発やメンテナンスでは、パスワードの紛失やテーブルの破損など、避けられない...
この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...
単一の MYSQL サーバーが現在の Web サイトのトラフィックに対応できない場合の最適化ソリュー...
ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...
ログインページなどのホームページを作成する場合、大きな背景画像を配置する必要があり、さまざまな画面の...
JavaScript 入門JavaScript は軽量なインタープリタ型の Web 開発言語です。言...
mysqlに接続できない問題の解決方法を参考までに紹介します。具体的な内容は以下のとおりです。昨日は...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
ssh に入り、次のコマンドを入力してパスワードをリセットします (コマンドの末尾の「testpas...
目次1. 電卓機能の紹介2. 計算機ページのデザイン1. ナビゲーションバー2. データ部分3. i...
nginx パニック問題に関しては、まず nginx の起動プロセス中に、マスター プロセスが構成フ...
説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...
日付型の違いと用途MySQL には、日付、時刻、年、日付時刻、タイムスタンプの 5 つの日付タイプが...