はてなブログでPCだけメイン記事の幅を変える!レスポンシブデザインでもスマホ画面はそのまま!

f:id:oshaberiitboy:20180117065643j:plain

 

 

どうしてこんな事になっちゃったんだ・・・。

 

実はね、メイン記事の幅が広かったから、先日少し狭くするためにカスタマイズしたんですよ。

 

oshaberiitboy.hatenablog.com

 

 

 よっしゃ!狭くなった!これで内容を含めスカスカだった記事が見やすくなったで!

 

と、意気込んでいたんですが・・・・。

 

 

f:id:oshaberiitboy:20180120135201j:plain

 

 

スマホの画面が、PCと同じようになってたんですよ・・・・。

 

 

 

な ん で や ね ん ! !

 

 

 

前まではちゃんと、スマホに合わせたデザインになっとったやないか!

 

なんで幅を変更するコードを書き込んだら、PCだけじゃなくてスマホも変化すんねん!

 

 

・・・・と、グチはここまでにして

 

 

というわけで今回は、メイン記事の横幅を「PCのみ」変更する方法をお伝えします。

 

 

 

 

 

メイン記事の横幅をPCのみ変更する

 

 

・・・結論から言うと、意外と簡単に解決できます(笑)

 

以前の記事でも参考にしたブログの方に、PCのみ横幅を調整するコードも書いてありました。

 

design.syofuso.com

 

 

以下、僕のアレンジしたコードです。

 

 

/* 記事の幅の変更(PCのみ) */
@media screen and (min-width: 1100px) {
#main {
width: 664px;
}
#box2 {
width: 316px;
}
#container #content {
width: 1030px;
}
}

 

こんな感じ!

 

前回と一番大きい違いは、

 

 

@media screen and (min-width: 1100px)

 

 

このコードを追加したことですね!

 

要は「1100px以上の大きさの画面の時だけ、記事の幅を調整するよ!」ってことです。

 

これでスマホの画面を見ると、

 

 

f:id:oshaberiitboy:20180120141902j:plain

 

 

良かった!ちゃんとしたデザインに戻ってる!

 

二度と戻らないと思ってヒヤヒヤしたよ(汗)

 

 

まとめ

 

レスポンシブデザインはカスタムの手間が省けて非常に便利です!

 

が、PCでなんでもかんでもコードを打ち込みすぎるとスマホ版がとんでもない事になるので、気をつけましょう(笑)

 

今回は、以上です!