アラサーサラリーマンのDiary

アラサーサラリーマンが記事を書いています。自分の興味あることをあげているので、見ていただけると幸いです。https://www.instagram.com/itemist_diary/

はてなブログのスマホデザインを変更する方法(レスポンシブデザイン)

はてなブログでは初期設定だとPCのデザインとスマホのデザインが違うことをご存知でしたか?私は最近知って焦って変更しました。

今回はPCとスマホのデザインを同じにする方法(レスポンシブデザイン)を紹介します。
簡単に設定可能なので是非やってみてください!(忙しい方用に大切なところは赤文字で記載しています。)

 

PCで変更する場合

①まず初めにダッシュボードのページからデザインを選択します。



②次にスマートフォンのマークを選択します。

 

詳細設定のレスポンシブデザインにチェックをつける
 ※ 詳細設定が開いていないときは、詳細設定をクリックしてください

 

変更を保存するを選択する
 ※これをしないと変更されないので忘れないようにしましょう

 

これで完了です。簡単にPCとスマホのデザインを同じにすることができます。
やってなかったという方は是非試してみてください。

 

スマホ版の場合

スマホでする場合は、WebページからPC版で開きましょう。
あとは、上記で説明した方法で行うだけです。
はてなブログスマホアプリでは変更できないようです。
(もしアプリのバージョンアップ等があったら追記します)

 

レスポンシブデザインの注意点

はてなブログのヘルプに記載されていたものですが、レスポンシブデザイン(スマホとPCのデザインが同じ)に変更した場合は、読者が読みやすい状態になっているか確認しましょう。テーマがレスポンシブデザインに対応していない場合、逆に見づらくなってしまうようです。(公式テーマなどは対応しているものが多いようですが、確認は大切ですね。)

  • ご自身でレスポンシブデザインに対応したテーマCSSを記述する場合は、CSSが適切に記述されているかお確かめください。
  • テーマCSSの記述についての詳細は、ヘルプ「はてなブログテーマ制作の手引き」にある「レスポンシブデザインのテーマを作成するには」を参照してください。
  • テーマが正しくレスポンシブデザインに対応していないと、単にPC版の画面サイズを縮小しただけで表示されるなど、かえって見づらくなるおそれがあります。

最後に

今回は、はてなブログのPCとスマホのデザインを同じにする方法を紹介しました。最近はパソコンからのアクセスよりスマホからのアクセスが多いため、設定を忘れないように注意したいですね。読みやすいサイトの方が、読んでくれる人にとってストレスがないので是非試してみてください。

最後まで読んでいただきありがとうございました!

www.mydartsjournal.com