SWELLのテーマ乗り換えサポートプラグインの凄さを画像付きで紹介!
![SWELLのテーマ乗り換えプラグインが凄い!装飾が崩れない!Cocoonを例に紹介!](https://webnote-plus.com/wp-content/uploads/2021/08/swell-support-plugin.png)
WordPressテーマ「SWELL」にはテーマの乗り換えをサポートしてくれるプラグインがあります。
他テーマからSWELLに移行する時の負担を軽減してくれるとても素敵なプラグインです。
本来、テーマの変更はとても大変ですが、このサポートプラグインを使うことで余裕をもったテーマ変更ができるようになります。
SWELLへの乗り換えを検討している方の背中を押してくれるプラグインだと思います。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
記事内では、実際のプラグインを使った効果も画像付きで解説します…!
テーマ移行の全体の流れ、注意点などは以下の記事で詳しく解説しました。
![](https://webnote-plus.com/wp-content/uploads/2021/11/from-cocoon-to-swell.png)
![](https://webnote-plus.com/wp-content/uploads/2021/11/from-cocoon-to-swell.png)
Cocoonからの移行手順をまとめていますが、大まかな移行の手順はどのテーマでも同じです。
SWELLのテーマ乗り換えサポートプラグインとは?
SWELLテーマ乗り換えサポートプラグインは、旧テーマのデザインをある程度維持したままSWELLを使うことができるようになるプラグインです。
以下、公式サイトでも詳しく説明されているので見てみてください。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
これは本当にありがたく素晴らしいプラグインです…!
現状、以下のテーマからの乗り換えプラグインが用意されています。
- Cocoon
- JIN
- SANGO
- STORK
- THE THOR
- AFFINGER5
テーマを変更する際、通常は旧テーマの装飾やデザインを引き継ぐことができません。
そのため、テーマ移行直後は装飾が無く読みにくい記事になってしまうことがあるので、大急ぎでリライトする必要があります。
実際にCocoonからSWELLにテーマを乗り換えた動画を撮ってみたので見てみてください。
動画では以下の順でテーマやプラグインを切り替えています。
- Cocoon
- SWELL(プラグイン未使用状態)
- SWELL(プラグインを使用)
乗り換えサポートプラグインを使用しないと、全ての装飾が消えてしまっています。
一方で、乗り換えサポートプラグインを有効化すると、Cocoonのデザインが引き継がれているのが分かると思います。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
これが乗り換えサポートプラグインの威力です…!
ひとつだけ覚えておいていただきたいことは、本来テーマの乗り換えはもの凄く大変な作業だということです。これは全てのテーマに当てはまります。
その中でSWELLは、乗り換えサポートプラグインがあることでかなり負担を減らすことができます。
![](https://webnote-plus.com/wp-content/uploads/2021/07/satoshin_cry.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/07/satoshin_cry.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/07/satoshin_cry.jpg)
これは本当にすごいことですよ…!
サポートプラグインの使い方
まず、テーマ乗り換えサポートプラグインの使い方をご紹介しておきます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
といっても、単純にプラグインを有効化するだけなのでとても簡単です…!
SWELLの購入がまだの方は、以下ダウンロードページから処理を進めましょう。
\ DLページに飛びます! /
SWELL購入の詳しい流れは以下リンク先でも説明しています。
![](https://webnote-plus.com/wp-content/uploads/2021/12/swell-install.png)
![](https://webnote-plus.com/wp-content/uploads/2021/12/swell-install.png)
SWELLの導入が完了している方は、以下の手順でプラグインのダウンロードから有効化まで進めていきましょう。
ログインしていない場合は、ログインしてください。
\ ここからDLできます! /
![SWELLのサポートプラグインダウンロード方法-1](https://webnote-plus.com/wp-content/uploads/2021/08/swell-support-plugin-download-1.jpg)
![SWELLのサポートプラグインダウンロード方法-1](https://webnote-plus.com/wp-content/uploads/2021/08/swell-support-plugin-download-1.jpg)
zipファイルがダウンロードされます。
![他テーマからSWELLへの移行-2](https://webnote-plus.com/wp-content/uploads/2021/05/2021-05-13_06h04_31.jpg)
![他テーマからSWELLへの移行-2](https://webnote-plus.com/wp-content/uploads/2021/05/2021-05-13_06h04_31.jpg)
![Cocoonからの乗り換え用サポートプラグインのインストール-0](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-06_23h37_18.jpg)
![Cocoonからの乗り換え用サポートプラグインのインストール-0](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-06_23h37_18.jpg)
![Cocoonからの乗り換え用サポートプラグインのインストール-1](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-06_23h15_10.jpg)
![Cocoonからの乗り換え用サポートプラグインのインストール-1](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-06_23h15_10.jpg)
![Cocoonからの乗り換え用サポートプラグインのインストール-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-06_23h30_55.jpg)
![Cocoonからの乗り換え用サポートプラグインのインストール-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-06_23h30_55.jpg)
この手順が完了した後にSWELLを有効化しましょう。
これで旧テーマのデザインをある程度維持したまま、SWELLにテーマを乗り換えることができます。
乗り換えサポートプラグインの効果をCocoonを例に紹介!
実際にサポートプラグインを使用すると、旧テーマのデザインがどのように表示されるか、無料テーマ「Cocoon」を例に画像付きで紹介していきます。
CocoonからSWELLへの移行サポートプラグインは以下の公式マニュアルに詳しい説明があります。
全く崩れないものと、少し崩れるもの、それぞれが分かればSWELL移行後にリライトする優先順位を付けることができます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
ぜひ参考にしてください…!
- WordPress:バージョン5.8
- Cocoon:バージョン2.3.4
- Cocoon Child:バージョン1.1.3
- SWELL:バージョン2.4.1.1
- 【SWELL】乗り換えサポート from Cocoon:バージョン1.1.2
※全て、2021年8/18時点の最新バージョン
僕の環境では、以下のコンテンツの装飾が一部崩れました。
- 文字色、太字
- 見出しボックス
- タブ見出しボックス
- ラベルボックス
- ふきだし
- Cocoonボタン
- 囲みボタン
- 人気記事一覧
- ナビカード一覧
- プロフィールボックス
- ページ読み込み時の日付
- Amazonリンク
- 楽天リンク
- FAQ(寄付特典)
- HTML挿入ボタン(寄付特典)
- 更新日ショートコード(寄付特典)
リライトが必須なもの、気になるならリライトした方が良いものと、コンテンツの状態は様々なのでご自身の環境で一度確認をしてリライトするかどうか判断してもらえれば良いかなと思います。
文字装飾系のコンテンツ
まずは、文字装飾系のコンテンツから見ていきましょう。
文字色+太字
Cocoon
![文字色+太字装飾-1](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h03_13.jpg)
![文字色+太字装飾-1](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h03_13.jpg)
SWELL移行後
![文字色+太字装飾-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h03_18.jpg)
![文字色+太字装飾-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h03_18.jpg)
テキストの文字色と太字の装飾はデザインが維持されません。 キーボードキーの装飾のみ装飾が引き継がれました。
ちなみに上記はブロックツールバーの「A」タブから設定した装飾です。
![文字色+太字装飾-3](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-12_00h30_03.jpg)
![文字色+太字装飾-3](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-12_00h30_03.jpg)
マーカー
Cocoon
![Cocoonのマーカー](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h03_41.jpg)
![Cocoonのマーカー](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h03_41.jpg)
SWELL移行後
![SWELL移行後のマーカー](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h03_44.jpg)
![SWELL移行後のマーカー](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h03_44.jpg)
バッジ
Cocoon
![Cocoonのバッジ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h04_01.jpg)
![Cocoonのバッジ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h04_01.jpg)
SWELL移行後
![SWELL移行後のバッジ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h04_05.jpg)
![SWELL移行後のバッジ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h04_05.jpg)
フォントサイズ
Cocoon
![Cocoonのフォントサイズ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h04_59.jpg)
![Cocoonのフォントサイズ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h04_59.jpg)
SWELL移行後
![SWELL移行後のフォントサイズ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h05_04.jpg)
![SWELL移行後のフォントサイズ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h05_04.jpg)
ショートコード
新着記事一覧
Cocoon
![Cocoonの新着記事一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h05_50.jpg)
![Cocoonの新着記事一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h05_50.jpg)
SWELL移行後
![SWELL移行後の新着記事一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h06_41.jpg)
![SWELL移行後の新着記事一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h06_41.jpg)
人気記事一覧
Cocoon
![Cocoonの人気記事一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h06_00.jpg)
![Cocoonの人気記事一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h06_00.jpg)
SWELL移行後
![SWELL移行後の人気記事一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h06_57.jpg)
![SWELL移行後の人気記事一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h06_57.jpg)
ナビカード一覧
Cocoon
![Cocoonのナビカード一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h07_22.jpg)
![Cocoonのナビカード一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h07_22.jpg)
SWELL移行後
![SWELL移行後のナビカード一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h07_39.jpg)
![SWELL移行後のナビカード一覧](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h07_39.jpg)
プロフィールボックス
Cocoon
![Cocoonのプロフィールボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h08_12.jpg)
![Cocoonのプロフィールボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h08_12.jpg)
SWELL移行後
![SWELL移行後のプロフィールボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h08_26.jpg)
![SWELL移行後のプロフィールボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h08_26.jpg)
過去日時&過去日時(年)
Cocoon
![Cocoonの過去日時](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h08_58.jpg)
![Cocoonの過去日時](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h08_58.jpg)
![Cocoonの過去日時(年)](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h09_32.jpg)
![Cocoonの過去日時(年)](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h09_32.jpg)
SWELL移行後
![SWELL移行後の過去日時](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h09_03.jpg)
![SWELL移行後の過去日時](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h09_03.jpg)
![SWELL移行後の過去日時](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h09_36.jpg)
![SWELL移行後の過去日時](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h09_36.jpg)
ページ読み込み時の日付
Cocoon
![Cocoonのページ読み込み時の日付](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h10_09.jpg)
![Cocoonのページ読み込み時の日付](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h10_09.jpg)
SWELL移行後
![SWELL移行後のページ読み込み時の日付](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h10_12.jpg)
![SWELL移行後のページ読み込み時の日付](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h10_12.jpg)
カウントダウン
Cocoon
![Cocoonのカウントダウン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h10_38.jpg)
![Cocoonのカウントダウン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h10_38.jpg)
SWELL移行後
![SWELL移行後のカウントダウン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h10_42.jpg)
![SWELL移行後のカウントダウン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h10_42.jpg)
評価スター
Cocoon
![Cocoonの評価スター](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h11_06.jpg)
![Cocoonの評価スター](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h11_06.jpg)
SWELL移行後
![SWELL移行後の評価スター](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h11_09.jpg)
![SWELL移行後の評価スター](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h11_09.jpg)
ログインコンテンツ
Cocoon
![Cocoonのログインコンテンツ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h11_34.jpg)
![Cocoonのログインコンテンツ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h11_34.jpg)
SWELL移行後
![SWELL移行後のログインコンテンツ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h11_37.jpg)
![SWELL移行後のログインコンテンツ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h11_37.jpg)
テンプレート
Cocoon
![Cocoonのテンプレート](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h12_51.jpg)
![Cocoonのテンプレート](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h12_51.jpg)
SWELL移行後
![SWELL移行後のテンプレート](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h12_55.jpg)
![SWELL移行後のテンプレート](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h12_55.jpg)
アフィリエイトタグ
Cocoon
![Cocoonのアフィリエイトタグ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h13_42.jpg)
![Cocoonのアフィリエイトタグ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h13_42.jpg)
SWELL移行後
![SWELL移行後のアフィリエイトタグ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h13_45.jpg)
![SWELL移行後のアフィリエイトタグ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h13_45.jpg)
更新日ショートコード(寄付特典)
Cocoon
![Cocoonの更新日ショートコード](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h34_00.jpg)
![Cocoonの更新日ショートコード](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h34_00.jpg)
SWELL移行後
![SWELL移行後の更新日ショートコード](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h34_10.jpg)
![SWELL移行後の更新日ショートコード](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h34_10.jpg)
HTML挿入ボタン(寄付特典)
Cocoon
![CocoonのHTML挿入ボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h34_46.jpg)
![CocoonのHTML挿入ボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h34_46.jpg)
SWELL移行後
![SWELL移行後のHTML挿入ボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h34_49.jpg)
![SWELL移行後のHTML挿入ボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h34_49.jpg)
Cocoonブロック
アイコンボックス
Cocoon
![Cocoonのアイコンボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h16_26.jpg)
![Cocoonのアイコンボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h16_26.jpg)
SWELL移行後
![SWELL移行後のアイコンボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h16_38.jpg)
![SWELL移行後のアイコンボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h16_38.jpg)
Cocoon
![Cocoonのアイコンボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h18_15.jpg)
![Cocoonのアイコンボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h18_15.jpg)
SWELL移行後
![SWELL移行後のアイコンボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h18_20.jpg)
![SWELL移行後のアイコンボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h18_20.jpg)
Cocoon
![Cocoonのアイコンボックス-3](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h19_55.jpg)
![Cocoonのアイコンボックス-3](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h19_55.jpg)
SWELL移行後
![SWELL移行後のアイコンボックス-3](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h19_59.jpg)
![SWELL移行後のアイコンボックス-3](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h19_59.jpg)
案内ボックス
Cocoon
![Cocoonの案内ボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h21_40.jpg)
![Cocoonの案内ボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h21_40.jpg)
SWELL移行後
![SWELL移行後の案内ボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h21_49.jpg)
![SWELL移行後の案内ボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h21_49.jpg)
Cocoon
![Cocoonの案内ボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h22_40.jpg)
![Cocoonの案内ボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h22_40.jpg)
SWELL移行後
![SWELL移行後の案内ボックスー2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h22_44.jpg)
![SWELL移行後の案内ボックスー2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h22_44.jpg)
白抜きボックス
Cocoon
![Cocoonの白抜きボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h24_03.jpg)
![Cocoonの白抜きボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h24_03.jpg)
SWELL移行後
![SWELL移行後の白抜きボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h24_07.jpg)
![SWELL移行後の白抜きボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h24_07.jpg)
付箋風ボックス
Cocoon
![Cocoonの付箋風ボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h24_51.jpg)
![Cocoonの付箋風ボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h24_51.jpg)
SWELL移行後
![SWELL移行後の付箋風ボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h24_56.jpg)
![SWELL移行後の付箋風ボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h24_56.jpg)
Cocoon
![Cocoonの付箋風ボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h25_50.jpg)
![Cocoonの付箋風ボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h25_50.jpg)
SWELL移行後
![SWELL移行後の付箋風ボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h25_53.jpg)
![SWELL移行後の付箋風ボックス-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h25_53.jpg)
タブボックス
Cocoon
![Cocoonの白抜きボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h27_39.jpg)
![Cocoonの白抜きボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h27_39.jpg)
SWELL移行後
![SWELL移行後のタブボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h27_43.jpg)
![SWELL移行後のタブボックス](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h27_43.jpg)
ふきだし
PC表示で見ると特に違和感なく問題ないかと思います。
Cocoon
![ふきだし-1](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h28_34.jpg)
![ふきだし-1](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h28_34.jpg)
SWELL移行後
![ふきだし-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h28_38.jpg)
![ふきだし-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h28_38.jpg)
SWELL移行後、スマホ表示のふきだしは以下画像のようなイメージになります。
少し窮屈な印象にはなるので、気になる方は急ぎリライトしてあげましょう。
![ふきだし-3](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-12_00h43_09.jpg)
![ふきだし-3](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-12_00h43_09.jpg)
![ふきだし-4](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-12_00h43_28.jpg)
![ふきだし-4](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-12_00h43_28.jpg)
ブログカード
Cocoon
![Cocoonのブログカード](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h29_36.jpg)
![Cocoonのブログカード](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h29_36.jpg)
SWELL移行後
![SWELL移行後のブログカード](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h29_40.jpg)
![SWELL移行後のブログカード](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h29_40.jpg)
ボタン
Cocoon
![Cocoonのボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h30_09.jpg)
![Cocoonのボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h30_09.jpg)
SWELL移行後
![SWELL移行後のボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h30_14-1.jpg)
![SWELL移行後のボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h30_14-1.jpg)
囲みボタン
Cocoon
![Cocoonの囲みボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h30_44.jpg)
![Cocoonの囲みボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h30_44.jpg)
SWELL移行後
![SWELL移行後の囲みボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h30_47.jpg)
![SWELL移行後の囲みボタン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h30_47.jpg)
アコーディオン(トグル)
Cocoon
![Cocoonのアコーディオン(トグル)](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h31_13.jpg)
![Cocoonのアコーディオン(トグル)](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h31_13.jpg)
SWELL移行後
![SWELL移行後のアコーディオン(トグル)](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h31_15.jpg)
![SWELL移行後のアコーディオン(トグル)](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h31_15.jpg)
検索案内
Cocoon
![Cocoonの検索案内](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h31_43.jpg)
![Cocoonの検索案内](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h31_43.jpg)
SWELL移行後
![SWELLの検索案内](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h31_46.jpg)
![SWELLの検索案内](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h31_46.jpg)
タイムライン
Cocoon
![Cocoonのタイムライン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h32_20.jpg)
![Cocoonのタイムライン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h32_20.jpg)
SWELL移行後
![SWELL移行後のタイムライン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h32_23.jpg)
![SWELL移行後のタイムライン](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h32_23.jpg)
アイコンリスト
Cocoon
![Cocoonのアイコンリスト](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h33_05.jpg)
![Cocoonのアイコンリスト](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h33_05.jpg)
SWELL移行後
![SWELL移行後のアイコンリスト](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h33_08.jpg)
![SWELL移行後のアイコンリスト](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h33_08.jpg)
FAQ
Cocoon
![CocoonのFAQ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h40_43.jpg)
![CocoonのFAQ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h40_43.jpg)
SWELL移行後
![SWELL移行後のFAQ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h40_46.jpg)
![SWELL移行後のFAQ](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-23_22h40_46.jpg)
Cocoon汎用ブロック
見出しボックス、タブ見出しボックス、ラベルボックス
Cocoon
![ボックス系装飾-1](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h40_40.jpg)
![ボックス系装飾-1](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h40_40.jpg)
SWELL移行後
![ボックス系装飾-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h40_57.jpg)
![ボックス系装飾-2](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h40_57.jpg)
Cocoonマイクロコピー
マイクロバルーン&マイクロテキスト
Cocoon
![Cocoonのマイクロコピー](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h41_36.jpg)
![Cocoonのマイクロコピー](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h41_36.jpg)
SWELL移行後
![SWELL移行後のマイクロコピー](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h41_39.jpg)
![SWELL移行後のマイクロコピー](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h41_39.jpg)
Cocoonレイアウト
2カラム、3カラム
Cocoon
![Cocoonの2カラム、3カラム](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h36_57.jpg)
![Cocoonの2カラム、3カラム](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h36_57.jpg)
SWELL移行後
![SWELL移行後の2カラム、3カラム](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h37_00.jpg)
![SWELL移行後の2カラム、3カラム](https://webnote-plus.com/wp-content/uploads/2021/08/2021-08-02_00h37_00.jpg)
SWELLブロックへのおすすめリライト方法
最終的には旧テーマの装飾は全てSWELLのスタイルに直して、サポートプラグインを停止することを推奨します。
サポートプラグインを有効化している間は、旧テーマとSWELLの2つのテーマを読み込むことになるので、処理が増えて動作が重くなってしまう可能性があります。
大急ぎで対応する必要はないですが、ゆっくりでもSWELLのスタイルにリライトをしていきましょう。
ここでは、先ほどのCocoonのスタイルをSWELLのどんなスタイルに置き換えていくか、それぞれ例を紹介したいと思います。
SWELLのブロックエディターの機能について動画付きで詳しく紹介しています。
![](https://webnote-plus.com/wp-content/uploads/2021/01/1ad3fcca39510b13b3b44725d0c73842-300x169.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/1ad3fcca39510b13b3b44725d0c73842-300x169.png)
段落ブロック
SWELLの段落ブロックは、サイドバーから多数のスタイルをクリック操作だけで設定できます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
段落ブロックのスタイルを設定できるのは本当に助かります…!
Cocoonの以下コンテンツは、SWELLの段落ブロックに置き換えるのもいいと思います。
- アイコンボックス
- 案内ボックス
- 白抜きボックス
- 付箋風ボックス
SWELLの段落ブロックを使っている動画を用意しました。
段落ブロックで使える装飾については以下公式マニュアルでも紹介されています。
![](https://swell-theme.com/wp-content/uploads/2019/01/thumb_block_style.png)
![](https://swell-theme.com/wp-content/uploads/2019/01/thumb_block_style.png)
キャプション付きブロック
SWELLのキャプション付きブロックでは、見出し付きのボックススタイルを複数パターン作ることができます。
Cocoonの以下コンテンツは、SWELLのキャプション付きブロックで再現できます。
- タブボックス
- 見出しボックス
- タブ見出しボックス
- ラベルボックス
キャプション付きブロックは複数のスタイルを設定することができたり、アイコンもクリックだけで自由に切り替えられます。
キャプション付きブロックを使っている動画を用意しました。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
キャプション付きブロックはかなり活躍します…!
キャプション付きブロックの公式マニュアルは以下です。
![](https://swell-theme.com/wp-content/uploads/2019/04/thumb_capbox.png)
![](https://swell-theme.com/wp-content/uploads/2019/04/thumb_capbox.png)
ふきだしブロック
ふきだしブロックもSWELLには用意されています。
SWELLのふきだしブロックは、事前に管理画面からアイコンやデザインの設定をしておくことができます。
そのため、記事内でふきだしを使用するときもボタン操作だけで簡単に呼び出すことができます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
毎回アイコンを設定する必要がないのでかなり時短になります…!
ふきだしブロックの公式マニュアルは以下です。
![](https://swell-theme.com/wp-content/uploads/2019/04/thumb_balblock.png)
![](https://swell-theme.com/wp-content/uploads/2019/04/thumb_balblock.png)
SWELLボタンブロック
WordPress側で用意しているボタンブロックとは別に、SWELLボタンブロックというオリジナルのブロックがあります。
Cocoonのボタンブロック、囲みボタンブロックはSWELLボタンブロックに置き換えるのがおすすめです。
SWELLのボタンブロックでは、HTMLタグをそのまま貼り付けることができます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
コードを改変することなくボタンリンクを作れます…!
その他にも、クリック率の計測機能が付いていたり、スタイルも複数選択できるのでかなり便利なブロックです。
SWELLボタンブロックの公式マニュアルは以下です。
![](https://swell-theme.com/wp-content/uploads/2019/02/thumb_swellbtn.png)
![](https://swell-theme.com/wp-content/uploads/2019/02/thumb_swellbtn.png)
ステップブロック
SWELLにはステップブロックというブロックがあります。
物事を順序立てて説明したいときや、時系列順で表示したいときに便利です。
Cocoonのタイムラインブロックは、ステップブロックに置き換えるといいと思います。
更にステップブロックでは、スタイルも3パターン選べるのでより見せ方の幅が広がるかなと思います。
ステップブロックの公式マニュアルは以下です。
![](https://swell-theme.com/wp-content/uploads/2019/10/thumb_stepblock.png)
![](https://swell-theme.com/wp-content/uploads/2019/10/thumb_stepblock.png)
関連記事ブロック
内部リンク、外部リンクともにブログカードを設置したいときは関連記事ブロックが便利です。
Cocoonのブログカードは関連記事ブロックに置き換えることができます。
関連記事ブロックは、リンクをテキスト表示にできたりなど、かなり多彩な設定が可能です。
以下の動画のようなイメージでリンクを設置することができます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_smile.jpg)
簡単にブログカードを作れるので重宝しています…!
関連記事ブロックの公式マニュアルは以下です。
![](https://swell-theme.com/wp-content/uploads/2019/07/thumb_postlink_block.png)
![](https://swell-theme.com/wp-content/uploads/2019/07/thumb_postlink_block.png)
投稿リストブロック
SWELLにはいろいろなパターンで記事一覧を表示してくれる投稿リストブロックがあります。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
トップページのカスタマイズで大活躍です…!
Cocoonの以下コンテンツは投稿リストブロックに置き換えることができます。
- 新着記事一覧
- 人気記事一覧
- ナビカード一覧
SWELLの投稿リストブロックは、例えば以下の様に表示する記事の条件を指定できます。
- 新着順
- 人気順
- 更新順
- ランダム
- カテゴリー別
- タグ別
- 記事ID
記事一覧の表示スタイルも複数から選択できます。
動画を見てもらうと投稿リストブロックの便利さが伝わるかなと思います。
投稿リストブロックの公式マニュアルは以下です。
![](https://swell-theme.com/wp-content/uploads/2019/10/thumb_post_list_block.png)
![](https://swell-theme.com/wp-content/uploads/2019/10/thumb_post_list_block.png)
テーマ移行は早い方が良い!でもSWELLなら…!
今回はSWELLにテーマを移行する時に大活躍する、乗り換えサポートプラグイン
本来、テーマ移行はとても大変な作業です。これはSWELLに限らず全てのテーマに共通することです。
記事数が増えれば増えるほど、移行後の修正作業の量が増えるので、なるべく早い段階で移行を決断するのがおすすめです。
ですが、SWELLの乗り換えサポートプラグインを活用することで、旧テーマのスタイルをある程度維持したまま、SWELLを使い始めることができます。
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
![](https://webnote-plus.com/wp-content/uploads/2021/01/satoshin_normal.jpg)
テーマ移行直後の修正作業の負担がグッと減って楽になります…!
大変な旧テーマのスタイルを修正する作業をゆっくり進められるようになるので、安心してテーマの乗り換えができるかなと思います。
SWELLへの乗り換えを検討している方は、ぜひ乗り換えサポートプラグインを活用してスムーズに移行を完了させましょう。
最後まで読んでいただきありがとうございました。
SWELL公式サイト
![](https://webnote-plus.com/wp-content/uploads/2021/11/from-cocoon-to-swell.png)
![](https://webnote-plus.com/wp-content/uploads/2021/11/from-cocoon-to-swell.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/swell-review-1.png)
![](https://webnote-plus.com/wp-content/uploads/2021/01/swell-review-1.png)
![](https://webnote-plus.com/wp-content/uploads/2022/09/swell-beginner.png)
![](https://webnote-plus.com/wp-content/uploads/2022/09/swell-beginner.png)
![](https://webnote-plus.com/wp-content/uploads/2021/11/swell-cocoon-comparison.png)
![](https://webnote-plus.com/wp-content/uploads/2021/11/swell-cocoon-comparison.png)
SWELL始め方の関連記事
これからSWELLを使い始める全ての方のためのSWELL始め方ガイド↓↓
![](https://webnote-plus.com/wp-content/uploads/2022/10/swell-start-guide.png)
![](https://webnote-plus.com/wp-content/uploads/2022/10/swell-start-guide.png)
SWELL全般の関連記事