サポート » テーマ » オリジナルテーマで・・・IEが・・・。

  • 解決済 clapton

    (@clapton)


    宜しくお願い致します。

    IE9でレイアウトが崩れます。
    いろいろなフォーラムを見て手直ししてますが、どうにも直りません。
    IE以外は問題なしです。
    firefoxで当初乱れていましたが、ショートコードを取り覗き、定義なども見直し対処できました。

    以下cssです。

    /*
    Theme Name: テーマ名;
    Theme URI: 直接URL
    Description: 直接URL
    */
    
    .clearfix:after {
      content: ".";  /* 新しいコンテンツ */
      display: block;
      clear: both;
      height: 0;
      visibility: hidden; /* 非表示に */
    }
    
    h1,h2,h3,p,li{
    font-family : Arial,'MS Pゴシック',sans-serif ;
    list-style-type:none;
    }
    
    /* body */
    body{
    background-color:#000;
    text-align:center;
    }
    
    /* コンテナ */
    div#container{
    width: 960px;
    margin:0 auto;
    }
    
    /* ヘッダー */
    div#header h1{
    font-size:1.875em;
    margin:0;
    float:left;
    margin-bottom:4px;
    }
    
    div#header h1 a{
    text-decoration:none;
    color:#fff;
    }
    
    div#header p#desc{
    font-size:0.7em;
    color:silver;
    margin:0;
    float:left
    margin-top:18px;
    width:500px;
    }
    
    div#header{
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:20px;
    }
    
    div#header_inner li{
    text-align:right;
    list-style-type:none;
    color:silver;
    font-size:0.7em;
    }
    
    div#header_inner a{
    text-align:right;
    color:silver;
    font-size:0.7em;
    }
    
    div#header p#image{
    margin: 8px 0 0;
    }
    
    div#header div#logo_left{
    float:left;
    }
    
    div#header div#logo_right{
    
    }
    
    img.c1{
    margin-top:5px;
    margin-left:150px;
    }
    
    img.c2{
    margin-top:10px;
    }
    
    /* ナビゲーションバー */
    
    ul#gNavi li{
    float:left;
    margin:0;
    padding:0;
    width:160px;
    height:70px;
    }
    
    div#header{
    margin-bottom:0;
    }
    
    div#nav{
    clear:both;
    background-color:#000;
    border-top:2px solid #00BFFF;
    height:70px;
    }
    
    div#nav ul{
    background-color:#000;
    padding:8px 0;
    margin:0 0 20px;
    
    }
    
    div#nav li a{
    font-size:0.8em;
    color:#fff;
    text-decoration:none;
    line-height:70px;
    }
    
    div#nav li a:hover{
    color:#fff;
    }
    
    div#nav li{
    display:inline;
    list-style-type:none;
    padding-left:0;
    padding-right:0;
    }
    
    div.menu{
    background-color:#000;
    }
    
    /* コンテンツ */
    div#content{
    width:500px;
    float:left;
    }
    
    p#pagetitle{
    font-size:0.1em;
    font-weight:bold;
    color:#00BFFF;
    border:dotted 1px #0c8bcd;
    text-align:center;
    padding:10px 0;
    margin-top:0;
    }
    
    /* 記事 */
    div.post{
    padding: 15px;
    margin-bottom:20px;
    }
    
    div.post h1{
    color:#00BFFF;
    font-size:1.4em;
    }
    
    div.post h2{
    font-size:0.875em;
    padding:10px;
    margin:0;
    color:#fff;
    }
    
    div.post h2 a{
    text-decoration:none;
    color:#fff;
    }
    
    div.post p{
    font-size:0.875em;
    line-height:1.6;
    margin-top:10px;
    color:#fff;
    }
    
    /* 記事内の画像 */
    .aligncenter{
    display:block;
    margin-left:auto;
    margin-right:auto;
    }
    
    div.post img{
    border:none;
    }
    
    .alignleft{
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    }
    
    .alignright{
    float:right;
    margin-left:10px;
    margin-bottom:10px;
    }
    
    /* ページリンク */
    
    span.oldpage{
    float:left;
    }
    
    span.newpage{
    float:right;
    }
    
    p.pagelink a{
    font-size:0.75em;
    color:#fff;
    }
    
    p.pagelink{
    overflow:hidden;
    width:100%;
    }
    
    /* サイドバー */
    div#sidebar{
    width:230px;
    float:left;
    }
    
    div#sidebar p{
    color:silver;
    font-size:0.75em;
    }
    
    div#sidebar ul{
    margin:0;
    padding:0;
    }
    
    div#sidebar li{
    list-style-type:none;
    }
    
    div#sidebar .widget{
    padding-top:0px;
    margin-bottom:10px;
    }
    
    div#sidebar h2{
    font-size:1em;
    color:#FFF;
    border-bottom:solid 1px #000;
    padding-bottom:0px;
    margin: 0 0 2px;
    }
    
    div#sidebar2 p{
    color:silver;
    font-size:0.75em;
    }
    
    div#sidebar li li{
    font-size:0.8em;
    margin-bottom:4px;
    padding-left:16px;
    }
    
    div#sidebar li li a{
    text-decoration:none;
    color:#fff;
    }
    
    div#sidebar2{
    float:left;
    width:230px;
    }
    
    div#sidebar2 ul{
    margin:0;
    padding:0;
    }
    
    div#sidebar2 li{
    list-style-type:none;
    }
    
    div#sidebar2 .widget{
    padding:0px;
    margin-bottom:10px;
    }
    
    div#sidebar2 h2{
    font-size:1em;
    color:#FFF;
    border-bottom:solid 1px #000;
    padding-bottom:0px;
    margin: 0 0 2px;
    }
    
    div#sidebar2 li li{
    font-size:0.8em;
    margin-bottom:4px;
    padding-left:4px;
    padding-top:5px;
    padding-bottom:5px;
    }
    
    div#sidebar2 li li a{
    text-decoration:none;
    color:#fff;
    }
    
    div#sidebar2 p{
    color:silver;
    }
    
    .sidebar3{
    width:230px;
    float:left;
    color:#fff;
    margin-top:50px;
    }
    
    .sidebar3 a, .sidebar3 strong{
    color:#fff;
    font-family:Verdana, sans-serif;
    font-size:0.8em;
    }
    
    .sidebar3 p{
    color:silver;
    font-size:0.75em;
    font-family:Verdana, sans-serif;
    }
    
    div#sidebar3 ul{
    margin:0;
    padding:0;
    }
    
    div#sidebar3 li{
    list-style-type:none;
    }
    
    div#sidebar3 .widget{
    padding-top:0px;
    margin-bottom:10px;
    }
    
    div#sidebar3 h2{
    font-size:1em;
    color:#FFF;
    border-bottom:solid 1px #000;
    padding-bottom:0px;
    margin: 0 0 2px;
    }
    
    div#sidebar3 li li{
    font-size:0.8em;
    margin-bottom:4px;
    padding-left:16px;
    }
    
    div#sidebar3 li li a{
    text-decoration:none;
    color:#fff;
    }
    
    div#bread{
    margin-bottom:50px;
    }
    
    .textwidget{
    margin-top:8px;
    }
    
    .textwidget li{
    color:silver;
    list-style-type:none;
    }
    
    .textwidget p{
    color:silver;
    font-size:0.8em;
    }
    
    /* フッター */
    div#footer{
    clear:both;
    border-top:solid 3px #000;
    padding:6px 0;
    }
    
    address{
    font-size:0.75em;
    font-style:normal;
    font-family:Verdana, sans-serif;
    margin:0;
    clear:both;
    color:#fff;
    }
    
    address a{
    color:#fff;
    }
    
    /* 固定ページ */
    div#content.page{
    width:960px;
    }
    
    div#content.page .post{
    width:700px;
    float:right;
    
    }
    
    /* footermenu */
    #footermenu {
        width: 960px;
        margin: 20px auto 30px;
        text-align: left;
        font:14px "ヒラギノ角ゴ Pro W3", "メイリオ", Osaka, "MS Pゴシック", sans-serif;
        }
    #footermenu a:link, #footermenu a:visited {
        color: #fff;
        }
    #footermenu ul {
            float: left;
        margin: 30px 10px 30px 10px;
        padding: 0;
        list-style-type: none
        }
    #footermenu ul ul{
        width: auto;
        float: none;
        margin: 0 0 20px 0;
        }
    #footermenu .widget{
        margin-bottom: 20px
        }
    #footermenu h2{
        font-size: 14px;
        text-align: center;
    
        color: #fff;
        margin: 0 0 10px 0;
        }
    #footermenu li{
        color: #fff;
        font-size: 14px;
        margin: 0px;
        padding: 0 0 0 10px;
        }
    #footermenu p{
        clear: both;
        padding-top: 8px;
        margin-right: 30px
        }
    
    ul.widget.widget_text{
    border-radius:1em;
    border:1px solid silver;
    height:300px;
    
    }
    
    .textwidget{
    padding:0px;
    }
    
    /* お問い合わせ */
    
    .wpcf7-form span.hissu  {
        color: white; /*文字色を指定*/
    }
    
    .wpcf7-not-valid-tip-no-ajax {
        color: white; /*文字色を指定*/
    }
    
    .wpcf7-response-output {
        color: white; /*文字色を指定*/
    }
    
    /* 罫線 */
    div#free{
    border-bottom:dotted 1px silver;
    }
    
    div#leftmenu a{
    text-decoration:none;
    text-align:center;
    }
    
    div.textwidget div#leftmenu ul{
    margin-left:0;
    padding-left:0;
    }
    
    div.textwidget div#leftmenu li{
    width:230px;
    height:55px;
    text-align:left;
    padding-top:15px;
    }
    
    div.textwidget div#leftmenu p{
    color:#00BFFF;
    text-align:left;
    margin-left:0;
    }
    
    div.textwidget div#leftmenu li.sub{
    padding:0;
    margin:0;
    border:none;
    height:20px;
    }
    
    div.textwidget div#leftmenu li.sub a{
    font-size:0.75em;
    color:silver;
    }

    後はindexです。

    <?php get_header(); ?>
    
    <div id="sidebar2">
    <ul>
    <?php dynamic_sidebar(2); ?>
    </ul>
    </div>
    
    <div id="content">
    
    <?php if(is_category()): ?>
    <p id="pagetitle"><?php single_cat_title(); ?></p>
    <?php endif; ?>
    
    <?php if(is_month()): ?>
    <p id="pagetitle"><?php single_month_title(); ?></p>
    <?php endif; ?>
    
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    
    <div class="post">
    <h2><a href="<?php the_permalink(); ?>">
    <?php the_title(); ?></a></h2>
    
    <?php the_content(); ?>
    
    </div>
    
    <?php if(is_single()): ?>
    <p class="pagelink">
    <span class="oldpage"><?php previous_post_link();
    ?></span>
    
    <span class="newpage"><?php next_post_link(); ?>
    </span>
    </p>
    
    <?php endif; ?>
    <?php endwhile; endif; ?>
    
    <?php if(is_home()):?>
    <p class="pagelink">
    <span class="old page"><?php next_posts_link
    ('&laquo; 古い記事'); ?></span>
    
    <span class="new page"><?php previous_posts_link
    ('新しい記事 &raquo;'); ?></span>
    </p>
    <?php endif; ?>
    
    <?php if(is_archive()): ?>
    <p class="class="pagelink">
    <span class="oldpage"><?php next_posts_link
    ('&laquo; 古い記事'); ?></span>
    
    <span class="newpage"><?php previous_posts_link
    ('新しい記事 &raquo;'); ?></span>
    </p>
    <?php endif; ?>
    </div>
    
    <div id="sidebar">
    <ul>
    <?php dynamic_sidebar(1); ?>
    </ul>
    
    </div>
    
    <?php get_footer(); ?>

    急ですので、ご教示下さい。

    宜しくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター gatespace

    (@gatespace)

    たぶん、WordPressには関係無く、CSSの問題だと思いますよ。

    何がどう崩れるのか、回答者でもソースからは簡単に判断できません。
    (オリジナルテーマならなおさらです)
    実際のサイトのURLを掲示してもらった方が早いですよ。

    もしくは、IEの開発者ツール(F12)つかって地道に直していくしかないです。

    トピック投稿者 clapton

    (@clapton)

    みなさん!

    ご協力有難う御座います。
    結局、丁寧に非推奨のCSSなどを手直しし、直りました。

    今後とも宜しくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「オリジナルテーマで・・・IEが・・・。」には新たに返信することはできません。