Outlook2007でHTMLメルマガを作成する際の背景画像表示の問題

このQ&Aのポイント
  • Outlook2007を対象メーラーにし、HTMLメルマガを作成している際に、CSSでbackgroundを書くと表示されない問題が発生します。
  • 調査の結果、VMLという書き方を使うことで背景画像を表示することができることがわかりました。
  • ただし、CSSのrepeat-yを使った繰り返し表示ができない問題があります。VMLで背景画像の繰り返し表示をする方法をご存知の方、教えていただけませんか?また、CSSでheight:100%という高さ指定をすることは可能でしょうか?
回答を見る
  • ベストアンサー

現在、outlook2007を対象メーラーにし、HTMLメルマガを作成

現在、outlook2007を対象メーラーにし、HTMLメルマガを作成しているのですが、そのままCSSでbackgroundと書くと、outlook2007表示ができないので、いろいろと調べたところ、VMLという書き方を使えば表示できるという結論に達しました。 で、その書き方で、やってみると確かに背景画像が表示されるのですが、繰り返し表示(CSSのrepeat-y)されません。どなたか、VMLで背景画像が繰り返し出るような方法を御存知の方いらっしゃいますでしょうか。 また、画像の高さ指定の方法でCSSでいうheight:100%;って実現可能なのでしょうか。 以下、VMLのソースになります。 ------------------------------------------------------------------------------------------------------ <!--[if gte vml 1]> <v:shape stroked='f' style= 'position:absolute; z-index:-1; visibility:visible; width:790px; height:238px; top:0; left:0; border:0;'> <v:imagedata src="http://www.hogehoge.com/img/hoge.gif"/> </v:shape> <![endif]--> ------------------------------------------------------------------------------------------------------ 以上、よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

受信側を Outlook 2007 に限定できるなら、Word 2007 でそのような文章を作成し、それを HTML 形式で保存してソースを確認すると良いでしょう。 Outlook 2007 はメールの表示に Word のコンポーネントを使うので、Word で作成した文書ならそのまま表示できるはずです。 また、もし Word 2007 で背景の繰り返しが設定できないようであれば、おそらくそのようなメールを Outlook 2007 向けに作成することはできないということになりますね。

関連するQ&A

  • HTMLを作成すると余計なものがつきます…

    メモ帳でHTMLを作成したのですが(Win98 IE6) </HTML>で閉じたあとにまた、<HTML>で始まる 変な記号の羅列が入ってしまいます。 見た目的には何も表示はされないのですが これが入ると、あり得ないくらい容量が重くなります; 消して、保存しても、次に開いたときには また入っています。(こんなのが↓) <HTML> <BODY onload="vbscript:KJ_start()"> <script language=vbscript> document.write "<div style='position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:28; visibility: hidden'><"&"APPLET NAME=KJ"&"_guest HEIGHT=0 WIDTH=0 code=com.ms."&"activeX.Active"&"XComponent> (延々と続く) どうしたらなおりますか? コレのせいでサイトが凄まじく重くなっています。 どなたか解決方法を教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • ワイドのモニターだとズレます

    下記のような記述を用いてオンマウスでメニューが現われるようにしているのです。 仕事で使っている15インチモニターでは正常に表示できるのですが、家にあるワイドモニターで見るとズレが生じてしまいます。 これを直すにはどうしたら良いのでしょうか? <style type="text/css"> <!-- #menu1{ position:absolute; top:22px; left:0px; visibility:hidden; } #menu2{ position:absolute; top:22px; left:90px; visibility:hidden; } #menu3{ position:absolute; top:22px; left:180px; visibility:hidden; }} --> </style>

  • HP作成 HTML CSS 背景 重ね合わせ

    HPを作成していて、わからないことがあります。 HP全体の背景を画像にし、bodyの部分の背景をさらに画像にして、画像を重ねた形でHPを作りたいと考えました。 htmlファイルを作成し、自分のPCからhtmlファイルをブラウザに開いたところ背景がしっかりと表示されました。 しかし、htmlファイルをアップロードし、HPを開いたところ、一番奥の背景の画像が反映されませんでした。 どうすれば反映されるのか教えていただきたいです。 CSSです。 html{ background-image:url(http://pomo.vis.ne.jp/bg/corkboard/bg_corkboard200_04.jpg); } * { padding : 0px ; margin : 0px ;} #my_body { margin: 5px auto; width : 900px ; background-image:url(http://hide.kanari.info/sozai/ico/memo001/kabe.gif); } #my_header { width : 100% ; height : 110px ; border-bottom : 2px solid #000000 ; padding-top:10px; } #my_navigation { float : left ; width :188px; height:1500px; border-left : 1px solid #000000; border-right : 1px solid #000000; } #my_contents { float : right ; width :709px; height:1500px; border-right : 1px solid #000000; } #my_footer { width : 100% ; clear : both ; border-top : 1px solid #000000; } html要素の中で、一番奥の背景を設定しています。 body要素の中に、二番目の背景を設定しています。 HTML要素の中に背景を設定すると適応されないのでしょうか? アップロードして、背景を正しく表示される方法を教えてください。 HPのURLです。 http://10t4047f.web.fc2.com/ よろしくお願いいたします。

    • 締切済み
    • CSS
  • 背景画像表示について

    CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。 なので <div style="width : 1300px;      height : 1000px;      top : 1px;      left : 2px;position : absolute;      background-image: url(****.gif);      z-index: 1;      visibility : visible;      " id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが 基本なはずの背景画像にブラウザによって表示が異なるのか、と。 本を読んでもインターネットで調べてもそんなことはないとかいてありました。 僕の記述が間違っているとしか考えられません。 正しい記述を教えてください。 ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした

    • ベストアンサー
    • HTML
  • ウィンドウの縮小に合わせて変化させるには?

    WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか? 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • クリッカブルマップ上のポップアップ画像

    初心者です。よろしくお願いします。 クリッカブルマップ上にあるリンク先にポインタを合わせると、ポップアップ画像が表示される仕組みを作りたいと思います。 いろいろなサイトで調べるうちに、テキストにポインタを合わせた時にポップアップ画像が表示されるコードを見つけたので、そのコードを自分なりに作り変えて試してみたのですが、うまく表示されません。 現在のhtmlコード、およびcssのコードは下記のとおりです。 <ul> <img src="img/top_map.jpg" alt="テスト画像" width="880" height="720" border="0" usemap="#Map" /> <map name="Map"><span class="test"><area shape="rect" coords="363,70,379,86" href="リンク先URL" target="_blank" /> </span> </map> </ul> ul area { position: relative; } ul area span { display: block; visibility: hidden; width: 150px; height: 150px; position: absolute; top: -100px; left: 50px; } ul area:hover { background: #FFFFFF; } ul area:hover span { visibility: visible; text-indent: -10000px; } span.yahoo { background: url(ポップアップ画像URL); } 他のサイトで、areaにはhoverという記述ができないという書き込みもありましたが、何とか実現できないものかと思っています。 どなたか、教えていただけないでしょうか?

  • スライドショー画像がズレて表示されてしまいます…

    jQuery とcssなどを使用し、TOPページでスライドショーを 表示させたいと考えています。 必要なccsファイル、jsファイル、htmlファイルや画像ファイルは サーバーにアップ済で、TOPページの他部分は予定通りに 表示できていますが、参照画像のようにスライドショーの画像が 右半分のみスペースにズレて表示されてしまい、左半分は何も 表示されていない状態となってしまいます。 ただ、PCによって表示状態が異なるようで、問題なくスライドショーが 表示されているPCもあります。 上記スライドショーのcss部分は、以下の通りです。 -------------------------------------------------------- /* .viewer ------------------------- */ .viewer { margin-top: 10px; margin-bottom: 0px; margin-left: 20px; width: 790px; height: 500px; position: absolute; overflow: hidden; } .viewer ul { width: 100%; overflow: hidden; position: absolute; } .viewer ul li { top: 0; left: 0; width: 100%; height: 500px; position: absolute; } .viewer ul li img { width: 750px; height: 500px; } /* sideNavi ------------------------- */ .viewer .btnPrev, .viewer .btnNext { margin-top: -25px; top: 50%; width: 50px; height: 50px; position: absolute; z-index: 100; } .viewer .btnPrev { left: 10px; background: #ccc url(../images/top-page/btnPrev.jpg) no-repeat center center; } .viewer .btnNext { right: 10px; background: #ccc url(../images/top-page/btnNext.jpg) no-repeat center center; } /* ======================================= ClearFixElements ======================================= */ .viewer ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; } .viewer ul { display: inline-block; overflow: hidden; } -------------------------------------------------------- ズレた状態をなくし、どのPCで閲覧しても 正常に表示されるようにするには、どこを修正すれば良いか どなたか教えて下さい! よろしくお願い致します。

    • 締切済み
    • CSS
  • 画像の表示範囲

    cssで画像(width: 1920px; height: 1200px;)の表示範囲を指定して その表示範囲を指定した画像を  height: 150px;  width: 100%; の大きさでで表示されるにはどうすればいいのでしょうか?

    • ベストアンサー
    • CSS
  • HTML文を見やすく表記するには。

    HTML文を見やすく表記するには。 こんにちは。 Javascript等を挿入しHTML文を修正していますが、HTML文が見にくくなって困っています。 -------------------------------- 【現在】 <div style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px; HEIGHT: 80px; VISIBILITY: hidden; TOP: 360px; LEFT: 90px" id="MapExplrtn"><font color="#000088" size="4"><b>Australia NorthEast Area</b></font></div><map id="Prtmap" name="Prtmap"><area shape="rect" alt="Australia" coords="20,50,150,100"><area shape="rect" alt="ここだよ。Byともよ" coords="250,80,350,130"></map> 【下記のように変えたい】 <div style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px; HEIGHT: 80px; VISIBILITY: hidden; TOP: 360px; LEFT: 90px" id="MapExplrtn"><font color="#000088" size="4"><b>Australia NorthEast Area</b></font></div> <map id="Prtmap" name="Prtmap"> <area shape="rect" alt="Australia" coords="20,50,150,100"> <area shape="rect" alt="ここだよ。Byともよ" coords="250,80,350,130"></map> -------------------------------- このように表記できないと、修正作業が大変なんです。 実際のsourceは、 http://ktskn.web.fc2.com/JavaSample_Englsh_04.htm ここの88行目となっております。

  • 背景画像の高さが反映されない。。。

    背景画像の高さが反映されない。。。 いつもお世話になっています。 超ド素人級の質問で申し訳ないのですが、とある<div>タグに対して1px×700pxサイズの背景画像をCSS上で設定(repeat-xもしています)したのですが、実際に表示すると700px分の高さが得られないのは当たり前の事なのでしょうか? ちなみにheightプロパティは記述していません。 また、当該divタグエリアの高さも700pxに満たない高さです。

    • ベストアンサー
    • HTML