生きるために今日からできること

がんと付き合いながら、無理せずゆたかに生きる方法

スマホでCSSが対応されない?はてなブログでレスポンシブデザインに

f:id:fuku-mimi:20190712194301p:plain



こんにちは❤ふくみみです

はてなブログをPCで編集してあとで見ると、デザインがスマホに対応していない時ってありませんか?

その原因はレスポンシブデザインに関係あるかもしれません

今回は、はてなブログでレスポンシブデザインに切り替える方法について書きたいと思います

レスポンシブデザインとは

レスポンシブデザインとは、PC,モバイルなどのデバイスの画面サイズに合わせて自動で切り替わるテンプレートやテーマのデザインのことです

Googieが推奨しているシステムで、特徴としては、このデザインを採用することにより、一昔前のようにPC用とモバイル用のサイトを別々に作る必要がなく、共通のwebサイトを一つ作るだけであらゆるデバイスに対応できると言うことです

Googleは2015年4月にモバイルフレンドリーアップデートを行い、レスポンシブデザインを採用しているwebサイトの検索順位を上げると発表しています

レスポンシブデザインをブログに採用することは、PVの数にも関係してくる可能性が高いわけです

スマホでCSSカスタマイズが反映されないとき

レスポンシブデザインに切り替えないとせっかくCSSやHTMLでカスタマイズしたデザインが、スマホに対応されずにがっかりなんてこともあります

f:id:fuku-mimi:20190629224754p:plainf:id:fuku-mimi:20190629225709p:plainf:id:fuku-mimi:20190629225829p:plain

管理画面から簡単に切り替えることができるので、やってみましょう

はてなブログでレスポンシブデザインに切り替える方法

 

f:id:fuku-mimi:20190627102303p:plain

管理画面の【デザイン】をクリック

 

f:id:fuku-mimi:20190629230155p:plain

【モバイルのアイコン】⇒【詳細設定】をクリック

 

f:id:fuku-mimi:20190629231758p:plain

ポップアップされてくる案内の【レスポンシブデザイン】にチェックを入れる

 

f:id:fuku-mimi:20190629232611p:plain

この時【現在選択中のテーマを確認する】をクリックして現在のテーマがレスポンシブデザイン対応か確認しておくこと

もし、対応していない場合、テーマのテンプレートが崩れて、字が重なったりします

対応しているテーマに替えることをお勧めします

最後に【変更を保存する】をクリックして完了

 

まとめ

レスポンシブデザインとは、PC,モバイル共通のテーマやテンプレートのデザイン

レスポンシブデザインに替えることで様々なメリットがある

はてなブログでは、管理画面から簡単に切り替えることができる

レスポンシブデザイン対応のテーマに替える必要がある

 

以上でした

個人的には絶対おすすめです

分かりにくいことがあればいつでもご質問ください

わたしも毎日勉強中ですが

 

それでは、また