Daylight saving, いわゆるサマータイムに入って1時間ずれたので深夜なのにまだ眠くない、研究留学ブロガーの漣です。というわけでブログカスタマイズ続き。そんな暇があったら論文読め。
今使っているテーマ「Solid」は、レスポンシブデザイン非対応。スマホやタブレットで見ることが多いと思われるので、何とかしてレスポンシブにできないかと試行錯誤中。見にくくてすみません。
メジャーアップデートは別記事で、その他のちょこちょこした更新はこの記事の下に追記していくことにする。
今やっているのは、レスポンシブに対応したはてな公式テーマのcssから
/* Media Queries - Small Tablet & Smartphone */ @media (max-width: 767px)
を取ってきて、画面幅に応じた表示を行う設定にするところ。設定ではRetina display, 幅768-1024pxのタブレット、767pxまでのミニタブレットやスマートフォン、というふうに分かれていたが、細かい設定は面倒なのでスマホ縦画面 vs その他で分けることにした。Solidの元々のcssが結構複雑で、最初は画面の半分以上が隠れてしまうなど不具合が多かった。あちこちいじっては戻しの繰り返しで、ようやく見られる程度にはなったけど、まだ課題は山積み。
- コメントのボタンが反応しない問題
- #box2 (このサイトでは左側のコラム)が下に回ったときの幅をうまく設定できない
- #mainの右側に余白ができていてフォントサイズが小さくなるので、適切なサイズのフォントでピタッと画面にフィットするようにしたい
- 背景のツートンカラーも画面幅が狭くなるに従って1カラーに変えたい
- 過去記事のカレンダー表示が横に広がってダサい
などなど。
非常に見にくくて申し訳ない。iPhone5sの解像度を参考にして、最近のスマホでは横画面にすると通常の2コラムUIが表示されるように、max-widthを567pxに変えた*1ので、スマホの方は横画面で見て頂ければ幸甚。今日は疲れたのと明日からウィークデイなのでこのあたりで止めておくが、また変えていくと思います。ある程度満足のいくものができたら、また報告します。
こういうのって、昔のホームページによくあった
IE5, 1,024x768に最適化
なんてのを思い出す。
2016/03/14 19:00追記
#box2はまだまだだけど、結構レスポンシブっぽくなった。少しだけcssがわかってきたので、コピペではなくて必要なとこだけサイズを指定しているところ。
2016/03/17 9:00追記
昔使ってたiPhone4Sで確認したところ、非retinaのディスプレイに対応しきれていないことが判明したので、解決するまでレスポンシブ解除中。media queryの条件分岐式を使って、retinaは解像度2倍として扱う処理をすればいいのかな。
2016/03/21 12:15追記
昔のテーマに戻したらcssの設定が全部吹っ飛んだ。バックアップを取っていたので復旧したが、レスポンシブっぽくするところが再現できず無念。いっそのこと、レスポンシブ対応テーマを採用してリンクの色なんかをcssで上書きするほうがいいかもしれない･･･が、Solidに愛着が出てきてしまった。しばらく考えます。
