, - 2013/8/29 19:19

[Stinger2]PCとスマホで見たときの表示・非表示を変える方法

ご注意

この記事は2013年8月29日に書いたものです。 情報が古くなっている可能性があるのでご注意ください。

ブログのテーマに「Stinger2」を使ってます。こたら(@kotala_b)です。
「Stinger2」はスマホにも自動的に最適化され、iPhoneやAndroidでも見やすくなっています。
見やすくなっているのはPC用とスマホ用の2種類のCSSが用意されているおかげ!そのおかげでPCでは表示しているけど、スマホでは非表示にしたいということもできちゃいます!

スポンサードリンク

スマホかPCどちらかだけで表示したいときの設定方法

「Stinger2」をお使いのあなたは、スマホとPC表示のヘッダーを見比べるとメニューバーが違うのにお気づきでしょうか?
スマホ表示では折り畳まれていて、
stingercustom_130829_02
PCではそのまま表示されています。
stingercustom_130829_01
元々コードには2種類のメニューバーが記述されています。
スマホで見たときは折り畳まれていないメニューバーが非表示になるように設定されていて、PCで見たときは折り畳まれたメニューバーを非表示になるよう設定されているのです。
CSSに1行追加(削除)するだけでこのように非表示(表示)に変えることができます。

非表示にしたいときにCSSに追加するコード

PCで非表示にしたい時はPC用CSSの非表示にしたい要素に「display:none;」と追加します。
スマホで非表示にしたい時はスマホ用CSSに追加します。
「Stinger2」の折り畳みメニューバー部分はこのように非表示設定にされています。

この部分を削除するとPCでも折り畳みメニューバーが表示されます。
stingercustom_130829_03

表示非表示の切替えはお好みで!

「display:none;」をCSSに追加することで非表示にできます。
PC用とスマホ用の2つのCSSを用意している方はデザインに合わせて表示・非表示を切替えてみてはいかがでしょう?

Amazonのオススメ!

スポンサードリンク

  • ゆとりをもった自由な暮らし、ストレスフリーな生活を送る
    1984年生まれ
    生まれも育ちも神奈川県川崎市

    詳しいプロフィールはこちら

    • follow us in feedly
    • Google+
    • フィード
    • お問い合わせ