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へ移行する際は、この点気をつけてください！