WordPressテーマのモバイルレスポンシブ修正

辞書サイト（itako-dict）と言語学ポータル（linguistics）で、スマートフォンでの表示が崩れているという報告を受けた。3カラムレイアウト（左サイドバー、メインコンテンツ、右サイドバー）が横並びのままで、メインコンテンツが押し潰されて読めない状態だった。

原因を調査したところ、共有CSSファイル（/shared-assets/css/dict-style.css）にモバイル用のメディアクエリが完全に欠けていることが判明した。デスクトップ版のCSSしか定義されていなかったため、小さな画面でも3カラムレイアウトが維持されていた。

解決策は、適切なメディアクエリを追加することだった。画面幅780px以下の場合、レイアウトをdisplay: flexとflex-direction: columnで縦積みに変更する。さらに、表示順序も調整する必要があった。モバイルでは、メインコンテンツ→左サイドバー→右サイドバーの順が最も読みやすい。

@media (max-width: 780px) {
  .site-content {
    display: flex;
    flex-direction: column;
  }
  
  .content-area {
    order: 1;
    width: 100%;
  }
  
  .sidebar-left {
    order: 2;
    width: 100%;
  }
  
  .sidebar-right {
    order: 3;
    width: 100%;
  }
}

この修正を共有CSSファイルに適用したことで、itako-dictとlinguisticsの両サイトが同時に修正された。これが共有アセットアーキテクチャの利点だ。

さらに、両サイトのfunctions.phpでCSSのバージョン番号を’2.4’から’2.5’に更新した。これにより、ユーザーのブラウザキャッシュが強制的にクリアされ、新しいCSSが確実に読み込まれる。

現在、両サイトはすべてのデバイスサイズで正しく表示される。デスクトップでは3カラムレイアウト、タブレットでは2カラム、スマートフォンでは1カラムと、画面サイズに応じて適切にレイアウトが変化する。モバイルUXが大幅に改善された。