プチメタ3.0

刺激を受けた物事に対する感想や考察、資産運用や英語学習、自己成長に関することなど。


ブログをレスポンシブデザインに変更しました

f:id:IKUSHIMA:20191011232906j:plain


これまでプチメタはパソコンやタブレットで見た場合と
スマートフォンで見た場合とで
デザインやレイアウトが大きく異なっていました。


旧プチメタをパソコンから見た場合:
f:id:IKUSHIMA:20191011232348j:plain


旧プチメタをスマホから見た場合:
f:id:IKUSHIMA:20191011232400j:plain


これははてなブログのもともとの仕様で、
スマホで見やすいレイアウトには変わるものの
本来のデザインがまったく反映されないので
閲覧する端末によって雰囲気が違うという問題がありました。


そこで同一のデザインを流用しつつ、
その端末の解像度に合わせてレイアウトが変わる
「レスポンシブデザイン」に載せ替えることにしました。


単に設定ファイルを置き換えるだけでは済まず、
これまでのブログの雰囲気と同じになるよう
いろいろと手を加える部分に苦労しました。
実質的に「プチメタ3.1」といったところでしょうか。


新プチメタをパソコンから見た場合:
f:id:IKUSHIMA:20191011233519j:plain


新プチメタをスマホから見た場合:
f:id:IKUSHIMA:20191011233542j:plain


横幅の狭いスマホやタブレットから閲覧した場合は
サイドバーがブログ下部に移動し、
記事本文が狭く表示されないようになっています。
同じタブレットでも画面を横向きにして広くすると
サイドバーも含めて完全に表示されます。


今やWebサイトでのレスポンシブ対応は珍しくないのですが、
2年前にブログを作ったときに選んだデザインが
レスポンシブに非対応のものだったので、
なかなか置き換える踏ん切りがつきませんでした。


レブログの方も同様に変更しています。
もう少し違和感がなくなるよう、
今後も細かい変更を加えていくつもりです。

総アクセス数