購入テンプレートで追記CSSがIE7で有効化しない

このQ&Aのポイント
  • IE7で有効化しないCSSの問題について
  • 購入したテンプレートで追加したCSSがIE7で反映されない問題について悩んでいます。
  • 具体的な解決策はわからないため、どう対処すればよいかわかりません。
回答を見る
  • ベストアンサー

購入テンプレートで追記CSSがIE7で有効化しない

お世話になっております。 別のご質問で「IE7でfloat:leftが効かない」というご質問をさせて戴いたものですが どうもよく調べてみますと問題が更に大きかったようで 別のご質問として再度立てさせて戴きました。 現在購入したテンプレートにてワードプレスを構築しているのですが どうも追加で記述したCSSのみIE7で反映されていないようなのです。 ※元々あったCSSの値を変更するなどは反映されるのですが  新しく作成したclassやidがページに反映されない状態です。 どこから手を付けていいものか検討も付かず、 途方にくれております。 ご参考になるかどうかヘッダーの記述を以下にメモいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <!-- BEGIN head --> <head> <!-- Meta Tags --> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <!-- Title --> <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title> <!-- Stylesheets --> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" /> <!-- Colour --> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/colour.php" type="text/css" media="screen" /> <!-- RSS, Atom & Pingbacks --> <!-- RSS & Pingbacks --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?> RSS Feed" href="<?php if (get_option('tz_feedburner')) { echo get_option('tz_feedburner'); } else { bloginfo( 'rss2_url' ); } ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); ?> <!-- END head --> </head>

  • jikon
  • お礼率50% (15/30)
  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • DrFell
  • ベストアンサー率55% (305/551)
回答No.1

>新しく作成したclassやidがページに反映されない とのことですので、それのみのセレクタにしてませんか? 他の詳細度を調査の上、詳細度を他以上にしましたか? つまり、 <div id="test"> <ul class="quiz"> <li>どちらの指定が生きるのか</li> </ul> </div> #test{text-weight:red} .quiz{text-weight:blue} とあった場合、文字が赤くなるのは存知ですね? #test .quiz{text-weight:blue} を加えると、青くなるのはご存知ですか? 今回の質問は、おそらく<li>に新しいidやclassを加えて、 <div id="test"> <ul class="quiz"> <li class="question">どちらの指定が生きるのか</li> </ul> </div> #test{color:red} .quiz{color:blue} #test .quiz{color:blue} #question{color:yellow}/**足した/ としたのに黄色にならない。何で?ということではないでしょうか? この場合最短で #test #question{color:yellow} を加えなければ他に詳細度で負けます。 cssの最初のc、カスケーディングを抑えて新しい指定を入れてやってください。 上記のことを視覚的に理解度を調査でき、最後は解説付きますので、ご参考にどうぞ。 ●CSSトラブルシューティング:追加したルールが適用されない http://lab.klab.org/young/2011/05/css_trouble_rule_not_apply/

jikon
質問者

お礼

DrFell様 ご回答ありがとうございました。 どうやら購入したテンプレートはIE7のみ外部からスタイルシートを読み込まないと反映されないようで IE7用に外部スタイルシートを作成したら CSSが反映されました。 お騒がせ致しました。

関連するQ&A

  • jquery-colorboxが反応しません・・・

    Wordpressのプラグインでjquery-colorboxってのを使いたいのですが上手く動いてくれません・・・ ネットで調べたらheader部分になにか追加したら動くとあったのですがよくわかりませんでした・・・ 今ヘッダー部分は <!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" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title> <?php if ( is_home() ) { ?> <? bloginfo('name'); ?> | <?php bloginfo('description'); ?> <?php } ?> <?php if ( is_search() ) { ?> Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' &mdash; '); echo $count . ' '; _e('articles'); wp_reset_query(); ?> <?php } ?> <?php if ( is_404() ) { ?> <? bloginfo('name'); ?> | 404 Nothing Found <?php } ?> <?php if ( is_author() ) { ?> <? bloginfo('name'); ?> | Author Archives <?php } ?> <?php if ( is_single() ) { ?> <?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; ?> | <? bloginfo('name'); ?> <?php } ?> <?php if ( is_page() ) { ?> <? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; ?> | <?php wp_title(''); ?> <?php } ?> <?php if ( is_category() ) { ?> <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?> <?php } ?> <?php if ( is_month() ) { ?> <? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?> <?php } ?> <?php if ( is_day() ) { ?> <? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?> <?php } ?> <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?> <?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/sprinkle.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/script.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/colortip-1.0-jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/contact-form.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/blogger.js"></script> <!--[if IE 6]> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styleie6.css" type="text/css" media="screen" /> <![endif]--> </head> ってなってます。どうすれば動きますか?? サイトURLはhttp://mooommm.com/ 添付画像はプラグインの設定部分の画像です!

  • FirefoxでCSSが読み込めない。

    HPを作成中です。IEやSleipnirでは思った通りに表示されるのですが、Firefoxではスタイルシートが読み込まれていないようです。 どの部分が悪いのでしょうか。ご教示のほどをよろしくお願いいたします。 以下冒頭部分のソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title></title> </head> <body>

    • ベストアンサー
    • HTML
  • 作成したCSSがfirefoxでは見れますがIEでは反映されません

    私が今作成しているCSSのサイトなのですが。。 firefoxでチェックしながらはちゃんとみれていたのですが、最終チェックでIEでみるとCSSが反映されずに表記されてどうにも困っています。 原因なんなのでしょうか? お詳しい方お教えくださいませ。 -------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <title>museo international</title> <link rel="stylesheet" type="text/css " href="css/index.css" media="screen.print" /> -------------------------------------------------------------- なにか違う所がありますか?どなたかお教えください。 困っています。

  • ホームページがIEでアクセスすると白くなってしまいます

    ホームページ作りで困っています。 以下のようにヘッド部分を書き、FTPでアップしたのですが、次のような症状で困っています。 <症状> ・IEではじめてアクセスするときに真っ白で、エンコードを変更すると見られ、以降のアクセスは普通に閲覧できます。 ・ファイアーフォックスでは最初から普通に見られます。 <私の予想> ・下記ヘッド部分に不備がある? ・CSSに不備がある? ↓プログラム <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta name="Keywords" content="ほげほげ"/> <meta name="description" content="ほげほげ" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>もがもが</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> <link rel="shortcut icon" href="http://www.hogehoge/images/favicon.ico">

    • ベストアンサー
    • PHP
  • 作成したホームページがIEでは表示されない

    xhtmlとcssでページを作成しました。 FireFoxではローカルでもネットにアップした状態でも見ることが出来るのですが、 IEを使用すると、ローカルでは見れるのですが、ネットに上げたものは指定した背景の色しか表示されません。 何が原因なんでしょうか。 よろしくお願いします。 <?xml version="1.0" encoding="Shift_JIS"?> <!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"xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head>

  • wordpressのjqueryが動かない

    wordpress3.8.1で作業しています。 会社のHPの作成用途でwordpressを使用しています。 何度か作成経験がありphpもなんとなく分かっているのですが、ここだけ解決せずです。 トップページにスライドショーのプラグインを入れたのですが動きません。 プラグインはWP-Cycleというプラグインです。 function.phpにはまだ何も記載していません。 header.phpはこんな感じの記載です。 ******************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="description" content="<?php bloginfo( 'description' ); ?>"> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title> <link rel="shortcut icon" href="<img src="<?php bloginfo('template_url'); ?>/images/favicon.ico" /> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" /> <?php wp_head(); ?> </head> <body> <a name="pagetop_here"></a> <div class="wrap"> <div class="header"> <h1 class="h_logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_logo.png"/></a></h1> <ul class="h_nav"> <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_01.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/news' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_02.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_03.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/works' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_04.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/faq' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_05.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/company' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_06.png"/></a></li> <li><a href="http://ameblo.jp/ecoblue-smile/" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/h_07.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_08.png"/></a></li> </ul><!--h_nav--> </div><!--header--> ******************************************* <?php wp_head(); ?>を無効にして外部の jqueryを読み込むにすると、スライドはおろか、縦に並んでしまいます。(cssが効いていないみたいです。) どこが原因なのかも分からないです。 ただ過去に同じheader.phpで同じプラグインが実装しています。 よろしくお願い致します。

    • ベストアンサー
    • PHP
  • はじめまして

    はじめまして 下記のUTF-8をhift_JISに変改したいのですが。 変換してアップすると文字化けになるか、画面上は真っ白(ソース上では文字化け)になってしまいます。 どのようにしたら変換できるのでしょうか。 <!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="text/html; charset=UTF-8" /> <title>************</title><!-- ▼▼ページタイトル▲▲ --> <link href="components/css/default.css" rel="stylesheet" type="text/css" /> </head> <body>

    • ベストアンサー
    • HTML
  • viewportの動作について

    PC用のサイトをhtml5(wordpress)で作成しました。 ドコモのXperia acro SO-02Cでサイト見ると、画面に収まりきっておらず 横スクロールをするか縮小しないと画面上に収まりません。 調べると、viewportのmetaタグが必要な様で、headタグを下記のように してスマホで確認したのですが何も変わっていません。 PCサイトの横幅は960pxで組んでおりリキッドレイアウトではありません。 いくつかのサイトを見てみましたが、スマホ用のサイトとして作成しないPC用の サイトは画面上に収まった状態で表示され必要であれば自分で拡大して表示 するという感じでした。 ※同様にリキッドレイアウトではなくxhtmlで作成されておりviewportのmetaタグもありませんでした。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="<?php bloginfo('charset'); ?>"> <title><?php wp_title('', true, ''); ?></title> <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <script src="<?php bloginfo('template_directory'); ?>/js/jquery.rollover.js"></script> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <link rel="icon" href="<?php bloginfo('template_directory'); ?>/images/common/favicon.ico" type="image/x-icon"> <link rel="Shortcut Icon" href="<?php bloginfo('template_directory'); ?>/images/common/favicon.ico" type="image/x-icon"> <?php wp_head(); ?> </head> どうすれば、スマホで開いた際の初期状態を画面に収まるようにできますか?

    • ベストアンサー
    • HTML
  • wordpressで

    wordpressを使ってブログを作っています。しかしcssを読み込んでくれません。 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> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>(RSS 2.0)" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>(Atom)" href="<?php bloginfo('atom_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body> <div id="rap"> <div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_settings('home'); ?>/"><img src="img/title.gif" alt="芦澤治療院はやさしいマッサージで施術いたします。" /></a></h1> </div> <div id="headernavi"> <div id="navi"> <ul> <li><a href="#"><img src="img/link.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/sitemap.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/inquary.gif" alt="" border="0" /></a></li> </ul></div> <div id="size"> <img src="img/sizeword.gif" alt="" /> <a href="#"><img src="img/sizesmall.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizemiddle.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizebig.gif" alt="" border="0" /></a></div> </div> </div> <div id="navcontainer"> <ul> <li class="news"><a href="#">ニュース</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="work"><a href="#">施術の案内</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="stuff"><a href="#">スタッフ</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="qa"><a href="#">よくある質問</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="inq"><a href="#">お問い合わせ</a></li> </ul> </div> <!-- end header --> <div id="content"> <div id="main"> <?php if(have_posts()):while(have_posts()):the_post();?> <div class="post"> <h2><?php the_title();?></h2> <?php the_content();?> <p class="postmetadate"> <?php the_time('Y年m月d日 H:i')?>|<?php comments_popup_link ('コメント(1)','コメント(2)','コメント(%)');?> </p> </div> <?php comments_template();?> <?php endwhile;endif;?> </div> </div> </div> </body> </html> です。 ディレクトリ構造はindex.htmlとstyle.cssは同じフォルダにあります。

    • 締切済み
    • PHP
  • xhtml,css cssの取り込み

    xhtml,cssの解説書を購入し、二段にインポートする方法で「css」の取り込みをしたのですが、初心者ゆえどうもうまくいきません。下記にそのコードを載せますので、間違いをご指摘ください。 『index.html』 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html xmlns="http://WWW.W3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>test</title> <link rel="stylesheet" type="text/css" href="a.css" media="all" /> <body> <h1>秋</h1> <p> test test test </p> </body> </html> 『a.css』 @charset "Shift_JIS; @import"b.css"; 『b.css』 @charset "Shift_JIS"; h1{ text-align: center; font-size: x-large; font-family: "MS P明朝",serif; }

専門家に質問してみよう