旧MTテンプレートをモバイルフレンドリー化

mobable typeにて作成していたブログをモバイルフレンドリーに対応してみたのですが、旧テンプレートのデフォルトを使用している場合、レスポンシブ対応するのがけっこうムズカシイようです。

最近はレスポンシブ対応しているMTテンプレートも多いようですが、ワインレッドなどのひと昔前のテンプレートをスマホ対応する場合は手間がかかるものと思います。

この場合、以下の手順で対応するとよいかもしれません。

①各ページにviewportのメタタグを埋め込む。
<meta name="viewport" content="width=device-width" />

このあたりは基本なので省略します。

②スマホ用のスタイルシートを設定する
@media screen and (max-device-width: 480px) ｛スマホ用｝

mtのスタイルシートの場合、@importで２か所ぐらいから読み込む設定になっているかと思いますが、その直下にでも追加して、一番最後にスマホ用のスタイルシートが読み込まれるように設定するとよいでしょう。

このスマホ用の箇所に以下の設定を書き込んでいき、スマホで表示した際にだけ、上書きで表示されるようにします。

③CSSのfloatを解除する。

@importで参照しているそれぞれのスタイルシートを表示し、「float」が設定されている箇所を検索します。#alphaとか、#betaみたいなのが該当するかと思いますが、それぞれのfloat設定を②のスマホ用のスタイルシートに「float:none;」を追加して全て無効にします。

これでＰＣサイトでは３カラムや２カラムで表示されるものの、スマホで表示した際にはfloatが解除されて縦長の状態で表示されます。

④CSSのwidthを100%にする。

横幅が190pxなどで設定されているものについては、「width:100%;」を指定して、すべてスマホの横幅の長さで表示されるようにします。これも「width」で検索をかけ、pxで指定されている箇所を全て割り出していくとよいでしょう。

⑤leftやrightプロパティーを解除する。

私の場合、ここで時間がかかったのですが、普通のホームページやブログではあまり出てこない、「leftプロパティー」や「rightプロパティー」などが旧mtテンプレートで設定されています。これは横の要素との距離を設定するものですが、これも「left:0px;」や「right:0px;」などと指定してすべて解除しておきます。

おそらく、２か所ぐらいしかないと思いますが、テンプレートによって違うはずです。

⑥フォントサイズなどを微調整する。

あとはフォントサイズを120%ぐらいに設定しておきます。

これでスマホでもきちんと表示されるかと思います。