0
私はZurb Foundation for Email 2を使用しており、ソーシャルメディアのアイコンを左に揃えるのは困難です。私はこの環境で動作するソリューションを探しています。ZurbのAlignedソーシャルメディアアイコン
drip.htmlテンプレートからこのコードを使用すると、ページ上に5つのアイコンがうまく表示されます。
<row class="collapsed footer">
<columns>
<center>
<menu>
<item><img src="http://placehold.it/25/663399" alt=""></item>
<item><img src="http://placehold.it/25/663399" alt=""></item>
<item><img src="http://placehold.it/25/663399" alt=""></item>
<item><img src="http://placehold.it/25/663399" alt=""></item>
<item><img src="http://placehold.it/25/663399" alt=""></item>
</menu>
</center>
</columns>
</row>
この2つのタグは、多くの電子メールクライアントでサポートされていないと私は理解しています。私は、Zurbでビルドコードを実行すると、<menu>と<item>のタグが自動的にテーブルでスワップアウトされることを追加したいと思います。
<center>タグを削除すると、ページの幅にアイコンが広がります。
<table class="menu" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
<tbody><tr style="font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; padding: 0; text-align: center; vertical-align: top">
<td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; Margin-bottom: 10px; border-collapse: collapse !important; color: #000000; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: center; vertical-align: top; word-wrap: break-word">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%">
<tbody><tr style="font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; padding: 0; text-align: center; vertical-align: top">
<th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
<th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
<th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
<th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
<th class="menu-item float-center" style="Margin: 0; Margin-bottom: 10px; color: #000000; float: none; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-size: 12px; font-weight: 300; line-height: 1.3; margin: 0; padding: 10px; padding-right: 10px; text-align: center"><a href="undefined" style="Margin: 0; Margin-bottom: 10px; color: #2199e8; font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 300; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none"><img src="http://placehold.it/25/663399" alt="" style="-ms-interpolation-mode: bicubic; border: none; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto"></a></th>
</tr></tbody>
</table>
</td>
</tr></tbody>
</table>
私はコードを試してみましたが、アイコンを左に流して見栄えを良くすることができません。これを単純な表に置き換えると、Zurb用に書かれたすべてのスタイルのために同様の効果が得られます。そのため、不安定な修正になります。
私はちょうど見落としてしまったZurb Foundationで動作するソリューションがあるのだろうかと思っていました。