web-dev-qa-db-ja.com

画像のないOutlookの角丸

多くのクライアントで丸い角を作成できます

style="-moz-border-radius: 15px; border-radius: 15px;"

ただし、このCSSはOutlookで角丸を作成しません。 Outlookで画像なしで角を丸くする簡単な方法はありますか？

htmlcssemail
22
Danny

http://www.campaignmonitor.com/css/ は、主要な電子メールクライアントでサポートされているすべてのcssを表示します。丸みを帯びた境界線は、リストに入れませんでした。このページには、完全なPDFへのリンクがあり、境界線の半径はThunderbird 2でのみサポートされています。

幅広い電子メールクライアントをサポートするには、html要素にスタイルを埋め込む必要があることに注意してください

11
Benjamin Udink ten Cate

このコードは、Outlookの条件付きコメント（）およびVMLを使用して、Outlook 2010で角が丸いボタンを生成します。

    <div>
    <!--[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]> <!-->
    <table cellspacing="0" cellpadding="0"> <tr>
        <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
            <a href="http://www.EXAMPLE.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
                Button Text Here!
            </a>
        </td>
    </tr> </table>
    <!-- <![endif]-->
</div>

OWA、Outlook.com、またはモバイルブラウザーではなく、Outlook 2010および主要なブラウザーでのみテストされています。よく見る価値があります。クレジットの期限- http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/

45
VanAlbert

Eli Dickinsonのすばらしい仕事を示す@VanAlbertsの回答にさらに。 Eliのgitリポジトリへのリンクはこちら https://Gist.github.com/elidickinson/9424116

私は、内部のテキストに基づいて動的な幅のボタンを許可するEliのコードの改善点を共有すると思いました。

私はこれを見つけました https://litmus.com/community/discussions/538-vml-Outlook-07-10-13-unwanted-20px-padding-at-the-bottom これは使用方法を示していますmso-fit-shape-to-text:true

そして、これは https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons で、不要なパディングを回避する方法を示しています。

これが私の最終結果です

<div>
<!--[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="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
    <v:textbox style="mso-fit-shape-to-text:true">
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
    </v:textbox>
  </v:roundrect>
  <![endif]-->
  <![if !mso]>
  <table cellspacing="0" cellpadding="0"> <tr> 
  <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
    <a href="http://www.EXAMPLE.com/" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
    <span style="color: #ffffff;">
      Button Text Here!
    </span>
    </a>
  </td> 
  </tr> </table> 
  <![endif]>
</div>

Wordを使用してHTMLをレンダリングするOutlook 2016でうまく機能しているようです

2
Rel

丸い角を使用しないことをお勧めします。Litmusを使用して、複数のクライアントで長時間テストした後、次のような方法を使用して角を丸くします。

<div>
<!--[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="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
    <v:textbox style="mso-fit-shape-to-text:true">
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
    </v:textbox>
  </v:roundrect>
  <![endif]-->
  <![if !mso]>
  <table cellspacing="0" cellpadding="0"> <tr> 
  <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
    <a href="http://www.EXAMPLE.com/" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
    <span style="color: #ffffff;">
      Button Text Here!
    </span>
    </a>
  </td> 
  </tr> </table> 
  <![endif]>
</div>

このタイプのコードをGMAILに転送すると、転送時にGMAILで中断します。条件が含まれなくなるため、GMAILを再作成しようとし、例として次のコードを生成します。

<div style="margin-top:36.0pt">
   <p class="MsoNormal" align="center" dir="RTL" style="text-align:center;direction:rtl;unicode-bidi:embed">
      <span dir="LTR" style="font-size:11.5pt;font-family:&quot;Arial&quot;,sans-serif;color:#2d3b4a">
         <u></u>
         <span>
            <map name="m_3406853463519709989_MicrosoftOfficeMap0">
               <area shape="Polygon" coords="38, 2, 13, 12, 3, 37, 13, 62, 38, 72, 228, 72, 253, 62, 263, 37, 253, 12, 228, 2, 38, 2" href="https://local.greeninvoice.co.il/app/account/verify?key=001dEbYWSscdPxI8xt6BcS%2B%2BrA%3D%3D" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://local.greeninvoice.co.il/app/account/verify?key%3D001dEbYWSscdPxI8xt6BcS%252B%252BrA%253D%253D&amp;source=gmail&amp;ust=1520336994067000&amp;usg=AFQjCNE1iYP97qNrlsCccYFgDyRW3iVPRw">
            </map>
            <img border="0" width="264" height="74" src="?ui=2&amp;ik=4e1d22bf20&amp;view=fimg&amp;th=161f5fb79e36447b&amp;attid=0.1&amp;disp=emb&amp;attbid=ANGjdJ_3ejUStIrGp0uslTPSXPSph1LGDDnyTH2gHxWhcMpCHN_CjO4ZYsqbvqZJ9gXCxQ7e3KHV2CAn0f-FWPYH7w7lTM9ym54909Upm-h_G9W--o_I431bc9U3icg&amp;sz=w528-h148&amp;ats=1520250594056&amp;rm=161f5fb79e36447b&amp;zw&amp;atsh=1" usemap="#m_3406853463519709989_MicrosoftOfficeMap0" alt="Rounded Rectangle: הפעלת החשבון " class="CToWUd">
         </span>
         <u></u>
      </span>
      <span lang="HE" style="font-size:11.5pt;font-family:&quot;Arial&quot;,sans-serif;color:#2d3b4a"><u></u><u></u></span>
   </p>
</div>

ご覧のとおり、VMLはMicrosoft独自の言語であり、Outlookは転送時にそれをマップに変換するため、幅、高さ、テキスト、スタッフの中心が崩れます

enter image description here

1
dinbrca