趣味を楽しむDIYな暮らし

手作りのくふうを活かした日常生活ブログ

PCとスマホのデザインを自動的に合わせてくれるレスポンシブデザインの使い方!

f:id:sikinomori117:20190525122712j:plain

 

はてなブログの基本機能を使ったデザインの変更やカスタマイズの方法には沢山の機能があり、使っているデザインによっては『PCとスマホでの表示が違って見にくい』と感じている方もみえるかも知れません。

 

この記事はブログを始めたばかりの方や、レスポンシブデザインのカスタマイズについて知りたい方のために判り易く説明して行きたいと思います。

 

➀レスポンシブの説明

 

➁レスポンシブデザインをスマホに取り入れる方法

 

➂カスタマイズの設定方法

 

この3つを説明して行きたいと思います。

 

現在私が使っているデザインはレスポンシプ対応のBrooklynです。

 

PCで表示されているグローバルメニューはスマホではトグル表示に自動変換されて大変見やすいです。

 

最後の方に参考にさせて頂いたグローバルナビゲーションに関する記事も載せてありますのでご確認下さい。

 

それでは説明に入ります。

 


PCとスマホ画面の違い

 

スマホとPC画面の大きな違いはサイドバーの部分になります。

 

スマホではPCの表示設定の全ては表示されません。

 

PCで設定した、ヘッダ、フッタ、記事上、記事下、の情報は表示されません。

 

スマホ画面上で表示させる場合には、はてなProに登録が必要です。

 

また、はてなブログでは一部のデザインテーマを使う事でレスポンシブデザインにも対応出来ます。

 

独自ドメイン取得に関する記事はこちらをご覧下さい

 www.mominokihausu.com

スポンサーリンク

  www.mominokihausu.com

 

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

 

デバイスや画像サイズによってWebページの見え方を変化させるWebデザイン技術です。

 

PC用に作成したWebページはスマホで見た場合には小さく表示されてしまいます。

 

レスポンシブデザインを用いることで、PCで見た場合とスマホで見た場合など、観覧ユーザーの状況に合わせてデザインを自動的に合わせてくれます。

 

以前はPC用とスマホ用のファイルを其々作成して対応していましたが、レスポンシブデザインが登場したことで製作するファイルは一つで多くの環境のユーザーに対応出来るようになりました。

 

レスポンシブデザインをスマホに取り込む

 

・テーマストアを開きレスポンシブ対応のテーマを探します。

 

※カテゴリー分けされていませんので、サムネイルや各テーマの詳細設定をみてレスポンシブ対応しているかを確認します。

 

f:id:sikinomori117:20190525123458j:plain

 

テーマが見付かったらプレビューしてインストールをクリックします。

 

設定方法 

 

デザインからスマホを選択後に詳細設定欄のレスポンシブデザインにチェックを入れます。最後に変更保存を押します。

 

f:id:sikinomori117:20190525123619j:plain

 

ここすごく大事です!

 

レスポンシブデザインに対応しているテーマを選んでも、上記のレスポンシブデザインにチェックを入れないと適用されません。

 

実際に私もここで、かなり足踏みしましたのでこの記事をご覧ください。

レスポンシブデザインにチェックを入れる事で解決した事例です。 

www.mominokihausu.com

 

グローバルナビゲーション設置時に参考にさせて頂いた記事です。

見やすくて大変気に入っています。

www.notitle-weblog.com

 

まとめ

 

グローバルメニュー等を設置した場合等、PCとスマホの表示を自動的に切り替えてくれる機能は大変便利だと思います。

 

まだ使われていない方はデザインのカスタマイズにチャレンジしてみてはいかがでしょうか。

 

 スポンサーリンク