画像なしの Outlook メールで角を丸くする方法

画像を使用しない Outlook での丸い角のスタイル設定

電子メール クライアントでの丸い角の作成は、CSS を使用すると簡単に行うことができます。ただし、CSS border-radius プロパティを使用する従来の方法は、Microsoft Outlook では機能しません。この制限は、角の丸い要素を含む電子メールをデザインするときに課題となります。

心配する必要はありません。Outlook では、画像を使用せずに角を丸くすることができるソリューションがあります。重要なのは、Outlook の条件付きコメントと VML (Vector Markup Language) を利用することにあります。

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
        Button Text Here!
    </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> -->
<!--<![endif]-->

このコードは、Outlook 2010 で角の丸いボタンを生成します。Outlook の条件付きコメントを使用して、特に Outlook をターゲットにし、VML コードを適用します。 。 VML コード自体は、丸みを帯びた長方形の形状とその属性 (色やテキストなど) を定義します。

このソリューションは Outlook 2010 と主要なブラウザーでテストされていますが、OWA、Outlook.com、またはモバイル ブラウザーではテストされていないことに注意してください。 。互換性を確保するために、さまざまなプラットフォームでコードをテストすることを常にお勧めします。

以上が画像なしの Outlook メールで角を丸くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。