オウチノコト.·˖*☆⡱

関西に住む30代の主婦です。子どもは2歳離れの兄弟2人。シンプルな北欧風の家づくりをしたいと思い、土地探し中。節約ネタや子ども、家のことを綴っていけたらと思ってます。

MENU

はてなブログのPCとスマホ版デザインを同じにする

こんにちは。


はてなブログを使ってる方でPC版のデザインとスマホ版のデザインが違って困ってるって人はいませんか?


私はPC版にプライバシーポリシーと問い合わせフォームをサイドバーに設置しているののに、スマホ版には反映されないので、とても困っていました。


また、カテゴリーをスマホ版に設置しようとしても、上手くできず、でもPC版では無事にカテゴリーを設置できました。


スマホのカスタマイズを変更しようと、ネットで調べて行ってみても、上手くいかず、いーッとなることばかりでした(╬ •̀ ^•́ )


ですが、つい先日、PCとスマホのデザインを一緒にすることに成功しました!


PCとスマホのデザインを一緒にする方法について、お伝えしたいと思います。
やり方はとても簡単ですので、是非みなさんもやってみて下さい٩(๑>∀<๑)۶

レスポンシブデザインにする

レスポンシブデザインにすることで、PC版でもスマホ、タブレットでも同じ設定で同じデザインが使えます!


表示する画面サイズに合わせて自動で表示してくれます。


PC版ととスマホで同じデザインデザインにするメリットとして、PCで見てくれた人がいスマホから見たときに同じブログだと認識することができます。


他にはカスタマイズを変更する際、PC用、スマホ用と2つ変更する手間が省けるので簡単に変更できます🎶


では、設定方法をお伝えしていきますね🎶簡単ですよ〜〜

レスポンシブデザイン対応のテーマに設定する

レスポンシブデザインにするためには、レスポンシブデザイン対応のテーマを設定していないと上手く反映されません。


レスポンシブデザイン対応のテーメは5つあります。その5つとは、EvergreenとReach、Terminal、Journal-Pink、B!KUMAです。


設定方法は
ダッシュボード→デザイン→デザインテーマ選択のところで、EvergreenとReach、Terminal、Journal-Pink、B!KUMAのうちの1つを選びます→変更を保存するをクリック!

レスポンシブデザインにチェックをつける

ダッシュボード→デザイン→スマホアイコンをクリックする
→一番下の詳細設定をクリックすると下の画像が出てくるので、チェックをつけてください。
f:id:saruhina:20180323165030j:plain:h300


Before After

以前までのスマホのブログの下の部分の画像です↓
f:id:saruhina:20180323165119j:plain:h300



レスポンシブデザインに変えてからのスマホの下の部分の画像です↓
f:id:saruhina:20180323165153j:plain:h300

f:id:saruhina:20180323165229j:plain:h300



カテゴリーやプライバシーポリシー、問い合わせフォームが表示されました!



すごく簡単にできるので、オススメです❤︎
スマホのカスタマイズが難しいと悩んでいる方は是非お試しください!