「CocoonからSWELLに乗り換えたいけれど、記事のデザインが崩れないか心配」
「移行作業が難しそうで、何から始めればいいのかわからない」
無料テーマのCocoonから有料テーマのSWELLへの移行を考えていても、こうした不安から踏み出せない方もいるのではないでしょうか。
CocoonからSWELLへ移行すると、これまで使っていた装飾やショートコードなどが、そのまま表示されないことがあります。そのため、テーマを切り替える前の準備と、切り替えた後の記事修正が大切です。
この記事では、SWELLの購入方法から、移行前の準備、テーマのインストール、移行後の設定、記事の修正まで、画像付きで順番に解説します。
乗り換えサポートプラグインを使って表示への影響を抑えながら、少しずつ移行を進める方法も紹介します。
これからSWELLを購入する方も、すでに購入して移行を始めようとしている方も、ぜひ参考にしてください。
- CocoonからSWELLへ移行する前に準備しておくこと
- SWELLの購入方法と会員登録の手順
- 乗り換えサポートプラグインのインストール方法
- SEO情報やCSSを移行前に確認する方法
- SWELLへの切り替えと移行後の設定
- Cocoonで作成した記事を修正する方法
＼機能や価格を確認する／
CocoonからSWELLへ移行する前に知っておきたいこと
CocoonからSWELLへ移行する前に、特に知っておきたいのが、記事の表示とSEO関連の設定についてです。
テーマを変更するだけで、すべてのデザインや設定がそのまま引き継がれるわけではありません。事前に注意点を把握しておけば、移行後に慌てずに対応できます。
Cocoon独自の装飾はそのまま引き継がれない
Cocoon独自の吹き出し・ボックスなどの装飾は、SWELLに移行後そのまま表示されません。
そのため、Cocoonの機能を一部引き継いだ状態でSWELLへ移行できる公式プラグイン「乗り換えサポート from Cocoon」を使います。
このプラグインを利用すると、崩れを最小限に抑えながら記事の修正を進められます。
しかし、すべての機能やデザインを完全に再現することはできません。移行後は表示を確認し、必要に応じてSWELLに合った形へ修正していきましょう。
SEOタイトルやメタディスクリプションの引き継ぎに注意
Cocoonでは、記事ごとにSEOタイトルやメタディスクリプションなどを設定できます。
テーマを変更する際は、こうしたSEO関連の情報が移行後も適切に設定されているか確認することが大切です。
SWELLでは、SEO関連の設定に「SEO SIMPLE PACK」などのプラグインを利用します。Cocoonで設定していた情報を事前に整理し、必要に応じて移行先へ設定しておきましょう。
特に、検索流入の多い記事や収益につながる記事は、移行前にSEOタイトルやメタディスクリプションを控えておくと安心です。
また、移行後は記事のタイトルや説明文が意図したとおりに設定されているか、公開ページも確認してください。
CocoonからSWELLへの移行がおすすめな人
SWELLは有料テーマなので、購入前に自分のブログに必要かどうかを考えてみてくださ。
- 記事の装飾やレイアウトを整えたい
- サイト全体のデザインを自分好みに調整したい
- 今後もブログを続け、記事作成やリライトを進めやすい環境を整えたい
- 有料テーマを導入して、長期的にブログを運営したい
SWELLは、記事の装飾やレイアウトを整えやすく、ブログ運営を効率化したい方にも向いているWordPressテーマです。
実際にどのような機能があるのか、公式サイトで確認できます。
CocoonからSWELLへの移行手順
CocoonからSWELLへ移行する際は、次の順番で作業を進めます。
- SWELLを購入する
- SWELLERS’に会員登録する
- 乗り換えサポートプラグインをインストールする
- SEO SIMPLE PACKをインストールする
- SEO関連の情報を整理する
- Cocoonで設定した追加CSSを保存する
- SWELLをインストールして有効化する
- SWELLのユーザー認証を行う
- SWELL移行後の設定を行う
- Cocoonで作成した記事を修正する
- サイト全体を確認し、不要になったものを整理する
SWELLを購入する
SWELLは公式サイトから購入できます。購入前に価格や利用規約を確認しておきましょう。
エックスサーバー利用者の方は、SWELLを割引価格（17,600円→16,720円）で購入できます。エックスサーバー公式ページをご確認ください。
ここでは、SWELL公式サイトから購入する手順を紹介します。
2．利用規約に同意すればチェックを入れて、「SWELLを購入」をクリックします。
3．決済画面で必要事項を入力し、支払い手続きを進めます。
4．購入が完了すると、決済時に入力したメールアドレスにメールが届きます。メールが届いていることを確認したら、会員登録へ進みます。
SWELLERS’に会員登録する
SWELLを購入したら、会員サイト「SWELLERS’」に登録します。
会員サイトでは、SWELL本体や子テーマ、乗り換えサポートプラグインなどをダウンロードできます。
1．SWELLの会員サイト（SWELLERS’）にアクセスします。
2．新規会員登録ページで必要事項を入力し、「登録する」をクリックします。
3．「新規登録が完了しました」と表示されれば、会員登録は完了です。
4．SWELLには、ユーザー同士が交流できるDiscordコミュニティがあります。参加は任意です。参加しなくても、SWELLは利用はできます。
乗り換えサポートプラグインをインストールする
次に、SWELL公式の「乗り換えサポート from Cocoon」をインストールします。
SWELLを有効化する前にインストールしておきましょう。
1．SWELLERS’のマイページにログインします。
2．マイページの製品ダウンロードから、乗り換えサポートプラグインの「Cocoon用」をダウンロードします。
3．WordPress管理画面「プラグイン」→「新規プラグインを追加」→「プラグインのアップロード」をクリックします。
4．「ファイルを選択」をクリックします。
5．先ほどダウンロードした、乗り換えサポートプラグイン「Cocoon用」のファイルを選んでインストールします。
6．「プラグインを有効化」をクリックします。
7．乗り換えサポートプラグイン「Cocoon用」が有効化されました。
SEO SIMPLE PACKのインストール
SWELLでSEO関連の設定を行うために、「SEO SIMPLE PACK」をインストールします。
CocoonからSWELLへ移行する場合は、テーマを切り替える前にCocoonで設定していたSEO情報を確認しておくことが大切です。
1．WordPress管理画面から「プラグイン」→「新規プラグインを追加」を開き、検索窓に「SEO SIMPLE PACK」と入力します。
表示されたプラグインの「今すぐインストール」をクリックします。
2．インストールが完了したら、「有効化」をクリックします。
3．WordPress管理画面「SEO PACK」をクリックして、設定画面を開きます。
基本設定の「フロントページ」のディスクリプションを入力→「設定を保存」をクリックします。
各設定項目の意味は、SEO SIMPLE PACKの設定方法で詳しく解説しています。
SEO情報を移行する
SWELLを有効化すると「Cocoon」のメタボックスが消えてしまいます。Cocoonで記事ごとにSEOタイトルやメタディスクリプションを設定している場合は、SWELLを有効化する前に「SEO SIMPLE PACK」のメタボックスへ移行しておきます。
記事数が多い場合は、すべての記事を一度に確認するのではなく、アクセスの多い記事や収益記事から優先して整理すると進めやすくなります。
Cocoonのカスタマイザーの独自CSSの保存
Cocoonのカスタマイザーで独自のCSSを設定している場合は、移行前にコードを保存しておきましょう。
Cocoon用に書かれたCSSは、SWELLではそのまま適用されません。移行後に必要なデザインを再設定できるよう、事前に設定しているCSSコードをコピーし、メモ帳などに保存しておきます。
SWELLをインストール・有効化する
ここまで準備できたら、SWELL本体と子テーマをインストールします。テーマを切り替えるとサイトの表示が変わります。
1．SWELLERS’にログインします。
2．マイページにログインしたら、「SWELL本体最新版」と「子テーマ」のファイルをダウンロードします。
3．WordPress管理画面「外観」→「テーマ」→「テーマを追加」をクリックします。
4．「テーマのアップロード」をクリックします。
5．「ファイルを選択」をクリックし、SWELL本体のZIPファイルを選択してインストールします。続けて、子テーマのZIPファイルも同じ手順でインストールしてください。
6．インストールが完了したら、WordPress管理画面「外観」→「テーマ」を開き、SWELL CHILDを「有効化」します。
SWELLのユーザー認証を完了させる
SWELLをインストールしたら、ユーザー認証を完了させます。ユーザー認証を行うことで、SWELLのアップデートを適切に受けられるようになります。
1．「SWELLのユーザー認証が完了してません」をクリックします。
2．SWELLERS’会員アドレスを入力して、「認証リクエストを送信」をクリックします。
3．登録したメールアドレスに、SWELLのユーザー認証用のメールが届きます。URLをクリックします。
4．「認証が完了しました。」と表示されれば、完了です。
SWELLへ移行した後に行う設定
テーマをSWELLに切り替えたら、サイトの設定を確認します。
特に、アクセス解析やSNSで共有したときの表示、CSS、プラグインなどは、移行前の設定を確認しながら整えましょう。
この段階でも、乗り換えサポートプラグインは記事修正が終わるまで有効にしておきます。
Googleアナリティクスとサーチコンソールの設定
GoogleアナリティクスやGoogleサーチコンソールを利用している場合は、移行後も正しく計測・確認できる状態になっているか確認します。
Googleアナリティクスの測定ID入力とGoogleサーチコンソールの認証コード入力は、「SEO SIMPLE PACK」の一般設定から行います。
Googleアナリティクスの測定ID入力
「Googleアナリティクス」タグ→測定IDを入力→「設定を保存」をクリックします。
Googleアナリティクス「管理」→「データストリーム」→ストリーム名を開いて、測定IDをコピーします。
Googleサーチコンソールの認証コード入力
「ウェブマスターツール」タブ→Googleサーチコンソールの認証コードを入力→「設定を保存」をクリックします。
Googleサーチコンソール「設定」→「所有権の確認」→「HTMLタグ」を開いて、入力コードをコピーします。
OGP設定
OGPは、記事やサイトがSNSで共有されたときに、タイトルや画像などを表示するための仕組みです。WordPress管理画面「SEO PACK」→「OGP設定」を開きます。
基本設定
「基本設定」では、トップページがSNSでシェアされたときに表示される画像を設定します。画像を選択して、設定を保存してください。OGP画像の推奨サイズは「横1200×縦630px」
「Facebook」タブをクリックします。必要項目を入力して、設定を保存します。
「Twitter」タブをクリックします。必要項目を入力して、設定を保存します。
- summary：シンプルなサマリーカード
- summary_large_image：大きな画像で、目立つサマリーカード（当サイトはこちら）
SWELLのCSSの設定
Cocoonで独自のCSSを設定していた場合は、保存しておいたコードを確認しながら、必要なものをSWELLに合わせて設定します。
また、他にも設定していたCSSがあれば設定してください。Cocoon用に書いたCSSがSWELLでは適用されない場合があるので、必要に応じて修正します。
| 項目 | 追加CSS | カスタム書式 |
|---|---|---|
| 適用範囲 | サイト全体 （ページ全体のデザイン） | 記事エディター内 （個別記事や要素） |
| エディター反映 | 反映されない | 反映される |
| 用途 | レイアウト全体の調整 | 記事ごとのデザイン統一 |
| 具体例 | ページ背景や余白 | 見出しやボタンのデザイン |
- エディターに反映させる必要がないデザインやレイアウトのCSS⇨SWELLの「追加CSS」
- 記事を書く画面（エディター）にもCSSを反映させたい⇨SWELLの「カスタム書式」
SWELLのカスタマイザーの設定方法
1．WordPress管理画面「外観」→「カスタマイズ」をクリックします。
2．「追加CSS」をクリックします。
3．CSSを設定→「公開」をクリックします。
SWELLのカスタム書式の設定方法
WordPress管理画面「SWELL設定」→「エディター設定」→「カスタム書式」をクリック→カスタム書式用CSSに記入します。
プラグインの整理
SWELLには標準で利用できる機能があるため、以前のテーマで使っていたプラグインの中には、必要性を再検討できるものがあります。
特に、重複する機能を持つプラグインを導入すると、予期せぬ不具合を考慮する可能性があります。
SWELL公式サイトで「推奨・非推奨プラグイン」が紹介されているので、参考にしながらプラグインの見直しを行ってください。
SWELLの初期設定
SWELLへの移行後は、サイトのデザインや使いやすさを整えていきます。
- サイト全体のレイアウトやデザイン
- 高速化に関する設定
- Googleアドセンスなど、利用しているサービスの設定
- プロフィールの設定
- ウィジェットのカスタマイズ
SWELLの初期設定の詳しい手順は、SWELLテーマの初期設定ガイドを参考にしてください。
記事を修正する
SWELLへの移行後に時間がかかりやすいのが、既存記事の修正です。
Cocoon独自の装飾やブロックは、SWELLでは同じように表示されません。そのため、記事を確認しながら、必要な箇所をSWELLに合った形へ変更していきます。
記事数が多い場合は、すべての記事を一度に直そうとすると負担が大きくなります。まずは、優先順位が高い記事から修正しましょう。
- 検索からのアクセスが多い記事
- アフィリエイトなどの収益につながる記事
- サイト内でよく読まれている重要な記事
- 表示が大きく崩れている記事
記事修正の際に確認したいこと
- 見出しや本文が正しく表示されているか
- 吹き出しやボックスなどの装飾が崩れていないか
- 画像やリンクが正しく表示されているか
- 表やリストが読みやすく表示されているか
- スマートフォンでも読みやすいか
- SEOタイトルやメタディスクリプションが適切に設定されているか
乗り換えサポートプラグインは、すべてのデザインを完全に再現するためのものではありません。記事の修正を進めながら、少しずつSWELLのデザインに整えていきましょう。
乗り換えサポートプラグインとCocoonを整理する
記事の修正が終わったら、乗り換えサポートプラグインは削除します。
まずは、重要な記事の修正と表示確認を終え、サイト全体に問題がないことを確認しましょう。
1．「乗り換えサポート from Cocoon」を無効化します。
2．「削除」をクリックします。
3．「乗り換えサポート from Cocoon」とそのデータの削除確認のポップアップが表示されるので「OK」をクリックすれば完了です。
4．SWELLへの移行が完了し、Cocoonが不要であることを確認できたら、Cocoonの親テーマと子テーマを削除します。
5．削除するテーマの上にカーソルを合わせて「テーマの詳細」をクリックします。
6．「削除」をクリックします。
7．ポップアップが表示されるので「OK]をクリックします。
CocoonからSWELLへの移行手順まとめ
CocoonからSWELLへの移行は、テーマを変更したら終わりではありません。記事の表示やSEO関連の設定を確認しながら、少しずつ整えていくことが大切です。
移行作業には時間がかかることもありますが、優先順位を決めて進めれば、負担を抑えながら取り組めます。
SWELLへの移行を検討している方は、機能や価格を確認したうえで、自分のブログに合うかどうか判断してみてください。
＼機能や価格を確認する／
コメント