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

公式サイトのスマートフォン最適化をしました

公式サイトをスマートフォン等の画面の小さい端末でも見やすいようにしました。

画面の横幅が799px以下の場合、
サイドバーが非表示の1カラムデザインになり、代わりに<select>メニューが表示されます。
<select>メニューは選択変更でジャンプします。

IE 8以下
Firefox 3.5未満 (制作元サポート切れバージョン)
の場合は機能が無効なため、799px以下でも2カラム表示となります。

アクセス解析は1カラム化が難しかったので、
799px以下でも2カラムです。

800px以上の画面の場合今までどおり2カラムページは2カラムですが、
<form>系をちょっといじったので、若干表示内容が変わっています。


デザインを大幅に変更したため、
旧版CSSをキャッシュしている場合は表示がおかしくなる可能性があります。
公式サイトトップページで、
Ctrl+F5 (ブラウザによっては、Ctrl+更新クリック)
で強制リロードとなりCSSが更新されると思います。
単にF5や更新ボタンだけだとキャッシュが利用される可能性があります。


表示のおかしいページや機能に問題が生じている箇所がありましたら報告していただけると助かります。

公式サイトのスマートフォン最適化をしようとしています

公式サイトをスマートフォンの様な画面の小さい端末で利用しやすいように改造しようとしています。

仕組み的には、
@mediaで799px以下の際にサイドバーを消して、
代わりに<select>でジャンプする感じのメニューを表示する感じ。
右上の468x60の広告は場所移動して下にセンタリングして重ねます。

800px以上の場合は構造は変わらんのですが、
<fieldset>とか<optgroup>とか、
知らなかったんですが、便利そうなんで導入しようと思います。
(これらはHTML4からあったらしい・・・)