• 締切済み
  • 困ってます

DreamWeaver CS3でメールマガジン用のHTMLを作業してま

DreamWeaver CS3でメールマガジン用のHTMLを作業してます。 前任者が作ったベースで作業してるので、制御がさっぱりわかりません。 CS以前のゴーライブでの作業は普通に出来ます。 今、格好悪いなぁと思っているのは フォントをさわるたびにStyleが増えてしまっているんです。もうすぐ100近い。 それがメールで一斉に配信されるのがやりきれません。 CSS?、スタイルシート? できれば、タイトル、見出し、本文、色変え文字3パターンくらいに納めたいのです。 headのコピペを途中までですが下に貼ってみました。 教えて下さい。よろしくお願いします。 <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> body { font-size: 0.9em; } font { font-size: inherit; font-weight: normal; font-style: normal; line-height: normal; text-decoration: none; } p { font-weight: inherit; font-style: inherit; } a, a:link, a:visited { color: #f00; text-decoration: none } a:hover, a:active { color: #fff; background-color: #f00; text-decoration: none; } td {text-align:left;} .bunsho { padding: 4px;text-align:left; } .hard13txt { font-size: 13px; } .hardstandardtxt { font-size: 15px; } .hard12txt { font-size: 12px; } .style17 {font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"} .style1 {font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: small; } .style2 {font-size: small} .style3 {font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: bold; font-size: small; } .style4 {font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: medium; } .style22 {color: #FF0000; font-weight: bold; } .style24 {font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 12px; font-weight: bold; color: #FF0000; }

共感・応援の気持ちを伝えよう!

  • 回答数4
  • 閲覧数484
  • ありがとう数21

みんなの回答

  • 回答No.4

まず、不要なものを除去しましょう。 ●第1ステージ: font-weight: normal; font-style: normal; line-height: normal; 何も書かなかった時は normal と自動的に解釈されるので書く必要ありません。 text-align: left; これも基本が左寄りなので書く必要ありません。 body{ text-align: center; } 又は text-align:center; を指定されたタグに囲まれている場合に限り記載します。 間違い: font-size: inherit;   font-weight: inherit; font-style: inherit; なにを言いたいのか分かりませんが inherit はfont-size 、font-weight 、font-style に存在しません。 取りあえず排除しましょう。 font-size: medium; も基本が medium なので削除しましょう。 こうなうと、 body で既に 指定されているので td と .style4 が消滅します。 第1段階はこうなります↓ body { font-size: 0.9em; } font { text-decoration: none; } a, a:link, a:visited { color: #f00; text-decoration: none; } a:hover, a:active { color: #fff; background-color: #f00; text-decoration: none; } .bunsho { padding: 4px; text-align: left; } .hard13txt { font-size: 13px; } .hardstandardtxt { font-size: 15px; } .hard12txt { font-size: 12px; } .style17 { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3" } .style1 { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: small; } .style2 { font-size: small } .style3 { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: bold; font-size: small; } .style4 { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } .style22 { color: #FF0000; font-weight: bold; } .style24 { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 12px; font-weight: bold; color: #FF0000; } ●第2ステージ: 今度は短くしましょう。 CSSは、同じ命令をいくつも使う場合まとめる事が出来ます。 たとえば、text-decoration: none; 使ってるのは font 、a, a:link, a:visited 、a:hover, a:active これは font, a , a:link , a:visited , a:hover , a:active { text-decoration: none; } あとほとんどで指定しまくってる font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3" は body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } とでいいと思います。まずどちらが多いかを考えた方が良いです。 font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; を多用するなら body で指定してしまい、 違うフォントを使用する所に違う font-family を指定すればいいのです。 あと基本は左寄りに指定しましょう。 /* こうなります ↓ */ body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 0.9em; text-align:left; /* ←これで文章、画像などの基本配置が左寄りになる */ } font, a, a:link, a:visited, a:hover, a:active { text-decoration: none; } a, a:link, a:visited , .style22, style24{ color: #f00; /* #f00 と #ff0000 は同じ意味 */ } a:hover, a:active { color: #fff; } .bunsho { padding: 4px; } .hard13txt { font-size: 13px; } .hardstandardtxt { font-size: 15px; } .hard12txt .style24 { font-size: 12px; } font, a, a:link, a:visited, a:hover, a:active { text-decoration: none; } .style1, style2, style3 { font-size: small; } .style3, .style22, style24 { font-weight: bold; } こんな感じでしょうか?

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • Adobe Dreamweaver のフォント

    Adobe Dreamweaver使用の方にお尋ねしたいのですが、現在VISTAのメイリオが気に入っております。メイリオが優先的にフォントに選ばれるようにするには {font-family: "メイリオ""MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"} でよろしいのでしょうか?

    • ベストアンサー
    • HTML
  • cssで指定するfontサイズについて教えてくだい

    初歩的な質問で恐縮です。 cssの記述について質問いたします。 下記のようにcssを記述しているのですが、 一部だけ「font-size: small」を解除する方法はあるのでしょうか? (要は、一部分をfont-size: X-smallにしたいのです。) * { font-size: small; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #454545; letter-spacing: 0.05em; line-height: 180%; } a:link { color: #7B0215; text-decoration: none; } よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • ホームページの作成について教えてください。

    ホームページの作成について教えてください。 現在、HPのインデックスページの上部のh1のところに画像とテキストを載せ、 テキストの表示はHP上では見えないように設定しています。(画像のみが見える状態) これを、画像を消して、テキストが表示されるように直したいのですが、 画像を消すことはできたのですが、テキストを表示させる方法がわかりません。 htmlタグは <h1><a href="index.html"><span>文字列</span></a></h1> となっており、 cssは body { background-color: #E8E4DF; margin: 0px; padding: 0px; } h1,h2,h3,h4,h5,p { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #333333; font-weight: normal; font-size: 80%; margin: 0px; padding: 0px; } ul,li { list-style-type: none; margin: 0px; padding: 0px; } li { font-size: 80%; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; color: #333333; } a span { display: none; } .clear { margin: 0px; padding: 0px; clear: both; } a:link,a:visited { color: #CF5B01; text-decoration: underline; } a:hover { color: #663300; text-decoration: underline; } となっています。 初心者のため、どこをどう直したらよいのかわかりません。 どなたか御教授お願い致します。

  • 回答No.3

ベースの作りに問題があると思います。 多分メールは ヘッダー部 大見出し 見出し 小見出し 本文 フッター部 と等々あると思います。 まず、全体のフォントを設定し、各見出し毎にフォントを設定、必要に応じてスタイルを与えれば良いと思います。 質問の直截な回答にならず申し訳ありませんが、まず文章全体の構造を意識し、構造毎にスタイルを与えると言うスタイルシートの概念を勉強される事をお勧めします。 この際、DreamWeaver CS3は忘れて、スタイルシートを学ばなければ、問題解決出来ないと思います。 後はスタイルシートの概念をちゃんと理解している方に作り直して頂き、更新方法をアドバイスして頂いた方が良いと思います。 この手の質問サイトでは回答出来る内容に限界があると思います。

共感・感謝の気持ちを伝えよう!

  • 回答No.2
noname#119957

font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; >>これは、bodyに指定して、 body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } あとは、何度も同じことを指定する必要は無いんだが、何故?

共感・感謝の気持ちを伝えよう!

  • 回答No.1

.style2 .style4 .style22 などのスタイルが増えるということですよね? DreamWeaverの機能を使ってhtmlからフォントを指定してしまうとcssが増えてしまうので、cssからフォントを指定すれば解決すると思います。 例えば style24 {font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; の部分を style24 { font-family: "MS P明朝","MS 明朝",serif; にするとか

共感・感謝の気持ちを伝えよう!

質問者からの補足

回答ありがとうございます。 cssから とはDreamWeaverのツールのcssから指定するんですか? それとも外部ファイルがどこかにのでしょうか? (このへんがよくわかっていないんです) あと、 .style2 .style4 .style22などのスタイルを統合したり、減らしたり出来るんでしょうか?

関連するQ&A

  • スクロールバーの色を(黒色に)変えたいので、下記のようにHTMLを記述

    スクロールバーの色を(黒色に)変えたいので、下記のようにHTMLを記述しましたが、上手く出来ません。変更が出来ないのです。どなたか解る方がいましたらスクロールバーの色の変更のやり方を教えてください。よろしくお願い致します。 因みに、私はドリームウェーバーCS5を使用しております。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>KANESUZU</title> <style type="text/css"> body { background-image: url(sozai/back.jpg); margin-top: 20px; margin-bottom: 20px; scrollbar-face-color:#000000; color: #BBCADE; } .waku { border: 1px solid #999; } .style7 { font-size: 12px; color: #999; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } .obi { background-image: url(sozai/obi.jpg); } .obimoji { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 14px; color: #999; }

    • ベストアンサー
    • HTML
  • font-familyの使い方

    font-familyに正しい使い方ってあるんでしょうか? 私、ブログとサイト(共にFC2)やってるんですけど2種類(3種類?)のfont-familyを使ってるんです。 これって閲覧者にとっては見づらいものなのでしょうか。 ブログの方では、bodyに font-family : "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","verdana","arial", sans-serif; を使い、記事の本文にだけ font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',Osaka,sans-serif; を使ってます。 サイトでは、bodyに font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',Osaka,sans-serif; を使い、メニュー部(英語)には font-family: Georgia,Helvetica,Arial; を使い、小説部分では説明(感想)部分はbodyのままですが本文では font-family: 'MS Pゴシック', sans-serif; を使ってます。 フォントサイズについては、基本11pxですが本文だけ12pxにしてます。 日本語の部分はsans-serifだしいいかぁと思ってるんですが、やはり見にくいものなのでしょうか? こちらの意図としては本文だけ見やすかったらいい、と思っています。 ふと疑問に思ったことなので、暇な時に回答して頂ければ幸いです。

    • ベストアンサー
    • HTML
  • livedoorblog css フォント

    cssの一部不適応についての対策を教えて下さい。 初めに申しておきますとかなりの素人です。 cssをみて、body….font….とは?どこ?と試しに変更してみてなんとかやっている状態です。 表題にあるとおりlivedoorにてblogをしており、この度ブログ内の全フォントをメイリオに変更致しましたが記事の本文のみ反映されません。 他のブログ名・記事名・サイドバー・ページ数・次へ・コメント等には反映致しました。 やったことといえばcssから”font-family”を探し出し、すべての頭にmeiryo,"メイリオ"を追加しました。 追加した部分は body { line-height: 1.3; background: #fff; color: #333333; font-size: 80%;/*サイドバー?全体?*/ font-family: meiryo,"メイリオ","Arial","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif; } h1,h2,h3,h4,h5,h6 { font-family: "meiryo","メイリオ", "Hiragino Mincho Pro","ヒラギノ明朝 Pro W3","ヒラギノ角ゴ Pro W3","MS P明朝",serif; } div#introductionOuter h1 a:link, div#introductionOuter h1 a:active, div#introductionOuter h1 a:visited { color: #333; font-weight: normal; font-size: 100%;/*ブログタイトル*/ font-family: "meiryo","メイリオ","Arial","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif; text-decoration: none; } div.archiveTitleOuter h2 { margin-bottom: 50px; padding: 15px 0; border-top: dotted 1px #666; border-bottom: dotted 1px #666; font-family: "meiryo","メイリオ"," Arial","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif; font-weight: normal; text-align: center; } div#article-options h3 { font-family: "meiryo","メイリオ","Arial","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif; font-weight: normal; } の5箇所です。 スタイルはExtensible Gallery (プレーン) CSSを使用しております。 本文はMS Pゴシックが適応されています。 過去の質問等調べたところ文字コードの指定?@charset "utf-8";をcssの最後に追加は反映せず。 body a による全体?の指定をcssの最後に追加はやってみましたが反映せず。 普段はクローム(シークレットモード)を使用しておりますが、サイドバーなどは反映されていることよりブラウザ側の設定ではないですよね?念のため設定のフォントカスタマイズよりメイリオに変更してみましたがコレも反映せず。 IEでの表示もクロームと同様。 上記が試してみたことです。 原因、対策がお解かりの方がおられましたらご教授下さい。 また、提示情報に不足があれば追加致しますので宜しくお願い致します。

  • 大きさの違うテキストのマウスオーバーの色を変えたいです!

    はじめまして。 WEB制作でとても困っています。。。>< お忙しいところ、恐れ入りますが、 回答どうぞよろしくお願い致します。 下記のように設定しています。 テキストの大きさが違うものを1つのリンクとして一緒に色を変更したいのですが、なぜかエリアは一緒に設定できるのですが、「10」の数字だけ色が変わりません。。。 <span>の設定に原因があるのでしょうか??? >>>CSS>>> a, a:link { color:#333333; line-height:170%; font-family:"ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, "Hiragino Kaku Gothic Pro"; text-decoration: none; } a:visited {} a:hover { color: #FF3300; text-decoration:none; } .text_bk_01 {color: #000000;font-size: 14px;line-height: 1.8em;} .text_bk_00 {color: #000000;font-size: 8px;} >>>XHTML>>> <ul> <li class="text_bk_01"><a href="#">テキスト<span class="text_bk_00">10</span></a></li> </ul>

  • 大きさの違うテキストのマウスオーバーの色を変えたいです!

    はじめまして。 WEB制作でとても困っています。。。>< お忙しいところ、恐れ入りますが、 回答どうぞよろしくお願い致します。 下記のように設定しています。 テキストの大きさが違うものを1つのリンクとして一緒に色を変更したいのですが、なぜかエリアは一緒に設定できるのですが、「10」の数字だけ色が変わりません。。。 <span>の設定に原因があるのでしょうか??? >>>CSS>>> a, a:link { color:#333333; line-height:170%; font-family:"ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, "Hiragino Kaku Gothic Pro"; text-decoration: none; } a:visited {} a:hover { color: #FF3300; text-decoration:none; } .text_bk_01 {color: #000000;font-size: 14px;line-height: 1.8em;} .text_bk_00 {color: #000000;font-size: 8px;} >>>XHTML>>> <ul> <li class="text_bk_01"><a href="#">テキスト<span class="text_bk_00">10</span></a></li> </ul>

    • ベストアンサー
    • HTML
  • (ドリームウィーバー)見出しの設定について

    ドリームウィーバー初心者です。現在MX2004をXPで使用しています。 テーブルの中に見出し1を入れたいのですが 背景が“幅700px・高15px"の画像でセルのテーブルのセルの幅・高さを同じく幅700px・高さ15pxに設定し、見出し1を入れたいのですが、 実際に入れてブラウザのプレビューではセルの高さが増え、画像が繰り返しになってしまいます。 <th width="700" height="15" colspan="5" valign="middle" background="img/line01.jpg" bgcolor="#FFFFFF"> <div align="right" class="style2"> <h1> 見出しにしたい文章 </h1> </div></th> このように表記され、cssは h1 { font-size: small; color: #FFFFFF; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-style: normal; font-weight: normal; } となっています。 セルの高さをいくら変更しても高さは変わってくれません。 もし変更する場所が間違っているとしたら他にどこを変更したらいいのかさっぱり分かりません。 どなたか教えてもらえないでしょうか?

  • CSSのフォント指定

    現在bodyに以下の設定をしています。 font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif; 実際にヒラギノ角ゴ Pro W3をインストールしてサイトを見るとアンチエイリアスが 掛かっていないようで非常に文字が見づらいです。 ※環境はWinXPでIE8 上記の設定をしたのも以前に調べてみた際に定番のような指定に見受けられたので このような設定にしたのですが今の定番ってありますか? また、こんな設定にしているなどというアドバイスもいただけます嬉しいです! 宜しくお願いします。

  • IE,Firefoxでbodyの背景画像が表示されません。

    IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 (width や position をいれるなど) 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。

  • floatの使い方

    すごく初歩的な質問をさせて下さい。 DW5.5を使用しております。 「contents」というdivの中に「main_1」と「main_2」というdivを入れたいのですが、 floatを使用するとcontentsの下側に回ってしまいます。 「main_1」を左寄せに、「main_2」を右寄せにして「contents」内にはめるには どのようにすればよいのでしょうか? どなたかご教授下さい。 <<ソース>> <body> <div id="contents"> <div class="main_1"> </div> <div class="main_2"> </div> </div> </body> <<css>> *{ margin:0px; padding:0px; } img{ border:none; } li{ list-style-type:none; } body{ font-size:12px; line-height:1.4em; font-family:"MS Pゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #333333; margin:0px auto; } /* FireFox リンク選択時の点線を消す */ a{ overflow:hidden; outline:none; } /* FireFox flashの境界の点線を消す */ object{ outline:none; } #contents{ width: 940px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; background: #000 url(../img/con_main.png) repeat-y; padding-top: 42px; padding-left: 60px; } .main_1{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; padding-left: 40px; width: 550px; float: left; height: 500px; } .main_2{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; float: right; width: 296px; padding-right: 30px; height: 500px; }

  • スタイルシートの書き方を教えてください!

    各文章の字間を空けるために部分的に <FONT style="line-height:150%"color="#c0c0c0"> </FONT> このようにしていしていたのですが、ページ全体にスタイルシートを使用して字間を調整するにはどのようなタグを書けばいいのでしょうか?色々と書き方があると思うのですが、素人にもわかりやすいように教えていただけますでしょうか、今現在使っているスタイルは以下の通りです。それをどのように書き換えればいいのでしょうか?どなたかおしえていただけますでしょうか。 <style type="text/css"><!-- body{ font-size : 10pt;color : #cccccc; background-color: #000000;} body{ font-face="MS UI Gothic, ヒラギノ明朝 Pro W3;} body{ font-style : "line-height:150%"; } TABLE { font-size : 10pt;color : #cccccc; } TABLE { font-face="MS UI Gothic, ヒラギノ明朝 Pro W3; } TABLE {font-style : "line-height:150%";} td{font-size : 10pt;color : #cccccc; } td{font-face="MS UI Gothic, ヒラギノ明朝 Pro W3;} td{font-style : "line-height:150%"; } --> </style>

    • ベストアンサー
    • HTML