15年前のMovable Typeをスマホ対応・レスポンシブ化

Movable Type 5（MT5）で構築し、現在はPHPとして静的保存している私のリネージュ日記。
https://www.guckie.jp/mt5/lineage/
スマホで閲覧すると、3カラム構成のブログが、そのままスマホサイズに縮小されるので、ほぼ読めない状態。これを「完全レスポンシブ化」した自分用備忘録。
PHPを静的に保存したため、カテゴリ、月別など、同一記事が複数のフォルダーに存在し、記事総数が膨大なため、記事のPHPは触らず修正するために若干苦労した。

スマホ表示 Before

スマホ表示 After

ステップ1：レスポンシブであることの宣言（Viewportの設定）

まずはブラウザに対して、画面幅に合わせて表示を調整するよう指示を出します。

• 修正ファイル: includes_c/html.php

• コード:
  HTML
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

ステップ2：計算のルールを固定する（Box-sizing）

古いCSSは、余白（padding）を追加すると全体の幅が勝手に広がってしまう仕様でした。これを「枠線も余白も全部込みで100%」という現代ルールに一括変換します。

• 修正ファイル: styles.css

• コード:
  CSS
  *, *:before, *:after { box-sizing: border-box !important; }

ステップ3：右ズレを修正する（Layout Reset）

古いテーマ特有の「サイドバー用に空けられた200px以上の空白」を強制的にゼロにします。これが一番の難所でした。

• 内容: styles.cssの#container や #content などの主要な箱の padding と margin を 0 にリセットし、width: 100% を指定。

• 効果: 横スクロールが消え、画面内にコンテンツが収まるようになります。

ステップ4：ヘッダーを中央に呼び戻す（Header Center）

PCでは左上に固定されていたタイトルとサブタイトルを、スマホの画面中央に整列させます。

• 内容: styles.cssにtext-align: center を適用し、重なっていた要素の height（高さ制限）を解除。

ステップ5：「カード型」で視認性を上げる（Card UI）

背景画像を消した代わりに、記事エリア（#alpha）に背景色、角丸、影をつけ、現代的な「カード型レイアウト」に昇華させました。

• 設定: styles.cssにbackground-color: #444444, border-radius: 8px, box-shadow を適用。

ステップ6：画像の突き出し防止（Fluid Media）

スクショした画像がスマホ画面を突き破らないよう、自動で縮小される設定を追加しました。

• コード:
  CSS
  img { max-width: 100% !important; height: auto !important; }

ステップ7：サイドバー（カテゴリアーカイブ）へのメニュー追加（Navigation）

縦に長くなったページの最下部へ移動した「カテゴリ」や「アーカイブ」へ、一瞬で飛べるジャンプボタンを設置。

• 修正ファイル: includes_c/template_85.php（ヘッダー共通部品）

• 内容: アンカーリンク（#beta行き）を設置。PHPの include 構造のおかげで、この1箇所の修正で全記事に対応完了。