• 締切済み

style.css 反映されない

WORDPRESSを使ってホームページを作成中です。 使っているPCはMAC OS 10.5.8です。 素人のためwordpressレッスンブックという本を読みながら進めています。 index.phpとstyle.cssでHPを作成しています。 index.phpで記入したものは、サイトを表示すると反映されているのですが、style.cssで指定、または記入したものが急に反映されなくなりました。 今まではそんなことはなく、順調にすすんでいたんですが、今日の作業中に突然style.cssで記入したものが反映されなくなりました。 (例1) *RSSフィードへのリンクの文字のデザインを指定する。 *画像の中央に文字をそろえて表示する。 *RSSフィードへのリンクを枠で囲んで表示する。 ↑ これらを実行したくて、 style.cssに下記のように入力しましました。 /* フィード */ p.feed {font-size: 0.75em; font-family: Verdana, Helvetica, sans-serif; border: solid 1px #8cc63f; padding: 5px; margin: 25px 0} p.feed a {color: #444444; text-decoration: none} p.feed img {vertical-align: middle; margin-right: 8px} しかし、全く反応しませんでした。 どうしたらよいですか? 教えてください。

  • HTML
  • 回答数2
  • ありがとう数4

みんなの回答

  • gecko913
  • ベストアンサー率0% (0/0)
回答No.2

こんにちは。 私もWordPress初心者です。 同じように本を読みながらホームページを作成していたのですが、急にstyle.cssを変更しても反映されなくなってしまいました。 ブラウザはサファリを使っていたのですが、どうやら古いstyle.cssがサファリに記憶されており、その古いコードが読み込まれていたようです。 サファリのキャッシュを無効にしたら変更内容が反映されるようになりました。 変更のたびにキャッシュを書き換えることもできるのかも知れませんが、とりあえずこれで作業は進められると思います。

  • uniphic
  • ベストアンサー率100% (1/1)
回答No.1

こんにちわ。 これが原因かはわかりませんが、スタイルシートの指定の「}」閉じかっこ前の「;」が全て抜けているように思います。 margin: 25px 0} ⇒ margin: 25px 0;} text-decoration: none} ⇒ text-decoration: none;} margin-right: 8px} ⇒ margin-right: 8px;} ここを修正しただけで直るかどうかは定かじゃありませんが、 一度確認されてみてはいかがでしょうか。

関連するQ&A

  • PHPファイル内でCSSが反映されない

    php5&MySQL5&XPでプログラム作成中です。 phpファイル内のhtmlの中に簡単なスタイルシートを埋め込んでいるのですが、 スタイルシートの部分が反映されません。 ご教授いただけると幸いです。 --haikei.css p.sample1 {background-color: #f8dce0; margin-top: 50px;} p.sample2 {background-color: #f8dce0; margin-bottom: 50px;} --login.php <?php --phpのプログラム ?> <html> <head> <link rel="stylesheet" href="haikei.css" type="text/css"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html>

    • ベストアンサー
    • PHP
  • Wordpress スタイルシートが反映されない

    Wordpress 初心者です。 「Wordpress レッスンブック」という本を見ながら学習中なのですが、サンプルテーマのスタイルシートで設定した内容が全く反映されません。ネットでいろいろ調べたのですが解決方法が見当たりません。 どのような原因が考えられますでしょうか?よろしくおねがいします。 Sample Theme: メインインデックスのテンプレート (index.php) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" /> </head> <body> <!-- ヘッダー --> <div id="header"> <h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo('description'); ?></p> <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p> </div> </body> </html> Sample Theme: スタイルシート (style.css) /* Theme Name: Sample Theme Theme URI: http://makoto.pcnoah.com/wp/ Dscription: This is my sample theme. */ /* ヘッダー */ div#header h1 {font-size: 1.875em; margin: 0; float: left; margin-bottom: 4px} div#header h1 a {text-decoration: none; color: #000000} div#header p#desc {font-size: 0.75em; color: #444444; margin: 0; float: right; margin-top: 18px} div#header {border-bottom: #a3d2f2; padding-bottom: 10; margin-bottom: 20px}

  • スタイルシートが反映されない。

    htmlに <link rel="stylesheet"type"text/css" href="style.css" media"all"> と記入 style.cssに <style type="text/css"> <!-- body{ text-align:center; padding-top:20px; h1{ text-align:center; font-size:1.5em; color:♯800000; backgraund-color:♯FFFFFF; padding-top:20px; padding-bottom:20px; } --> </style> と記入 bodyは反映されるのにh1が反映されません。 原因がまったくわかりません。 なにが悪いのでしょうか?。 よろしくお願いします。

  • cssが反映されません・・・

    HP初心者です。現在ホームページビルダーで編集してます。 もともとあるHPを引き継いで編集しているのですが、2カラムcssに挑戦しました。http://css.uka-p.com/index_2column.shtml やってみたのですが、反映されません。プレビューにするとエラー検出になり、強制的に<body>以下に位置づけられて、ただのテキストとしてHP上にずらずら文字が出てきてしまいます。左右も反映されてません。 ちなみに、こんな感じで書き込みました。 <head> <meta name="ROBOTS" content="all" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="style.css" type="text/css" /> body {text-align:center; } outline { width:600px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .contents{width:350px;float:left;} .menu{width:240px;float:right;} .c-both{clear:both;} </head> link以下のbodyからが私の書き込みです。 宜しくお願いします。

  • cssでfont-styleだけ反映されない

    chromeで確認しながらCSSを作成しているのですが、 font-styleだけ反映されません。 他のfont-weightやtext-decoration等は値を変更すると反映されるのですが、 font-styleだけ何も表示が変わりません。 ちなみに、IEで確認した所、italic等に設定していると反映されていることが 確認出来たのですが、chromeでは何も反応しません。 ネットで調べてみてキャッシュの削除等もやってみたのですがうまくいきませんでした。 どうすれば反映されるかどなたか教えて頂けますでしょうか。

    • 締切済み
    • CSS
  • スタイルシートが効かない

    bodyに以下のスタイルを適用しています。 body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 'Arial', 'MS Pゴシック', sans-serif; font-size:12px; line-height:150%; color:#333333; } フォントサイズを12にしているのですが 別のフォントサイズとしてクラスで10pxを指定しても WindowsIEだと、10pxに表示されません。 また、bodyの12pxの指定をはずしても 10pxの指定が反映されませんでした。 ただし、16pxなど他のクラスだと反映されます。 10pxが反映されない理由が分かりません。 どなたかお分かりになる方 いらっしゃいましたら、ご教授願います。 よろしくお願いします。

  • 他サイトのRSSフィードを指定した「キーワードが含まれるフィードのみ」

    他サイトのRSSフィードを指定した「キーワードが含まれるフィードのみ」wordpress(ワードプレス)に表示させたいと考えております。 ネットで調べてみたところ、http://www.moondakota.com/feed/index_s.php(RSS FeedをJavascriptでウェブページに表示 (ベータ版))という素晴らしいサイトを見つけたのですが、残念ながら「指定したキーワードが含まれるフィードのみ」には対応していないようでした。 wordpressの記事やページにて表示させたいと考えておりますので、javascriptでなくてもOKなのですが、有料・無料は問いませんので、そのようなプログラムやプラグインを、教えて下さい。

  • CSSが反映されません

    勉強不足は承知ですが、もうどうにもお手上げ状態です。 質問させてください。 CSSを勉強しているのですが、反映されません (本や、サイトのサンプルとおり記述しても、です) (タグ、スペルの間違いがないかは10回以上確かめています) (CSSサイトのサンプルをクリックすると、それは表示されます) ●ヘッダー内に指定すると、反映されない ○例  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- p.ehon{ font-size:100px; color:red; } --> </HEAD> <BODY> <p.ehon> 「絵本」の色は赤色です </p> </BODY> </HTML> ・・・結果・・・ ブラウザには標準フォント(色、サイズ)で ”「絵本」の色は赤色です” と表示される 文字色は font-color:red font-color:#rbg番号 などしてみても、黒のまま 文字サイズも30px、50px、100pxとしてみているが、結果は同じ文字サイズ (標準)になる ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- body{color:#CCFFCC} h1{color:#996633} --> </HEAD> <BODY> <h1> 絵本の色は赤色です </h1> </BODY> </HTML> ・・・結果・・・ ブラウザになにも表示されない ●BODY内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ ブラウザに何も表示されませんでした ○2回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズそれなりの大きさに。文字色は赤で表示されました ○3回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・

  • IEでCSSが適用されません。

    現在作成中のページがあるのですが、IEで作成状況をF12で確認すると、 全くCSSが反映されず、グチャグチャに表示されてしまいます。 FireFoxでは、問題なく表示されるのですが・・ div, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dl { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dt, dd { margin-bottom:2px; margin-top:2px; } 上記をCSSに組み込んで、リストタグの中黒を消すようにしているのですが、IEでは中黒が表示されたままです。 どうすれば良いのでしょうか。 教えて下さい!!

  • CSSが正確に反映されません。

    4つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>

    • 締切済み
    • CSS

専門家に質問してみよう