いまさらかもしれませんが、本ブログをスマートフォン対応にしました。

Movable Typeを使っているのですが、最初調べていて、「スマホ対応は有料オプション?」(たとえばモバイルパックとか)とか思って面倒がっていたのですが、そういうわけではありませんでした。

結論を先に言えば、これまでのウェブサイトのテーマをレスポンシブWebデザインを採用したテーマに変えればokです。 私の場合、「クラシックウェブサイト」を使っていたのを「Rainier」に変えました。 Movable Type 6にはデフォルトで入っています(覚えていないのですがたぶんMovable Type 5も)。

方法は次のとおりです。

1. Moavble Typeの管理画面で自分が管理するブログを選択する。
2. 「ツール」→「バックアップ」でバックアップを取っておく。
3. 「現在のテーマ」に今使っているテーマ、「利用可能なテーマ」にいろいろ他のテーマがあると思います。そこでレスポンシブWebデザインを採用したブログテーマを選びます。良く分からなかったら「Rainier」でいいと思います。「適用」を押します。
4. ページを再構築するのですが、まずはインデクスページとかでやってみて確認しましょう。 ボタンを押すと出てくるページで「インデックスのみ」を選んで再構築します。
5. トップページ(たとえばこのブログならここ)を表示します。
6. 問題なければ、すべてのページを再構築します。

一点注意があるのは、テーマを変えるとそれまでに変更したテンプレートやウィジェットは基本的になくなってしまうことです。 これらをかなりいじっている場合は、何らかの形で記録しておいて、あとで復元できるようにしておきましょう。

これで基本的にはページがスマホでもそれなりに見えるようになります。

それなりに、というのは、このテンプレートは画面の横幅を見てウィジェット(PCでこのブログを見ている場合には横に出てくる「最近の記事」とか「カテゴリ」とかそういうの)の表示位置を記事の横にするか下にするか変えているだけだからです。

なので、何らかの都合で記事の中に固定幅で横長の項目があったりすると、記事自体はスマホでも画面の横幅に収まるようになりますが、右にずっとスクロールできてしまったりします。

それが起きやすいのは広告モジュールなどを使って固定幅の広告を使っている場合です。

私の場合はGoogle Adsenseを使っていますが、以前はサイズが728x90の「ビッグバナー」を使っていました。 このバナーは通常のスマホの画面を横にはみ出す(スマホ機種の解像度の問題ではなく、文字の大きさとの相対的な問題です)ので、Rainierでスマホ対 応にしても画面が横にスクロール可能になってしまって(しかもスクロールしても大部分は真っ白)イマイチです。

そこで、このようなものにつ いては、基本的に「レスポンシブ」という広告に変えます。 すると、そのときの画面幅を見て適切な広告を表示してくれます。 縦横のサイズが指定できないので縦幅について多少心配だったのですが、非常識なほど縦に大きな広告(たとえば縦600ピクセルのラージスカイスクレイパーのような)は表示されないようで、そのあたりは大丈夫です。

広告ユニットはテンプレートモジュールやウィジェットモジュールにしている場合が多いと思いますので、その部分にレスポンシブ広告のユニットを作成して、挿入しなおします。
上記の操作をしている場合はどうせテーマの変更で以前のテンプレートやウィジェットは消えてしまっているので、私の場合は心機一転でやりました。

まだおかしな部分があるかもしれませんが、見つけ次第直していきます。