当サイトがスマートフォンに対応しました

2013年11月14日(木) 02:28 | 日記

レスポンシブデザインとかいうやつに挑戦してみました。
同じページを、パソコンか携帯端末かでレイアウトを変えちゃおうというやつ。
先週の後半あたりからちまちまとHTMLやCSSをいじくり回して、今日ようやく完成しました。
このサイトをスマートフォンで表示させると、今まではPC向けのサイトと同じデザインで縮小表示されていて、文章を読むためには読者がいちいち画面を拡大する必要がありました。レスポンシブデザインにすることでそうした手間が必要なくなり、最初からちょうどいい文字の大きさで表示できるようになりました。

実はパソコンの画面でも、このサイトがスマホなどの携帯端末でどのように表示されるかを確認できます。やり方は簡単。ブラウザーの横幅を狭くするだけです。
現状では、横880pxを境にデザインが切り替わるようにしています。ブラウザーの横幅が880px以下になると、右側のサイドバーが消えたり(実際はページの最下段に存在しています)、タイトルの横にあったギターの写真の色が薄くなってタイトルの背景に表示されたりします。その他にも細かいところをいくつか調整しています。

Movable Typeを使ってどんなふうにスマホ用サイトのデザインを構築したのか、気が向いたら詳しい説明をしたいと思います。

トラックバック

トラックバックURL: http://folky.saloon.jp/mt/mt-tbc.cgi/2858

コメントを投稿

※サーバーの状況によって、投稿完了まで時間がかかることがあります。
※投稿内容がすぐに反映されないことがありますが、ページを再読み込みするとコメントが表示されます。
※入力したURLは公開されますが、メールアドレスは公開されません(管理者に対してのみ通知されます)。