今回は、はてなブログのPCの画面だけ記事の幅を変えてスマホの画面デザインはそのままにする方法を書いていきます。前に記事の幅が広かったから、少し狭くするためにカスタマイズしたんです。【はてなブログ】Brooklyn記事の横幅広すぎ!カスタマイズで調整する方法カスタマイズは無事に成功して、余白が多くてスカスカだった見栄えの記事がかなり見やすくなったと思います。これでブログデザインも良くなった!と意気込んでいましたが...スマホのブログトップページがなぜかPCと同じデザインになってしまいました。当サイトはブログテーマに「Brooklyn」を使っていて、レスポンシブデザインも適用されているのでPCと同じデザインにはなりません。いままでも、スマホページはスマホ用のデザインでちゃんと運営されていました。これじゃあスマホから来てくれた読者は見づらいよねスマホ画面でPCと同じ細かい文字を出されると、目に優しくないからねえ...なんとかPCだけ画面の幅を変えられてスマホ版はレスポンシブデザインのままにできないか、ちょっと調べてみました。まとめ:PC画面の記事デザインを変えたらスマホ画面もチェックしようPCのみ記事の幅を変更するコードをデザインCSSに入力...結論から言うと、意外とカンタンに解決できます。以前も参考にしたブログにて、PCのみ横幅を調整するコードも書いてありました(完全に見逃してました...)。Customオリジナルのコードは記事のリンク先を参考にしてください。以下は私のアレンジしたコードです。1030px;}}こんな感じ!このコードをコチラに貼り付けます。デザインCSS以前の「Brooklyn記事の横幅広すぎ!」で書いているコードは消して、コチラをコピペしてもらえばOKです(念の為バックアップをお願いします)。「指定以上の大きさで調整」のコードで一律レイアウトは防げる前回との一番大きい違いはこのコードを追加したことです。1100px)要は「1100px以上の大きさの画面の時だけ記事の幅を調整するよ!」って指定することです。このコードがなかったから、PCもスマホも一律で同じレイアウトになっちゃったんですね。これでスマホの画面を見るとこう変わりました。良かった!ちゃんとしたデザインに戻ってる!2度と元に戻せないかと思ってヒヤヒヤしたよまとめ:PC画面の記事デザインを変えたらスマホ画面もチェックしよう以上、PC画面だけ記事の幅を変えるなら「指定以上の大きさのときだけ調整する」コードを入れよう...という記事でした。レスポンシブデザインができるテーマはカスタムの手間が省けて、とても便利です。デザインCSSにコードを打ち込みすぎると、今回のようにスマホ版に悪い影響がでる可能性があります。PC画面のレイアウトはステキだけど、スマホだとグチャグチャってことがあるのか...PCで記事を書いてる人は気をつけよう!ブログのレイアウトをPCで変更したら、スマホ画面のデザインも変わっていないかチェックするのを心がけましょう。リライトブログの過去記事をリライトしたら更新の日付も最新にしようブログの検索順位を上げるためには、新記事の投稿とともにリライトが欠かせません。...今回は、はてなブログの吹き出し会話をLINE風にアレンジする方法について書いていきます。...今回は、Amazonアソシエイトの広告リンクをカスタマイズする方法をお伝えします。...今回は、ブログのアイコンは写真よりイラストの方がオススメだよ!ということについて書いていきます。※ここで紹介している方法は「はてなブログ無料版」にて有効な方法です。有料のはてなブログProを利用の場合は以下の手順を参考にしてください。...PREV【はてなブログ】Brooklyn記事の横幅広すぎ!カスタマイズで調整する方法NEXTはてなブログのサイドバーに人気記事を表示するには?カスタマイズ方法を紹介キリンクレジットカードの支払いから1年間逃げ回ってた元ブラックリスト。ブラックリストの人へ向けて対策やアドバイスの記事を書いていきます。AFFINGER5.。