有限会社ハートブレーン自然豊かな環境で、ハートフルな業務を展開中。会社案内お問合せ14.11.01レスポンシブデザインでPC用スマホ用切り替えボタンをスマホにだけ表示させる方法スマートフォンでのネット利用率が益々上昇しているようです。PCは電源入れて起動するまでの待ち時間は長いし、ブラウザとか言われてもどれがどれか分からないし......という声も聞きます。その点スマートフォンは手軽に閲覧できるし、面倒なメンテナンスも必要ないし、ユーザーとインターネットとの距離がぐっと近付きます。個人的には、スマートフォンだと電池減るの早いし、ページ読み込み速度は遅いし、そもそも自宅からだと電波届きにくくて繋がらないし、PCを優先してしまうのですが。うちに来るのあと何年後かなー。今やwebサイトはPCでもスマートフォンでも無理なく見られるのが絶対条件になりつつありますが、制作側にしてみれば、結構手間がかかります。ページを2つ作ってhtaccessで切り替えるとか、デバイスのサイズに合わせたレスポンシブデザインにするとか。どちらにもメリット・デメリットはあります。レスポンシブデザインを採用した場合、ネックとなるのが「PC用」「スマートフォン用」の表示切り替えボタン。どのサイトでも見かけますよね。スマートフォンで閲覧していても、やはり情報量が減ったりするので、PC用表示させたい人も多いでしょう。いう時に、参考にしたのがこちら。レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた(A40様)作業が楽で、解説も分かりやすく、私でもすぐに設置できました。難しかったのが、jquery.cookie.jsをダウンロードする時にちょっと迷子になりかけた、というところでしょうか?調べていく中で、この方法を採用している人はやはり多かったです。多くのコーダーにとって救いの手ではあるのですが、1つだけ難点がありました。PCからの閲覧だと、表示切り替えしません。PCから閲覧する場合は、そもそも必要ない機能ではあります。切り替え機能は働かないのに、ボタンだけ表示されるのも格好が付きません。思って、スマートフォン用のデバイスサイズだけボタンを表示させる設定にしてみました。するとここでも問題発生。スマートフォンでPC用表示にした後、ボタンが消えてしまうのでスマートフォン用表示に戻れなくなりました。「手を加えてスマートフォンで見た時だけ表示させるようにしました」と追記みたいに書いてらっしゃる方もいましたが、私はその加えるべき手に対する知識がありません。調べに調べて、いつものように他力本願で辿り着いた道が、こちらです。}</script>style.cssは、PC版とスマートフォン版の共通cssです。この記述ですが、必ずヘッダーにしましょう。ヘッダーの行数を増やすことをためらい、既存のjsファイルに書き加えてみたら、見事にページが真っ白になりました。してみると、少なくともcssは、PC用とスマートフォン用、別々に用意した方が良いのかもしれません。cssファイル数が増えるか、cssファイルの行数が増えるか、どちらがSEO対策として不利なのでしょう。その辺りは別途考察してみますが、制作・管理側としては、ファイル数が増えた方がまだ作業しやすそうです。【ハートブレーン】https://heartbrain.netプログラミング【ハートブレーン】https://heartbrain.net最後までご覧いただき、ありがとうございました。よろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。