サポート » 使い方全般 » header.phpに新しくcssを追加する場合

  • WordPress 3.5.1
    はじめはstyle.cssのみのリンクだったので、下記のような記述でした。
    <link href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” rel=”stylesheet” type=”text/css” />
    そこにレスポンシブルにしてレイアウトを変えたいので、tablet.cssとsmart.cssを加えたいと思っています。下記のように上記にプラスして記述しても反映されていない気がするのですが、どのように記述すればいいのでしょうか?

    <link rel=”stylesheet” media=”all” type=”text/css” href=”tablet.css” />
    <!– ※タブレット用のスタイル(tablet.css) –>
    <link rel=”stylesheet” media=”all” type=”text/css” href=”smart.css” />
    <!– ※スマートフォン用のスタイル(smart.css) –>

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • h-pine-h 様

    h-pine-h様の過去の投稿などを参考にさせて頂いて、
    1.Wordpress 3.5.1
    2.使用テーマ=オリジナル
    3.サイトは都合により教えられない
    ということなので、完全に推測になりますけど、
    1.アクセス端末によりテーマを変えたい
    ということで良いのでしょうか?

    それでしたら、
    最初にアクセスしてきた端末を特定し、それに合わせたスタイルシートを読み込む
    という流れになると想います。

    的外れだったらすみません。
    (o*。_。)oペコッ

    トピック投稿者 h-pine-h

    (@h-pine-h)

    久保様

    回答有り難うございます。
    サイトは画像を変えたので教えられるようになりました。
    http://hpineh0913.com/wp-anemone/

    「最初にアクセスしてきた端末を特定し、それに合わせたスタイルシートを読み込む
    という流れになると想います。」

    これは、header.phpにそれぞれの端末のcssをリンクさせるのではダメなのでしょうか?
    リンクの仕方が間違っているのか、それとも全く異なるやり方なのでしょうか?

    サイトを見てみましたがテーマのパスがルートになっていました。
    もしスタイルシートがテーマの中にあるのなら、smart.cssの前に
    <?php echo get_template_directory( );?>/ を追加してみてください。

    h-pine-h 様

    こちらのサイトが参考になるかもしれません。
    Web雑記超

    (o*。_。)oペコッ

    トピック投稿者 h-pine-h

    (@h-pine-h)

    >gogowebさん

    回答ありがとうございます。
    現在header.phpのcssリンク部分は下記のように変更致しました。
    <link href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” rel=”stylesheet” type=”text/css” />
    <!– ※デフォルトのスタイル(style.css) –>
    <link rel=”stylesheet” media=”all” type=”text/css” href=”<?php echo get_template_directory( );?>/tablet.css” />
    <!– ※タブレット用のスタイル(tablet.css) –>
    <link rel=”stylesheet” media=”all” type=”text/css” href=”<?php echo get_template_directory( );?>/smart.css” />
    <!– ※スマートフォン用のスタイル(smart.css) –>

    手始めにsmart.cssでhttp://hpineh0913.com/wp-anemone/のサイトの上記右にあるwhat’s Newとbannerを消したいと思っています。この二つはそれぞれ<div id=”right”>と<div id=”right2″>で記述されています。

    現在のsmart.css

    @charset “UTF-8”;
    /* CSS Document */
    @media screen and (max-width:640px){
    img{
    max-width: 100%;
    height: auto;
    width /***/:auto; 
    }
    #wrapper{
    width:100%;
    }
    #right {
    display:none;
    }
    #right2 {
    display:none;
    }
    }

    このようにdisplay:noneにしているのですが、スマフォで確認しても表示が消えません。何が問題として考えられるでしょうか?

    gogoweb wrote

    <?php echo get_template_directory( );?>/ を追加してみてください。

    だとパスになるので、URLになるように 代わりに、get_template_directory_uri()を使ってみてください

    http://codex.wordpress.org/Function_Reference/get_template_directory_uri

    トピック投稿者 h-pine-h

    (@h-pine-h)

    >nobita様
    回答ありがとうございます。下記のように記述を変えました。
    スマートフォンで確認したのですが、まだdisplay:noneの部分が表示されているようです。

    <link rel=”stylesheet” media=”all” type=”text/css” href=” <?php echo get_template_directory_uri(); ?>/tablet.css” />
    <!– ※タブレット用のスタイル(tablet.css) –>
    <link rel=”stylesheet” media=”all” type=”text/css” href=” <?php echo get_template_directory_uri(); ?>/smart.css” />
    <!– ※スマートフォン用のスタイル(smart.css) –>

    スマートフォンで確認したのですが、まだdisplay:noneの部分が表示されているようです。

    こちらから見ると、消えているようなので、キャッシュの影響などではないかと思います。

    余談

    現在のスタイルシートの記述だと、style.cssにメディアクエリを追加するのと同じ動作になると思います。

    スタイルシートを分けるなら

    デバイスに合わせてCSSを振り分ける「Media Queries」

    <link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >

    のように、メディアクエリをスタイルシートの中に記述するのではなく、media属性に含めたほうが便利かもしれないですね

    WordPressで比較的よく使われる、デバイスによってスタイルシートの読み込みを変更する方法は、

    <?php if ( wp_is_mobile() ) {
    	/* Display and echo mobile specific stuff here */
    /*モバイル用のスタイルの読み込みとか、モバイル用のページへのりダイレクト*/
    } ?>

    body_class()に、ブラウザ検知した、独自クラスを追加して、対応するCSSを指定するといった手法も使われる事があります

    やり方は、一つじゃないので、自分にあった方法を研究してみるといいです

    トピック投稿者 h-pine-h

    (@h-pine-h)

    >nobitaさん
    ありがとうございます。通常のサイトではデモサイトでレスポンシブ作ったことがあるのですが、WPだと独自の方法があったりするのですね。もう少し調べてみます。

    トピック投稿者 h-pine-h

    (@h-pine-h)

    >nobitaさん
    「こちらから見ると、消えているようなので、キャッシュの影響などではないかと思います。」

    わたしのiPhoneサファリのCookieとデータを消去しても消えていないのですが、スマートフォンでご覧になられましたか?自分のスマフォから見ると変化がないので、対策に困っております。

    トピック投稿者 h-pine-h

    (@h-pine-h)

    すみません!Cssを少し変えたらわたしの携帯からも消えました!お騒がせ致しました。

    アンドロイドで確認しました

    ビューポートの設定とか忘れていませんか?

    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style"      content="default">

    トピック投稿者 h-pine-h

    (@h-pine-h)

    はい、あの上にも書いたようにcss少し書き直しましたら表示が変わりました!
    大変お騒がせ致しました。
    ご親切にありがとうございます!

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • トピック「header.phpに新しくcssを追加する場合」には新たに返信することはできません。