分割ベースのメーリングリスト:可能です!

ハブのメーリングリストのトピックは最近取り上げられましたが、ここではカバーされていませんでした。このメーリングの内容を美しくきれいにレイアウトした後に編集できるようにする方法です。



実際、インデント用の空のgifを含むテーブルにレイアウトすると、結果は「モノリシック」になりますが、コンテンツマネージャーが編集することは禁じられています。 すべてが即座に行きます、そして、visivigiはそのような恐怖で働く方法を知りません。



保守が容易で、パーツからの郵送に便利に組み立てられ、visivigから編集でき、同時にメールの見栄えがよくなる、通常の素晴らしいレイアウトを準備することは可能ですか?





要するに、クライアントに送信されるHTMLファイルの要件を繰り返しません。

  1. 外部スタイル、<style>タグはありません。 必要なものはすべてstyle属性にある必要があります。 ああ、javascriptはありません。
  2. 負の値はありません。 一般的に。 負のマージン、負のパディング-彼らはただ蹴ります。 なんて間違ってる。
  3. 値にスペースは含まれません。 一般的に。 はい、はい。 さようなら背景位置。
  4. 背景画像の問題。 属性background = "" at <table>-works、background-image-ルールとしては機能しません。 はい、はい、2回目のバックグラウンドポジションは別れです。
  5. 100%テキストビュー。 グラフィック要素は、見た目がまったく事実ではなく、ユーザーがクリックして「ダウンロード」するという事実でもありません。


さらにいくつかの「微妙な」ポイントがあります。たとえば、高さはmin-heightのある「あまりにもスマートな」ウェブメール(指を突くのはやめましょう)に置き換えることができ、興味深い効果を生み出すことができます。 そのようなモーメントは、高さ+最大高さのペアを追加することにより、簡単に解決されます。



そのため、タスク:正しい素晴らしいレイアウトのHTML入力があり、そのためのCSSがあります(その中に書かれているか、個別に設定されています-それはポイントではありません)。 ユーザーに送信できるHTMLを生成する必要があります。 手動処理​​のオプションも考慮していません。自動化できるものはすべて自動化する必要があります。



問題No. 1を解決するために、Emogrifierはgoogledでした。 彼は何をしていますか? <body>タグのHTMLコンテンツと一般的なCSSファイルを入力として受け取り、すべてのclass / id属性を、必要なスタイルを含むstyle = ""属性に置き換えます。 利益!



問題No. 2の解決策は、やや複雑な素晴らしいレイアウトと、最初は要素を重ねて配置する必要のないレイアウトです。



問題3の解決策は簡単です-すべての複合パラメーターは独立したパラメーターに分割されます。 つまり、マージンの代わりに、マージン上部、マージン下部、マージン左、マージン右を追加します。 パディング、背景、フォントでも同様です。 はんだごてとそのような母親とのデュエットは、簡単にエモグリファーのパッチを作成し、この調整を解除しました。



問題4の解決策はより複雑です。 そのため、ここでは<h2> </h2>



をピンク色の虹色の背景(または右側に丸い角を付けて表示)に表示します。 レイアウトは些細に見えます:

 #content h2{ background: url(../images/h2-bg.png) no-repeat left top #ef5580; width: 627px; height: 25px; margin: 24px 0 13px 0px; padding: 6px 31px 0 31px; font-size: 17px; font-family: Georgia, Tahoma, Verdana, Arial, FreeSans, sans-serif; color: white; font-weight: normal; }
      
      





しかし、それはほとんど機能しません! なんで? 値のスペース、background-urlを使用した画像。 解決策? 次のようなものに再パッケージ化する必要があります。

 <table background="images/h2-bg.png" bgcolor="#ef5580" border=0 style="border-collapse:collapse;margin:24px 0 13px"><tr><td><h2 style="padding:6px 31px 0;font:...;color:white;"> </h2></td></tr></table>
      
      







このソリューションを実装するために、より厚いファイルが使用され、そのような母親は年をとり、その助けを借りてエモグリファーがさらに処理され、その結果、スタイルに新しいtablifyプロパティが表示されました。 可能な値:ラップ、置換、埋め込み。



あなたのレイアウトのためにそれらで遊んでください。 レイアウトをシャープにする必要はないと思います。



次の記事では、問題5の解決策について説明します。 そこで、画像にアクセスできない場合に利用できるテキストを含む写真の下に、テキストの下地を実装するために使用される技術についてお話します。



この苦しみと失望の結果は、顕微鏡アーカイバーemogrifier-dcb-1.0.tar.bz2(6k)に示されています。



感じ方は? 解凍します。 htmlおよびhtml /スタイル/フォルダーを内部に作成します。 index.htmlをそこに、そしてスタイル-screen.cssに入れます。 (まあ、sender.phpのパスを修正します。それからmailer.conf.phpでSMTPのパラメーターを送信し、sender.phpで$ remoteを修正して、ファイルが利用可能な実際の外部アドレスを$ headers配列に示します-正しい記述FromおよびTo(コンマで区切って複数指定できます。)sender.phpを実行し、チェックボックスを実行します。



PMまたはコメントで、既存のレイアウトをメーリングリストに適合させることについて質問することができますが、必要に応じて次の投稿に主要な資料が掲載されます。



ps:このポストプロセッサはAstro7の実稼働環境でかなり使用されています 。 結果を楽しみたい人は、異なるメールボックスから自分の星占いを購読することができます:)



All Articles