ブラックリストのキリンです

延滞、自己破産、債務整理でブラックになった人を応援するブログ

 メニュー

【はてなブログ】PC画面だけ記事の幅を変える方法!スマホはそのまま!

f:id:oshaberiitboy:20180117065643j:plain

  

「はてなブログの記事の幅を変えたら、スマホもPCと同じ画面になっちゃった...」

 

今回は、はてなブログのPCの画面だけ記事の幅を変えてスマホの画面デザインはそのままにする方法を書いていきます。

 

前に記事の幅が広かったから、少し狭くするためにカスタマイズしたんです。

 

 

カスタマイズは無事に成功して、余白が多くてスカスカだった見栄えの記事がかなり見やすくなったと思います。

 

これでブログデザインも良くなった!と意気込んでいましたが... 

 

f:id:oshaberiitboy:20180120135201j:plain

 

スマホのブログトップページがなぜかPCと同じデザインになってしまいました。

 

当サイトはブログテーマに「Brooklyn」を使っていて、レスポンシブデザインも適用されているのでPCと同じデザインにはなりません。

 

現にいままでも、スマホページはスマホ用のデザインでちゃんと運営されていました。

 

これじゃあスマホから来てくれた読者は見づらいよね

スマホ画面でPCと同じ細かい文字を出されると、目に優しくないからねえ...

 

なんとかPCだけ画面の幅を変えられてスマホ版はレスポンシブデザインのままにできないか、ちょっと調べてみました。

 

 

 

PCのみ記事の幅を変更するコードをデザインCSSに入力

 

...結論から言うと、意外とカンタンに解決できます。

 

以前も参考にしたブログにて、PCのみ横幅を調整するコードも書いてありました(完全に見逃してました...)。

 

 

オリジナルのコードは記事のリンク先を参考にしてください。以下は私のアレンジしたコードです。

 

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

 

こんな感じ!

 

このコードをコチラに貼り付けます。

 

設定 > デザイン > カスタマイズ > デザインCSS 

 

以前の「Brooklyn記事の横幅広すぎ!」で書いているコードは消して、コチラをコピペしてもらえばOKです(念の為バックアップをお願いします)。

 

「指定以上の大きさで調整」のコードで一律レイアウトは防げる

 

前回との一番大きい違いはこのコードを追加したことです。

 

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

 

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

 

このコードがなかったから、PCもスマホも一律で同じレイアウトになっちゃったんですね。そりゃそうですよね。

 

さて、これでスマホの画面を見るとこう変わりました。

 

f:id:oshaberiitboy:20180120141902j:plain

 

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

 

2度と元に戻せないかと思ってヒヤヒヤしたよ

 

まとめ:PC画面の記事デザインを変えたらスマホ画面もチェックしよう

 

以上、PC画面だけ記事の幅を変えるなら「指定以上の大きさのときだけ調整する」コードを入れよう...という記事でした。

 

レスポンシブデザインができるテーマはカスタムの手間が省けて、とても便利です。

 

しかし、デザインCSSにコードを打ち込みすぎると、今回のようにスマホ版に悪い影響がでる可能性があります。

 

PC画面のレイアウトはステキだけど、スマホだとグチャグチャってことがあるのか...

PCで記事を書いてる人は気をつけよう!

 

ブログのレイアウトをPCで変更したら、スマホ画面のデザインも変わっていないかチェックするのを心がけましょう。

 

本日は、以上です!