言語学サイトのWordPressテーマを開発中、ブロックエディタの「カラム」ブロックが突然機能しなくなった。2カラムレイアウトを設定しても、コンテンツが縦に積み重なってしまう。 調査の結果、functions.phpの誤った設定が原因だと判明した。不要なスタイルを削除しようとして、wp-block-libraryをdequeueしていたのだ。 wp-block-libraryは、WordPressのブロックエディタが生成するすべてのブロックの基本スタイルを含んでいる。これを削除すると、カラムブロックだけでなく、ギャラリー、引用、ボタンなど、すべてのブロックが正しく表示されなくなる。 正しいアプローチは、wp-block-libraryを保持しつつ、テーマでブロックスタイルのサポートを明示的に宣言することだった。 この一行を追加することで、WordPressはテーマがブロックエディタと互換性があることを認識し、適切なスタイルを適用する。 同時に、年表（Chronology）セクションのリファクタリングも行った。複雑なHTMLテーブルを廃止し、新しいショートコードシステム（[chronology_section]）に置き換えた。このショートコードは、functions.phpで定義され、モバイルレスポンシブな年表テーブルを生成する。 モバイルCSS版でも苦労した。年表テーブルが小さな画面で崩れていた。最終的に、完全に書き直したchronology.css（v4）を作成し、flexboxベースのレスポンシブレイアウトを実装した。 現在、言語学サイトのWordPressテーマは、ブロックエディタと完全に互換性がある。カラムブロックは正しく動作し、年表セクションはすべてのデバイスで読みやすく表示される。
言語学ポータルサイトの「モンゴル語学の歴史」年表ページで、21世紀セクションの構造を整理した。当初、テーブルの上部に2行の「概要行」があり、その後に2000年代、2010年代、2020年代の詳細が続いていた。 しかし、この概要行は冗長だった。21世紀が「進行中の過程」であることは、2020年代のセクションを見れば明らかだ。わざわざ冒頭で述べる必要はない。 そこで、2つの概要行を削除し、年代見出し（2000年代、2010年代、2020年代）だけに依存する構造に変更した。これにより、テーブルの構造が明確になり、各年代のセクションが等しく扱われるようになった。 同時に、概念的なスタンスは維持した。21世紀は「完結した歴史的時代」ではなく「進行中のプロセス」だという認識だ。これはコンテンツの書き方（現在形の使用、暫定的な評価など）に反映されている。 視覚的な改善として、年代見出しに軽い背景色を付けることも検討している。ただし、これはデザインの方向性を先に決める必要がある。選択肢は3つだ： この選択は、サイト全体のデザイン言語に影響するため、慎重に決定する必要がある。現時点では、シンプルな構造の整理だけを実施し、視覚的な装飾は保留としている。
辞書サイト（itako-dict）と言語学ポータル（linguistics）で、スマートフォンでの表示が崩れているという報告を受けた。3カラムレイアウト（左サイドバー、メインコンテンツ、右サイドバー）が横並びのままで、メインコンテンツが押し潰されて読めない状態だった。 原因を調査したところ、共有CSSファイル（/shared-assets/css/dict-style.css）にモバイル用のメディアクエリが完全に欠けていることが判明した。デスクトップ版のCSSしか定義されていなかったため、小さな画面でも3カラムレイアウトが維持されていた。 解決策は、適切なメディアクエリを追加することだった。画面幅780px以下の場合、レイアウトをdisplay: flexとflex-direction: columnで縦積みに変更する。さらに、表示順序も調整する必要があった。モバイルでは、メインコンテンツ→左サイドバー→右サイドバーの順が最も読みやすい。 この修正を共有CSSファイルに適用したことで、itako-dictとlinguisticsの両サイトが同時に修正された。これが共有アセットアーキテクチャの利点だ。 さらに、両サイトのfunctions.phpでCSSのバージョン番号を’2.4’から’2.5’に更新した。これにより、ユーザーのブラウザキャッシュが強制的にクリアされ、新しいCSSが確実に読み込まれる。 現在、両サイトはすべてのデバイスサイズで正しく表示される。デスクトップでは3カラムレイアウト、タブレットでは2カラム、スマートフォンでは1カラムと、画面サイズに応じて適切にレイアウトが変化する。モバイルUXが大幅に改善された。
小説翻訳サイト（Khokh Sudar）で、ヘッダーが上部に固定されない問題が発生した。position: stickyを指定していたにもかかわらず、スクロールしてもヘッダーが画面上部に留まらなかった。 デバッグの結果、CSSセレクターの衝突が原因だと判明した。テーマのCSSには.pageというクラスのスタイルが定義されていたが、WordPressの静的ページでは<body>タグに自動的に.pageクラスが付与される。このため、ページ全体のレイアウトが意図しない形で変更されていた。 問題のあったCSS： このスタイルが<body class=”page”>に適用されると、position: stickyの親要素がflexboxコンテナになってしまう。position: stickyは特定の条件下でしか機能せず、親要素のレイアウトモデルによっては動作しない。 解決策は、セレクターをより具体的にすることだった。.pageの代わりに#main-contentというユニークなIDを使用し、そのIDを持つ要素にのみレイアウトスタイルを適用する。 これにより、<body>タグのスタイルが変更されることなく、意図した要素にのみレイアウトが適用される。 副次的な問題も修正した。functions.phpでJavaScriptファイルを読み込む際、静的サイト用のanagura-nav.jsを指定していたが、WordPressサイトではanagura-wp-nav.jsを使う必要があった。この間違いにより、モバイルメニューが機能していなかった。 タイポグラフィも調整した。メインのフォントサイズは読みやすさのため16pxに戻し、フッターのみ14pxの小さいフォントを使用する。これにより、視覚的な階層が明確になった。 現在、Khokh Sudarサイトはすべてのデバイスで正しく動作している。ヘッダーは画面上部に固定され、モバイルメニューも機能し、フォントサイズも適切だ。