【アップデート情報】賢威8 のボックス装飾を SYN オウンドで復活させる「賢威ボックス互換レイヤー」を GTI 賢威-SYN 管理ツールに追加しました！ Ver.1.5.0

賢威8 を長年使ってきたサイトを SYN オウンドに移行すると、
古い記事のボックス装飾（.box_style_blue など）が全部プレーンな div に戻ってしまう
という現象に多くの人がぶつかります。

賢威時代の記事には、こんな HTML が大量に残っています。

<div class="box_style box_style_blue">
   …
</div>

SYN オウンドにはこのクラスのスタイルが存在しないため、
背景色も枠線も吹き飛ぶ＝すべて味気ないボックスになる という問題が発生します。

目次[閉じる]

1そこで今回、「賢威ボックス互換レイヤー」機能を作りました
2⚠ 制限事項（必読）
3🔧 使い方まとめ
4デモ
- 4.1 実際に使っている記事
5📁 ダウンロード
- 5.1GTI 賢威-SYN 管理ツール（PV統合プラグ・TOC自動追加等補助プラグイン）
6⚠️ 注意
7📝 さいごに

そこで今回、「賢威ボックス互換レイヤー」機能を作りました

gti-keni-tools に “既存の賢威ボックスを SYN 風に再デザインして復元する機能” を追加しました。

特徴は下記の通りです。

✔ 特徴1：既存 HTML をそのままに、SYN っぽいボックスデザインに変換

記事本文の HTML を一切触らず、
.box_style .box_style_blue などの古いクラスを そのまま SYN 寄りの装飾で復活 させます。

例えば、青ボックスはこんな感じで表示されます：

SYN 風の淡いグラデーション背景
はっきりした境界線
pill 型のタイトルラベル
過去の賢威記事とも馴染みやすい雰囲気

記事側に手を加える必要はゼロです。

✔ 特徴2：ブロックエディタ用パターンも自動生成

賢威時代はショートコードや特殊ブロックを使っていましたが、
今回は Gutenbergで使える正式なブロックパターンを提供 しています。

エディタ側で「賢威ボックス（青）」「賢威ボックス（緑）」などを
そのまま選んで使えるようになります。

もちろん、出力される HTML は賢威時代と同じ：

<div class="box_style box_style_blue">…</div>

昔の記事との統一感が保てるのもポイント。

✔ 特徴3：子テーマ・親テーマで CSS を簡単に上書き可能

CSS の読み込みは次の優先順位になっています。

子テーマ /gti-keni-tools/box-style-compat.css
親テーマ /gti-keni-tools/box-style-compat.css
プラグイン内のデフォルトCSS

カラーバリエーションを増やしたい場合や、
色味・枠線をサイトカラーに寄せたい場合は
子テーマに CSS を置くだけで即反映されます。

テーマ更新にも強い構造です。

✔ 特徴4：ON/OFF 切り替え機能つき

gti-keni-tools の管理画面から、

賢威ボックス互換レイヤー：ON / OFF

をワンクリックで切り替えられます。

移行直後の調整中にも便利です。

⚠ 制限事項（必読）

Gutenberg の「カスタムHTML」ブロックのプレビューには CSS が反映されません。

これは WordPress 本体の仕様で、
プレビュー表示が「安全な iframe」でレンダリングされるため、
テーマやプラグインの CSS が読み込まれないからです。

実際の見た目は、

投稿のプレビュー（別タブ）
公開ページ

で正しく確認できます。

エディタ本体では正しく反映されるのでご安心ください。

🔧 使い方まとめ

gti-keni-tools をアップデート（または最新版を導入）
管理画面 → 賢威BOX互換レイヤー → ON にする
記事を表示するだけで、古い .box_style ボックスが SYN 風デザインに復活
デザイン調整したい場合は
子テーマに /gti-keni-tools/box-style-compat.css を配置

「賢威ボックス互換レイヤーを有効にする」にチェックを入れてください。

デモ

ボックス（青）

これは .box_style .box_style_blue のテスト表示です。

ボックス（緑）

これは .box_style .box_style_green のテスト表示です。

ボックス（オレンジ）

これは .box_style .box_style_orange のテスト表示です。

ボックス（赤）

これは .box_style .box_style_red のテスト表示です。

ボックス（ピンク）

これは .box_style .box_style_pink のテスト表示です。

ボックス（黄）

これは .box_style .box_style_yellow のテスト表示です。

ボックス（グレー）

これは .box_style .box_style_gray のテスト表示です。

こんな感じに見えます！

実際に使っている記事

やっぱり Stripe が安心

今年 2020年は Stripe を使う案件が少なかった…。決済サービス自体に触れていないというわけではない。決済サービスを指定されるケースが多く、その度に「･･･

フリーフードファイター兼SE社長活動日記 | 株式会社ジーティーアイ

他社から Stripe にして PayPay も導入出来て喜ばれた話

ここんとこ Stripe 使っていないな～と思っていた2024年6月某日、他社（Stripeではない会社）決済の導入を依頼されました。その「他社」の導入を進め･･･

フリーフードファイター兼SE社長活動日記 | 株式会社ジーティーアイ

ひとり会社で郵便の不在票を持っていくときの確認書類

タイトルながっ！…どういうことかというとこんなことがありました月曜日の朝、事務所に行くと不在票が入っていました。郵便局からのもの。不在時の郵便物を受け取ってくだ･･･

フリーフードファイター兼SE社長活動日記 | 株式会社ジーティーアイ

📁 ダウンロード

最新版はこちらから取得できます：

🔽 v1.5.0 リリースノート
https://github.com/taman777/gti-keni-tools/releases/tag/v1.5.0

📦 GTI 賢威-SYN 管理ツール v1.5.0

GTI 賢威-SYN 管理ツール（PV統合プラグ・TOC自動追加等補助プラグイン）

1 ファイル 169.04 KB

ダウンロード

バージョン：1.5.0 ／更新日：2025-12-07 ※今後アップデートした際は上記ダウンロードリンクの表記が変更されていることがあります。

🔽 GitHub
https://github.com/taman777/gti-keni-tools

⚠️ 注意

⚠️ 免責およびお願い

本ツールは「賢威8 → SYN」移行時のお困りごとの解決を目的として、
株式会社ジーティーアイ（GTI）が独自に開発・公開しているものです。

オープン配布のため、動作保証・個別サポート・苦情対応は一切行いません。
ご利用は自己責任でお願いいたします。

また、本プラグインに関する質問・問い合わせを賢威（Web Rider）公式フォーラムへ投稿しないでください。
本ツールは賢威・SYN公式サポート対象外の非公式ツールです。

ご自身のサイトでの運用テスト・バックアップを行ったうえでご利用ください。

特に今回の機能に関しては独自の設計になっており、SYN および賢威にもない機能（形は似てますが）になっております。
楽しく利用して、気に入らなかったら使わないだけ！徹底してください。

📝 さいごに

賢威8 → SYN OWND への移行では、
ショートコードや旧ブロックの互換性問題がもっとも大変 だと感じています。

今回作った「賢威ボックス互換レイヤー」は、
これまでの膨大な記事資産を壊さずに活かしつつ、
新しい SYN テーマで統一感あるデザインを維持するための補助レイヤーです。

今後も移行時に必要になりそうな機能を順次追加していく予定です。
なにか「この互換ほしい」という要望があればぜひ教えてください！

この記事を書いた人

さとーさん

WordPressのカスタマイズや PHP, Python その他各種開発言語でゴニョゴニョしながら Stripe で決済させるお仕事をしています。
必殺！システム屋のさとーさんシステム開発も得意だよ。（本業はそっち）
所属: 株式会社ジーティーアイ
代表取締役アルバイト佐藤毅（さとうたけし）
Twitter: ウェブ屋のさとーさん