WordPressのテンプレートをCocoonからSWELLに切り替えることを検討している人のために、Cocoonで書いた記事のスタイル(ボックスなど)が、SWELLに切り替えた時にどのように表示されるのか検証してみました。
Cocoonのボックスというのは、↓こういうやつですね。

ちなみに、なにも考えずにテンプレートをCocoonからSWELLに切り替えると、今まで書いてきたCocoonのボックスなどはSWELLではすべて消えてしまうので、注意してください。
理由は、Cocoonの機能を使って書いたものはSWELLでは表示することができないためです。(Cocoonの独自機能を使って書いているので当然ですね)
実は、CocoonからSWELLに移行する人のために、移行用のプラグインがSWELLの開発者から提供されています。
このプラグインとSWELLを組み合わせれば、一部を除いてCocoonで書いたものがほぼそのまま表示されるようになります。
この記事では、Cocoonで書いた時のスタイル(ボックスなど)、SWELL+移行プラグインでのスタイル、SWELLのみのスタイルの3パターンで、どのようなスタイルになるのかをイメージ画像付きで解説します。
SWELLへの移行を検討している人は、ぜひ参考にしてください!
検証用のCocoonのスタイル
ここで記載するスタイルのイメージは、Cocoonの以下のスタイル(インライン~囲みブログカード)となっています。

Cocoon→SWELL移行した時のボックスなどの表示
これ以降はわかりやすく、以下の3つの表示を横に並べています。
①Cocoonでの表示
②SWELL+移行プラグイン
③SWELL
冒頭でも書きましたが、移行プラグインを使うと、Cocoonで書いたものがほぼSWELLでも表示されるようになりますが、それでも一部のスタイルは表示されません。
この場合は、SWELL用に修正する必要がありますので、注意してください。(SWELLで表示されなくもて構わない場合は修正不要です)
Cocoon→SWELL移行での[スタイル」→「インライン」の表示
まずは、アンダーラインや太字など、文字に修飾をする「インライン」の表示です。
いきなりですが、残念なことに、②のSWELL+移行プラグインの組み合わせでも、赤アンダーライン、打ち消し線、キーボードのみがCocoonと同じ表示になります。
このインラインを使っている人は多いと思いますが、これらはSWELLでの修飾をやり直すしかありません。

Cocoon→SWELL移行での[スタイル」→「マーカー」の表示
「マーカー」です。
こちらは、黄色/赤色/青色マーカーがCocoonと違う表示となります。

Cocoon→SWELL移行での[スタイル」→「フォントサイズ」の表示
フォントサイズは、問題なく表示できています(CocoonとSWELLではフォントが違う関係でサイズが異なるように見えます)


Cocoon→SWELL移行での[スタイル」→「ボックス(アイコン)」の表示
よく使われる「ボックス(アイコン)」です。
これは、移行プラグインを使うと、ほぼ同じように表示されます。


Cocoon→SWELL移行での[スタイル」→「ボックス(案内)」の表示
ボックス(案内)も、ほぼ完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「ボックス(白抜き)」の表示
ボックス(白抜き)も、問題なく表示できています。

Cocoon→SWELL移行での[スタイル」→「ボックス(タブ)」の表示
こちらもよく使われる「ボックス(タブ)」ですが、表示は完璧です。

ボックス(タブ)には、この「CHECK」以外にも、「COMMENT」、「POINTO」、「TIPS」など、まだまだありますが、同じように完璧に表示されるため、ここでは割愛します。
Cocoon→SWELL移行での[スタイル」→「ボックス(付箋数)」の表示
ボックス(付箋風)も、完璧な表示です。

Cocoon→SWELL移行での[スタイル」→「バッジ」の表示
バッジも、色味が微妙にちがうものがありますが、完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(テキスト上、左側/中央/右側)」の表示
上に表示させるテキストのマイクロコピーで、それぞれ左側、中央、右側での表示です。
移行プラグインでも、なぜボタンの下に潜り込んでいます。
ボタンだからこうなっているのか、そもそも表示がおかしいのかはわかりませんが、マイクロコピーはSWELLでの要修正項目です。

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(テキスト下、左側/中央/右側)」の表示
さきほどと同じテキストでのマイクロコピーで、こちらは下の方に表示されるものですが、テキスト上と比較して、こちらはほぼ完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(吹き出し上、左側/中央/右側)」の表示
こちらのマイクロコピーは、テキストではなく「吹き出し」です。
テキスト上と同じように、ボタンの下にちょっと潜っているので、これもSWELLでは要修正項目です。

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(吹き出し下、左側/中央/右側)」の表示
「吹き出し」が下のマイクロコピーです。
こちらは完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「ボタン」の表示
続いては、ボタンです。
色味がちょっと違いますが、こちらも完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「ボタン」の表示(レッド~ティール)
各ボタンの色は、SWELLではこのように表示されます(ディープ・パープルが結構色味が違っています)

Cocoon→SWELL移行での[スタイル」→「ボタン」の表示(グリーン~グレー)
グリーン~グレーまでのボタンです。

Cocoon→SWELL移行での[スタイル」→「囲みブログカード」の表示
ブログカードも結構使うと思いますが、CocoonとSWELLでは表示が異なります。
まず、ボックスの枠とかぱっと見のイメージが違います。
Cocoonでは、ブログカードのラベルが「関連記事」、「参考記事」、「参考リンク」、「人気記事」、「あわせて読みたい」、「詳細はこちら」、「チェック」、「ピックアップ」、「公式サイト」、「ダウンロード」とかなりバリエーションに飛んでいました。
しかし、SWELLの内部のブログカードのラベルは、すべて「あわせて読みたい」になります。
このへんは、SWELLの仕様なので、これ以上の修正がしようがありません。
素直に、SWELLのブログカードを使いましょう。

以上、Cocoonで書いたスタイルが、SWELL+移行プラグイン、SWELLのみで、どのように表示されるかかがわかったかと思います。
移行プラグインを有効な状態にしていれば、だいたいはCocoonでの表示がそのまま再現されます。(一部除く)
SWELLへの移行は、移行プラグインを有効化していれば、SWELLでのいくつかの修正を除けば、ほぼ完了です。
ただし、開発者の方も公式サイトで書いているように、ページを表示するたびに「移行プラグイン」で、Cocoon用に表示させるための処理が実行させるので、移行プラグインがない状態と比べて重くなります。
なので、最終的には移行プラグインがない状態でもCocoonと同じ表示をさせるために、地道にSWELLで修正をしていく必要があります。
記事が多ければ多くなるほど、その手間はかかるので、SWELLへ移行する際は、この点気をつけてください!