【執筆時の環境】
賢威8 バージョン: 8.0.1.12
SYNバージョン：0.2.0
ワードプレス バージョン ：6.9
WordPressテーマを「賢威8」から「SYN（シン）」へ変更した際、避けて通れないのがデザインの崩れです。その一つに賢威8で多用していた「装飾ボックス」があります。
これがSYNにテーマを変えると、スタイルシートやショートコードの仕様が異なるため、ただのテキストだけの表示になってしまいます。
この記事では、私が実際に行った「一時的な応急処置」と「最終的な解決策」を解説します。
なぜ表示が崩れるのか？（コードの比較）
賢威8とSYNでは、ボックスを構成するHTMLコード（クラス名）が全く異なります。
■ 賢威8のコード: divタグを多用した複雑な構造
<div class="box_style box_style_blue">
<div class="box_inner">
<div class="box_style_title"><span class="box_style_title_inner">タイトル</span></div>
<p><span>テキスト</span></p>
</div>
</div>■SYNのコード: dl（定義リスト）タグを使用したシンプルな構造
<dl class="synx-block-dl is-style-outline is-color03">
<dt class="synx-block-dl__dt">タイトル</dt>
<dd class="synx-block-dl__dd">テキスト</dd>
</dl>
このように記述ルールが違うため、賢威8のコードをSYNが読み取っても「装飾ルール（CSS）」が見つからず、デザインが適用されないのです。
【応急処置】賢威8のデザインをSYNに移植する
記事数が多い場合、すべてのボックスをすぐに書き換えるのは困難です。そこで私は、「賢威8のボックスデザインだけをSYNに持ってくるという方法を試しました。
手順
(1) 賢威8の base.css から、装飾ボックスに関する記述をコピー。
(2) CSSのフォントサイズを変更
このままではSYNで表示するとフォントが大きくなってしまいます。
そのため、コピーしたCSS内の全てのフォント指定を変更しました
font-size: 1.8rem; を font-size: 1.4rem;
font-size: 1.4rem; を font-size: 1.2rem;(3) そして、コピーしてフォントサイズを変更したCSSを、SYNの [外観] ＞ [カスタマイズ] ＞ [追加CSS]（またはカスタムCSS設定）に貼り付け。
- この方法のメリット:
-
過去記事の表示が一瞬で元に戻る。
SYN標準のボックスと併用することで、デザインのバリエーションが増える。
とりあえず、これで応急処置としました。
【最終的な解決策】手動でSYNのコードへ書き換え
とりあえず、応急処置でも表示は維持できましたが、私は最終的にすべてのコードをSYN標準のものへ書き換えることにしました。
- なぜ「追加CSS」のままにしなかったのか？
-
まず、思ったのは
①「コードの肥大化」
カスタムCSSが増えると、サイトの読み込み速度に影響するのではないか？ということ②「管理の複雑化」 将来的にSYNをアップデートした際、古いコードが干渉するリスクを避けたかった。
ということです。
そのようなことで、全てSYNのボックスに書き換えることにしました
移行のステップ
まず、プラグイン『Search Regex』を使い、サイト内にどれだけ賢威8のボックスコードが残っているか検索。
ヒットした件数を確認すると、このサイトには32件ありました
「この件数なら手動で行ける」と判断し、一つずつSYNのボックスブロックへ差し替えました
補足
