無料ブログ「rentafree.net」の管理人ブログ

公式テンプレートを修正しました

Retina端末で閲覧しやすくなるように公式テンプレートを修正しました。

変更したテンプレートは、
  • 1-2カラム・ハイブリッド
  • 1-2-3カラム・ハイブリッド
です。

今までは1カラムと2カラムの分岐点が850pxで2カラムと3カラムの分岐点が1200pxとなっていましたが、
それぞれ60emと75emに変更しました。


また、「モバイル最適化1カラム」は良いテンプレートではないと思っていましたが、
テンプレート名からモバイル端末に対応させるのに良いテンプレートだと誤認されてしまうと思っていましたので、
この機会に公式テンプレートから外しました。
使用中の方はそのまま利用できますが、検索できませんので新規に選択することはできなくなっています。

レスポンシブWEBデザインをpxからemに変更します

今まで当サービスの公式サイトのCSSでは、端末の横幅が999px以下の場合と1000px以上の場合でデザインを振り分けていましたが、
その方法だと7インチ程度以下のRetina端末ではモバイル用のレイアウトを適用したいが、PC用のレイアウトが使われていたはずです。

この問題は以前から認識していましたが、
CSSの振り分けをpxではなくemで行えば解決すると考えましたので、
公式サイトのCSSを変更しました。

今まで999pxを基準にしていましたが、60emが基準となりました。
フォントサイズ = 1em
となりますので、ブラウザのフォントサイズが関係してきますので、PCでもモバイル用のレイアウトが利用される可能性もあります。
60emですので、画面の横幅が60文字以下の場合にモバイルレイアウトとなります。


公式テンプレートにつきましても、同様の変更を行います。