Movable Type（MT)をスマートフォン（スマホ）対応にできるプラグインを探したのですが有料のものばかりでした。
そこで、HTMLとCSS（スタイルシート）を自分で編集して最適化しました。
htmlを編集
デバイス別にデザイン（レイアウト）を変える為に、トップページや記事ページの内に下記のコードを挿入します。
一番わかりやすいのは</head>の前です。
<meta name="viewport" content="width=device-width">
挿入するページは「テンプレート」から、
インデックス→「アーカイブページ」「メインページ」
アーカイブ→「エントリー・アーカイブ」「カテゴリー・アーカイブ」「日付アーカイブ」のソースを開いて該当箇所に挿入です。
※私のMTのバージョンはMovable Type 3.34です。
CSS（スタイルシート）を編集
具体的にどうゆうデザインにするかをCSS（スタイルシート）を編集します。
PCとタブレット、スマホの3つのデバイスで表示を変えるには3つのcssを考える必要がありますが、私はPCとスマホの2種類で表示を変える方法を取っています。
デバイスは2種類ですが、デザインは３つ用意します。
①スマホ用デザイン
②PC用デザイン
③共通デザイン
①画面の長さが最大640pxまではスマホ用のデザインを表示します。
下記の「※スマホ」にスマホ用のデザインを記述
@media screen and (max-width:640px){
※スマホ
}②画面の長さが641px以上の場合はPC用のデザインを表示します。
下記の「※PC」にスマホ用のデザインを記述
@media screen and (min-width:641px){
※PC
}③スマホもPCでも共通のデザインは上記のように「@media screen and (min-width:641px){※}」を使わないで普通に記述します。
スマホ用デザインとは？
スマホとPCのデザインの違いは、スマホが1カラムであるということです。
PCでも1カラムはありますが、通常は2カラムないし3カラムです。
そこで、2カラムないし3カラムを「float」で組んでいるレイアウトは「float」を解除して1カラムにします。
それと横幅を指定している場合、画面一杯に表示されるよう「width:100%;」に訂正します。
具体的には下記の記述をブロック要素に記述します。
※1例です。ブロック名によって記述は変わります。
@media screen and (max-width:640px){img{max-width:100%;height:auto;width:auto; }#container {width:100%;}#alpha {display:block;float:none;width:100%;}#beta {display:block;float:none;width:100%;}}その他の微調整
CSSを編集してスマホに最適化したレイアウトで表示されればひとまずOKです。
後は、文字の大きさや余白等を見やすいように微調整していきます。
サイトに広告コードを挿入してる場合、広告がデバイスによって最適化されない場合は、PC用とスマホ用の広告コードを入れる必要があります。
