【解説あり】PCとスマホのデザインを一緒にして設定が楽に!はてなブログでレスポンシブデザインに対応しました。【解説あり】PCとスマホのデザインを一緒にして設定が楽に!はてなブログでレスポンシブデザインに対応しました。2017-10-24【解説あり】PCとスマホのデザインを一緒にして設定が楽に!はてなブログでレスポンシブデザインに対応しました。皆さんは、デザインのカスタマイズを行った際に、こんな経験はありませんか?・デザインCSSにコードを入力したのに反映されない。・PCでは反映されるのにスマホには反映されない。私はPCの知識がなく、参考にした記事通りにカスタマイズを試しても、上記のようになってしまうことが多く悲しくなっています。実際にヨメレバ・カエレバの設定を行っても、スマホにうまく表示されなかったりして悩んでました。レスポンシブデザインに設定してから、無事に表示されるようになりました!レスポンシブデザインとはPCのデザインをスマホと同じように表示する方法です。共通のURL・HTML・CSSファイルを使用しているため、PCでは表示されるのにスマホでは表示されないといった事象を避けることが出来ます。同じデザインにすることでPCでの読者もスマホから見た時に同じブログって認識できること。スマホのカスタマイズとPCのカスタマイズを別々に行う必要もなくなったことも大きなメリットに感じています。以下の手順で行ってください。レスポンシブデザイン対応のテーマに設定をレスポンシブデザインに対応するためにはテーマを絞らなければいけません!これまで私が使用していたテーマはHandwritingレスポンシブデザインに対応していなかった為、思い切ってデザインを変更しました。はてなブログにある公式テーマの中でレスポンシブデザインに対応しているのは以下の通りです。EvergreenReachTerminalこの中から私は、Reachを選択しました!デザインテーマの変更はダッシュボード⇒デザイン⇒デザインテーマを選択⇒変更を保存するで変えることが出来ます。レスポンシブデザインを設定するダッシュボード⇒デザイン⇒スマホアイコンをクリック⇒一番下の詳細設定をクリック⇒レスポンシブデザインにチェックでOK。スマホから確認してみてください。テーマ次第ではこれでうまく表示されます。テーマによっては上の画像のようにPC表示がそのままスマホに反映され、文字が小さくなってしまいます。その際は【設定方法3】に進んでください。【設定方法3】コードを入力する以下のコードを記述します。*/記述する場所はダッシュボード⇒デザイン⇒スパナマーク⇒デザインCSSです。これでPCとスマホが同じ表示になります。上手く対応していると、スマホの記事下にPCのサイドバーが表示されます。まとめ私はこれまで、PCで設定してもスマホに表示されなかったり、うまく反映されないことに疲れてしまい、もはや放置してました。スマホから見てくれる方が圧倒的に多いので、何とかしなきゃとも思ってました。調べたら簡単に設定することができ、これでPCとスマホをそれぞれ設定する必要もありません。スマホやタブレット、いろんなサイズにスクリーンでもうまく対応してくれるレスポンシブデザイン。私のようにパソコン初心者には特にお勧めです。11:30【解説あり】PCとスマホのデザインを一緒にして設定が楽に!はてなブログでレスポンシブデザインに対応しました。妻と私の出産体験→50時間の陣痛と難産を乗り越え、私は父親になりました。この日を一生忘れません。[立ち合い出産]1日10分の簡単副業→通算10万円を超えたアンケートモニターサイト“キューモニター”を紹介!お金が分かる厳選本!→知らないと損をするお金の知識。成功した私が利用した“スマイルサポート介護”を体験談を踏まえて紹介!【転職に失敗しない理由】あわせて読みたい仙台が日本一暮らしやすいと感じている理由を、東京から仙台に移住した私が紹介!生まれたばかりの赤ちゃんが可愛い!鼻血ものの写真集!【他人からの評価が気になる人へ】他人からの評価を気にしなくなってから人生が楽しくなった話。評価なんてどうでもいい。【解説あり】PCとスマホのデザインを一緒にして設定が楽に!はてなブログでレスポンシブデザインに対応しました。嫁にプレゼントが届きました。(1)注目記事スポンサーリンク嫁の欲しいものリストwww.amazon.co.jp月別アーカイブはてなブログをはじめよう!kooonyaaaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。