iiie.nagoya

物づくりと生活、"経験"を記事へ

スマホ・タブレットをレスポンシブデザインに設定する【gram】

f:id:gorislog:20190407194632p:plain

 

はてなブログテーマ『gram』のカスタマイズ記事です。

 

gramsample.hatenablog.jp

 

 

レスポンシブデザインについて

gramはレスポンシブデザインに対応しています。

レスポンシブデザインとは、画面サイズに依存しないデザインの事です。『見やすい表示に自動的に切り替える』仕組みのデザインで、gramに関して言えば似たようなデザインで表示されるようになります。

 

違う点で言えば992px以上のPCビューを想定した2列カード型レイアウト、992未満のタブレット・スマホサイズを想定した1列カード型レイアウトになることで、文字サイズなどの細かい表示指定以外はほぼ同じ見た目になります。

 

PCビュー

f:id:gorislog:20190424224745p:plain

 

スマホビュー

f:id:gorislog:20190424224829p:plain

 

設定方法

はてなブログは、レスポンシブデザインへの切り替えが設定でできるので、レスポンシブデザインに対応しているテーマを使用する場合、簡単に使うことができます。

 

f:id:gorislog:20190427220218p:plain

 

  • デザイン画面を開く
  • スマホのアイコンマーク(スマートフォン)をクリック
  • 詳細設定をクリック
  • 『レスポンシブデザイン』のチェックマークをチェックする

 

f:id:gorislog:20190427220309p:plain

 

  • 『レスポンシブデザイン』にチェックマークがつく
  • サイトの表示がスマホ表示から切り替わる
  • 『変更を保存』を押す

 

レスポンシブデザインは、はてなブログ無料ユーザーでも使用できますので、スマホユーザーのアクセスアップを図る場合には有効です。※スマホビューのカスタマイズに、無料ユーザーには制限があるので