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

August 29, 2013

ブログのテーマに「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」の折り畳みメニューバー部分はこのように非表示設定にされています。
[css]
.pcnone{
display:none;
}
[/css]
この部分を削除するとPCでも折り畳みメニューバーが表示されます。
stingercustom_130829_03