CocoonからSWELLに移行するとボックスなどの表示はどうなる?

CocoonからSWELLに移行するとボックスなどの表示はどうなる?

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

Cocoonのボックスというのは、↓こういうやつですね。

Cocoonのボックス(タブ)

ちなみに、なにも考えずにテンプレートをCocoonからSWELLに切り替えると、今まで書いてきたCocoonのボックスなどはSWELLではすべて消えてしまうので、注意してください。

理由は、Cocoonの機能を使って書いたものはSWELLでは表示することができないためです。(Cocoonの独自機能を使って書いているので当然ですね)

実は、CocoonからSWELLに移行する人のために、移行用のプラグインがSWELLの開発者から提供されています。

このプラグインとSWELLを組み合わせれば、一部を除いてCocoonで書いたものがほぼそのまま表示されるようになります。

この記事では、Cocoonで書いた時のスタイル(ボックスなど)、SWELL+移行プラグインでのスタイル、SWELLのみのスタイルの3パターンで、どのようなスタイルになるのかをイメージ画像付きで解説します。

SWELLへの移行を検討している人は、ぜひ参考にしてください!

目次

検証用のCocoonのスタイル

ここで記載するスタイルのイメージは、Cocoonの以下のスタイル(インライン~囲みブログカード)となっています。

Cocoonのスタイル

Cocoon→SWELL移行した時のボックスなどの表示

これ以降はわかりやすく、以下の3つの表示を横に並べています。

①Cocoonでの表示
②SWELL+移行プラグイン
③SWELL

冒頭でも書きましたが、移行プラグインを使うと、Cocoonで書いたものがほぼSWELLでも表示されるようになりますが、それでも一部のスタイルは表示されません。

この場合は、SWELL用に修正する必要がありますので、注意してください。(SWELLで表示されなくもて構わない場合は修正不要です)

Cocoon→SWELL移行での[スタイル」→「インライン」の表示

まずは、アンダーラインや太字など、文字に修飾をする「インライン」の表示です。

いきなりですが、残念なことに、②のSWELL+移行プラグインの組み合わせでも、赤アンダーライン、打ち消し線、キーボードのみがCocoonと同じ表示になります。

このインラインを使っている人は多いと思いますが、これらはSWELLでの修飾をやり直すしかありません。

Cocoon→SWELL移行での[スタイル」→「インライン」

Cocoon→SWELL移行での[スタイル」→「マーカー」の表示

「マーカー」です。

こちらは、黄色/赤色/青色マーカーがCocoonと違う表示となります。

Cocoon→SWELL移行での[スタイル」→「マーカー」

Cocoon→SWELL移行での[スタイル」→「フォントサイズ」の表示

フォントサイズは、問題なく表示できています(CocoonとSWELLではフォントが違う関係でサイズが異なるように見えます)

Cocoon→SWELL移行での[スタイル」→「フォントサイズ」
Cocoon→SWELL移行での[スタイル」→「フォントサイズ」

Cocoon→SWELL移行での[スタイル」→「ボックス(アイコン)」の表示

よく使われる「ボックス(アイコン)」です。

これは、移行プラグインを使うと、ほぼ同じように表示されます。

Cocoon→SWELL移行での[スタイル」→「ボックス(アイコン)」
Cocoon→SWELL移行での[スタイル」→「ボックス(アイコン)」

Cocoon→SWELL移行での[スタイル」→「ボックス(案内)」の表示

ボックス(案内)も、ほぼ完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「ボックス(案内)」

Cocoon→SWELL移行での[スタイル」→「ボックス(白抜き)」の表示

ボックス(白抜き)も、問題なく表示できています。

Cocoon→SWELL移行での[スタイル」→「ボックス(白抜き)」

Cocoon→SWELL移行での[スタイル」→「ボックス(タブ)」の表示

こちらもよく使われる「ボックス(タブ)」ですが、表示は完璧です。

Cocoon→SWELL移行での[スタイル」→「ボックス(タブ)」

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

Cocoon→SWELL移行での[スタイル」→「ボックス(付箋数)」の表示

ボックス(付箋風)も、完璧な表示です。

Cocoon→SWELL移行での[スタイル」→「ボックス(付箋数)」

Cocoon→SWELL移行での[スタイル」→「バッジ」の表示

バッジも、色味が微妙にちがうものがありますが、完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「バッジ」

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(テキスト上、左側/中央/右側)」の表示

上に表示させるテキストのマイクロコピーで、それぞれ左側、中央、右側での表示です。

移行プラグインでも、なぜボタンの下に潜り込んでいます。

ボタンだからこうなっているのか、そもそも表示がおかしいのかはわかりませんが、マイクロコピーはSWELLでの要修正項目です。

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(テキスト上、左側/中央/右側)」

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(テキスト下、左側/中央/右側)」の表示

さきほどと同じテキストでのマイクロコピーで、こちらは下の方に表示されるものですが、テキスト上と比較して、こちらはほぼ完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(テキスト下、左側/中央/右側)」

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(吹き出し上、左側/中央/右側)」の表示

こちらのマイクロコピーは、テキストではなく「吹き出し」です。

テキスト上と同じように、ボタンの下にちょっと潜っているので、これもSWELLでは要修正項目です。

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(吹き出し上、左側/中央/右側)」の表示

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(吹き出し下、左側/中央/右側)」の表示

「吹き出し」が下のマイクロコピーです。

こちらは完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「マイクロコピー(吹き出し下、左側/中央/右側)」

Cocoon→SWELL移行での[スタイル」→「ボタン」の表示

続いては、ボタンです。

色味がちょっと違いますが、こちらも完璧に表示されています。

Cocoon→SWELL移行での[スタイル」→「ボタン」

Cocoon→SWELL移行での[スタイル」→「ボタン」の表示(レッド~ティール)

各ボタンの色は、SWELLではこのように表示されます(ディープ・パープルが結構色味が違っています)

Cocoon→SWELL移行での[スタイル」→「ボタン」の表示(レッド~ティール)

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

グリーン~グレーまでのボタンです。

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

Cocoon→SWELL移行での[スタイル」→「囲みブログカード」の表示

ブログカードも結構使うと思いますが、CocoonとSWELLでは表示が異なります。

まず、ボックスの枠とかぱっと見のイメージが違います。

Cocoonでは、ブログカードのラベルが「関連記事」、「参考記事」、「参考リンク」、「人気記事」、「あわせて読みたい」、「詳細はこちら」、「チェック」、「ピックアップ」、「公式サイト」、「ダウンロード」とかなりバリエーションに飛んでいました。

しかし、SWELLの内部のブログカードのラベルは、すべて「あわせて読みたい」になります。

このへんは、SWELLの仕様なので、これ以上の修正がしようがありません。

素直に、SWELLのブログカードを使いましょう。

Cocoon→SWELL移行での[スタイル」→「囲みブログカード」

以上、Cocoonで書いたスタイルが、SWELL+移行プラグイン、SWELLのみで、どのように表示されるかかがわかったかと思います。

移行プラグインを有効な状態にしていれば、だいたいはCocoonでの表示がそのまま再現されます。(一部除く)

SWELLへの移行は、移行プラグインを有効化していれば、SWELLでのいくつかの修正を除けば、ほぼ完了です。

ただし、開発者の方も公式サイトで書いているように、ページを表示するたびに「移行プラグイン」で、Cocoon用に表示させるための処理が実行させるので、移行プラグインがない状態と比べて重くなります。

なので、最終的には移行プラグインがない状態でもCocoonと同じ表示をさせるために、地道にSWELLで修正をしていく必要があります。

記事が多ければ多くなるほど、その手間はかかるので、SWELLへ移行する際は、この点気をつけてください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次