Home » このサイトについて » 最低限ながらレスポンシブデザインに

最低限ながらレスポンシブデザインに

URLの変更に引き続いて、5月10日にレスポンシブ対応を行いました。

2011年7月からのスマホ対応

このサイト・インストラクターのネタ帳では、2011年7月にAMNさんに便宜を図っていただいたサーバーへ引っ越したときに、スマホ・ガラケー対応を行っていました。

PC向けとは別に、スマホ・ガラケー用テンプレートを用意しておいて、Movable Typeのリビルドでは3種類のHTMMファイルを出力し、サーバーの設定でアクセスしたクライアントに応じて表示するページを切り替えるという方式でした。

スマホやガラケーには、ファイルサイズの小さいHTMLファイル・画像ファイルを送信する、まぁ正しい対応方法でしたが、テンプレート等の管理が煩雑になり、私としてはそこに注力したくないという気持ちも。。

URL変更にあわせて、従来のスマホ・ガラケー用ファイルを用意する形での対応をやめ、スマホからのアクセスには、レスポンシブデザインで対応することにしました。

［スポンサードリンク］

今回行ったこと

できるだけ手間をかけたくなかったので、最低限の変更だけを行いました。
主に行ったのは、ヘッダーへのタグ追加と、ちょっとしたCSSの修正です。

「Movable Typeのサイトを簡単にレスポンシブデザイン化する方法」を参考にさせていただき、「name="viewport" content="width=device-width,initial-scale=1"」というmetaタグをヘッダーに追加して、CSSファイルの最後に、「@media screen and (max-width:640px){ }」という追記をして、スマホ向けの指定を行いました。

CSSで行っているのは、カラムの回り込み解除や、フッターや一部パーツの非表示、画像のリサイズ指定などです。

ちょっと面倒だったのが、「スマホサイトでやってはダメなAdSenseポリシー違反の例」に記述のある、AdSense広告を非表示にしてはいけないというルールでした。

最低限の変更でしたが、Googleのモバイルフレンドリーテストで「このページはモバイルフレンドリーです」という評価が出たので、細かく見るとアレな部分もありますが、ひとまずOKとします。

［スポンサードリンク］