h-pine-h 様
h-pine-h様の過去の投稿などを参考にさせて頂いて、
１．Wordpress 3.5.1
２．使用テーマ=オリジナル
３．サイトは都合により教えられない
ということなので、完全に推測になりますけど、
１．アクセス端末によりテーマを変えたい
ということで良いのでしょうか？
それでしたら、
最初にアクセスしてきた端末を特定し、それに合わせたスタイルシートを読み込む
という流れになると想います。
的外れだったらすみません。
(o*。_。)oペコッ
久保様
回答有り難うございます。
サイトは画像を変えたので教えられるようになりました。
http://hpineh0913.com/wp-anemone/
「最初にアクセスしてきた端末を特定し、それに合わせたスタイルシートを読み込む
という流れになると想います。」
これは、header.phpにそれぞれの端末のcssをリンクさせるのではダメなのでしょうか？
リンクの仕方が間違っているのか、それとも全く異なるやり方なのでしょうか？
サイトを見てみましたがテーマのパスがルートになっていました。
もしスタイルシートがテーマの中にあるのなら、smart.cssの前に
<?php echo get_template_directory( );?>/ を追加してみてください。
h-pine-h 様
こちらのサイトが参考になるかもしれません。
「Web雑記超」
(o*。_。)oペコッ
>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
>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にメディアクエリを追加するのと同じ動作になると思います。
スタイルシートを分けるなら
http://dev.classmethod.jp/smartphone/device-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を指定するといった手法も使われる事があります
やり方は、一つじゃないので、自分にあった方法を研究してみるといいです
＞nobitaさん
ありがとうございます。通常のサイトではデモサイトでレスポンシブ作ったことがあるのですが、WPだと独自の方法があったりするのですね。もう少し調べてみます。
>nobitaさん
「こちらから見ると、消えているようなので、キャッシュの影響などではないかと思います。」
わたしのiPhoneサファリのCookieとデータを消去しても消えていないのですが、スマートフォンでご覧になられましたか？自分のスマフォから見ると変化がないので、対策に困っております。
すみません！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">
はい、あの上にも書いたようにcss少し書き直しましたら表示が変わりました！
大変お騒がせ致しました。
ご親切にありがとうございます！
