• 解決済 hero_shian

    (@hero_shian)


    ご質問させてください

    wordpress上においてレスポンシブデザインをしておりまして、
    メディアクエリーの設定をブレイクポイント768px以上のデバイスの場合を作成したいのですが反映されません。

    参考にしているマニュアルがwordpressでのコーディング向けコードでは掲載していないのでスタイルシートを読み込む href= 以下にwordpressテンプレートタグを入れたりしているのが原因なのか、はたまたPHPもしくはCSSのコーディングがなにか足りてないのか全くの原因不明になっている状態です。

    下記にある、今の私のサイトのCSSの最後のコード記述を参照してください。

    CSSの指定だとテキストが左寄りになるはずなのですが、中央揃いになってしまっていて、768px以上で指定したいテキスト左寄せにするコードが反映されないところでつまずいています。

    CSSの反映させるためにはどういった記述すればいいのでしょうか?
    ご教唆いただけましたら幸いです。

    以下、自分のwordpressの内容

    サンプルテーマを使用していてindexphpとstyle.cssのみ

    ======================================================

    【index.php】

    <!DOCTYPE HTML>
    <html lang=”ja”>
    <head>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”width=device-width”>

    <title>トップ|カフェ ビーン</title>

    <link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_directory_uri(); ?>/style.css” media=”all” />

    </head>
    <body>

    <!– header –>
    <header>

    <hgroup>
    <h1><img src=”<?php echo get_template_directory_uri(); ?>/images/logo.png” alt=”ロゴ カフェ ビーン” /></h1>
    <h2>季節のコーヒーとくつろぎの空間</h2>
    </hgroup>

    <nav>

    </nav>

    </header>
    <!– //header –>

    <!–contentns–>
    <div id=”contents”>
    <div id=”main”>

    <section id=”vitamin”>
    <h3>カフェ ビーンへようこそ</h3>
    <p>飯田橋駅から徒歩5分。閑静な都心の住宅街の中にカフェ ビーンはあります。カップオブエクセレンスの入賞作品をはじめ、オーナー自らが世界中から直接買い付けてきたこだわりのコーヒーと、くつろぎの空間をご用意してお待ちしています。</p>
    </section>

    <section id=”reciept”>
    <h3>おいしい一杯へのこだわり</h3>
    <h4>1.旬なコーヒー豆を毎日お店で焙煎</h4>
    <img src=”<?php echo get_template_directory_uri(); ?>/images/cafe01.jpg” alt=”写真 コーヒー豆” />
    <p>カフェ・ビーンのコーヒー豆はいつも新鮮。世界中から毎週入荷するニュークロップを直火式の小型ロースターで毎日少しずつお店で焙煎しています。</p>

    <h4>2.注文ごとに1杯ずつドリップ</h4>
    <img src=”<?php echo get_template_directory_uri(); ?>/images/cafe02.jpg” alt=”写真 コーヒードリップ” />
    <p>新鮮なのは豆だけではありません。コーヒードリンクはすべて、注文をいただいてから1杯ずつ丁寧にハンドドリップで提供します。</p>

    </section>

    </div>
    <!–//main–>

    <!–sub–>
    <div id=”sub”>

    <aside>
    <h4>私たちがお迎えします</h4>
    <img src=”<?php echo get_template_directory_uri(); ?>/images/cafe03.jpg” alt=”写真 スタッフ” />
    <p>老舗喫茶店で10年間経験を積んだオーナーと接客経験豊富なホールスタッフが笑顔でお出迎えします。</p>
    </aside>

    </div>
    <!–//sub–>

    </div>
    <!–//contents–>

    <!– footer –>
    <footer>
    <p><small>©2013 CAFE BEAN</small></p>
    </footer>
    <!– //footer –>

    </body>
    </html>

    ======================================================

    【style.css】

    /*
    Theme Name: Sample Theme
    Theme URI: http://www.www.www/
    Description: This is my sample theme.
    */

    @charset “utf-8”;

    /* @group Reset */

    *{ margin: 0;padding: 0}

    a { text-decoration : none}
    ul, ol { list-style : none}
    img { vertical-align : middle}

    /* @end */

    /* @group Fluid-img */

    img { width : auto}
    img { max-width : 100%}

    /* @end */

    /* @group HTML */

    html {
    font-family : verdana, sans-serif;
    font-size : 100%;
    line-height : 1.5
    }

    /* @end */

    /* @group Heading */

    h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}

    h1 {
    font-size : 48px;
    line-height : 1} /* 48px */

    h2 {
    font-size : 36px;
    line-height : 1.3333} /* 48px */

    h3 {
    font-size : 24px;
    line-height : 1} /* 24px */

    hgroup h2,h4,h5,h6 {
    font-size : 16px; /* 16px */
    line-height : 1.5} /* 24px */

    /* @end */

    /* @group Header */

    header {
    text-align : center;
    padding-top : 24px;
    background : #211f1f}

    header h1 { margin-bottom : 24px}
    header h2 { color : #fff}

    /* @end */

    /* @group Nav */

    nav {
    margin-bottom : 24px;
    background-color: #7D4934;
    background: -moz-linear-gradient(top, rgba(125,73,52,1) 0%, rgba(43,21,18,1) 88%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,73,52,1)), color-stop(88%,rgba(43,21,18,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* Opera 11.10+ */
    background: linear-gradient(to bottom, rgba(125,73,52,1) 0%,rgba(43,21,18,1) 88%); /* W3C */
    }

    nav ul { overflow : hidden}
    nav ul li { width : 25%; float : left}
    nav ul li a {
    display : block;
    color : #d8c2a4;
    padding : 12px 0}

    nav ul li a:hover {
    color : white;
    background-color : #7d4934}

    /* @end */

    /* @group Contents */

    #contents {
    width : 90%;
    margin : 0 auto;
    text-align : center}

    #contents p {
    margin-bottom : 24px;
    text-align : left}
    #contents img {
    margin-bottom : 24px;
    box-shadow : 0 0 5px #2f1f1f}

    /* @end */

    /* @group Footer */

    footer {
    padding : 24px 0;
    color : white;
    text-align : center;
    background-color: #000000;

    /* @end */

    /*768px*/
    @media screen and (min-width : 768px){

    #contents { text-align : left;}

    }

    ======================================================

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • CSSのメディアクエリの前の

    footer {
    padding : 24px 0;
    color : white;
    text-align : center;
    background-color: #000000;

    の後に閉じタグがありませんね。

    }

    をつけてみてください。

    トピック投稿者 hero_shian

    (@hero_shian)

    megane9988さま

    すいません本当に簡易なミスでした^^;
    コード記述方法などはあっていたと検証できたのでありがたいです。

    お手数おかけいたしました。

    解決したようでなによりです。
    こちらの質問について解決済にステータスの変更をお願いします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「メディアクエリーの設定をする中で,CSSに記述しても反映されません。」には新たに返信することはできません。