Cocoon→SWELLの移行方法
SWELL移行後の装飾崩れとデザイン
WordPressブログ開設3ヵ月目を目前に、ついにCocoonからSWELLへ移行しました。
わたしはブログの知識がなく、
- ブログのデザインがうまくいかない
- 記事を書くのに時間がかかる
- モチベーションを上げたい
この理由からSWELLへ移行することに決めました。
移行した結果、初心者のわたしでもブログが整って、モチベーションもアップ!
ブログがとても楽しくなりました
SWELLは他の有料テーマと比べると、値段が高い(17,600円)のがデメリットです。そのためなかなか移行に踏み切れずにいました。
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
悩んでいないでもっと早く買えばよかった…!
今回の記事ではSWELLへの移行方法と、実際に使ってみたおすすめポイントをレビューします♪
SWELLがおすすめな人
- HTMLやCSSの知識がない人
- 簡単におしゃれなデザインにしたい人
\ ブログが楽しくなるテーマ /
SWELLの購入方法
![SWELL購入画面](https://chipisblog.com/wp-content/uploads/2023/06/swell2-1024x497.jpeg)
![SWELL購入画面](https://chipisblog.com/wp-content/uploads/2023/06/swell2-1024x497.jpeg)
チェックを入れて、「SWELLを購入する」ボタンをクリックします。
![SWELL購入手続き画面](https://chipisblog.com/wp-content/uploads/2023/06/swell3-1024x458.jpeg)
![SWELL購入手続き画面](https://chipisblog.com/wp-content/uploads/2023/06/swell3-1024x458.jpeg)
メールアドレスとクレジットカード情報を入力し「支払う」ボタンをクリックします。
SWELLをダウンロードする
つづいて、SWELLをダウンロードします。
![SWELLダウンロード](https://chipisblog.com/wp-content/uploads/2023/06/swell13-1024x755.jpeg)
![SWELLダウンロード](https://chipisblog.com/wp-content/uploads/2023/06/swell13-1024x755.jpeg)
「SWELL本体最新版」をダウンロードします。
テーマエディターを使って、カスタマイズする場合は子テーマも一緒にインストールしましょう。
![SWELLインストール画面](https://chipisblog.com/wp-content/uploads/2023/06/B08E3DF4-AD16-40EA-AF22-0F4638B48F8D-1024x422.jpeg)
![SWELLインストール画面](https://chipisblog.com/wp-content/uploads/2023/06/B08E3DF4-AD16-40EA-AF22-0F4638B48F8D-1024x422.jpeg)
WordPressにログインをして「外観」→「テーマ」→「新規追加」→「テーマのアップロード」の順に進み、ダウンロードしたSWELLのファイルを選択してアップロードします。
アップロードできたら、今すぐインストールをクリックしましょう。
インストールが完了したら「有効化」をクリックします。
「SWELL設定」→「アクティベート」→メールアドレスの欄に登録したメールアドレスを入力して「認証リクエスト」をクリックしてユーザー認証を完了させます。
cocoonの乗り換えサポートプラグインをインストールする
CocoonからSWELLへ移行するために、プラグインをインストールします。
![SWELL乗り換えサポートプラグインインストール](https://chipisblog.com/wp-content/uploads/2023/06/swell11-1024x755.jpeg)
![SWELL乗り換えサポートプラグインインストール](https://chipisblog.com/wp-content/uploads/2023/06/swell11-1024x755.jpeg)
「Cocoon用」の乗り換えサポートプラグインをダウンロードします。
![SWELL乗り換えサポートプラグインインストール画面](https://chipisblog.com/wp-content/uploads/2023/06/swell5-1024x280.jpeg)
![SWELL乗り換えサポートプラグインインストール画面](https://chipisblog.com/wp-content/uploads/2023/06/swell5-1024x280.jpeg)
ダウンロードしたらWordPressにログインをして「プラグイン」→「新規追加」→「プラグインのアップロード」へ進み、乗り換えサポートプラグインのファイルを選択します。
![SWELL乗り換えプラグインインストール画面](https://chipisblog.com/wp-content/uploads/2023/06/swell8-1024x377.jpeg)
![SWELL乗り換えプラグインインストール画面](https://chipisblog.com/wp-content/uploads/2023/06/swell8-1024x377.jpeg)
「今すぐインストール」をクリックします。完了したら「有効化」をしましょう!
CocoonからSWELL移行後の設定
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
移行後の設定でやることを説明しますね。
SWELLで推奨プラグインと非推奨プラグインについては、公式サイトで紹介されているので参考にしてください。
Googleアナリティクスの設定をする
![](https://chipisblog.com/wp-content/uploads/2023/05/319E1014-BDE2-4C08-94EB-C04E8473FD7D-1024x645.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/319E1014-BDE2-4C08-94EB-C04E8473FD7D-1024x645.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/28146F77-2377-4487-A1BF-B47298228A79-590x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/28146F77-2377-4487-A1BF-B47298228A79-590x1024.jpeg)
G4を使っている方は上の欄に、UAを使っている方は下の欄にIDを入力します。
Googleサーチコンソールを登録する
![](https://chipisblog.com/wp-content/uploads/2023/05/1EA0493A-F163-4CD6-912C-6CF403B590FB-1024x645.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/1EA0493A-F163-4CD6-912C-6CF403B590FB-1024x645.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/06/3530FFCF-A195-4568-BB37-780F4032C91D-1024x938.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/06/3530FFCF-A195-4568-BB37-780F4032C91D-1024x938.jpeg)
Googleサーチコンソールの認証コードを入力します。
テーマの機能で設定していた場合のみ設定の必要があります。
Googleアドセンスを設定する
![](https://chipisblog.com/wp-content/uploads/2023/06/9F3DE4C4-7874-4FE6-802F-E4A45FD72A53-1024x754.png)
![](https://chipisblog.com/wp-content/uploads/2023/06/9F3DE4C4-7874-4FE6-802F-E4A45FD72A53-1024x754.png)
![](https://chipisblog.com/wp-content/uploads/2023/06/D083571C-6AC2-48C7-B437-466FC6CE65EB-1024x405.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/06/D083571C-6AC2-48C7-B437-466FC6CE65EB-1024x405.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/06/4509227B-F656-477E-B39B-7E529203CED6-1024x530.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/06/4509227B-F656-477E-B39B-7E529203CED6-1024x530.jpeg)
headタグ終了直前に出力するコードと書かれた枠内にコードを貼ります。
貼り終わったら「公開」ボタンをタップして保存しましょう。
OGP設定をする
OGP設定では、SNSにブログをリンクさせた時にブログの画像が表示されるようにします。
![](https://chipisblog.com/wp-content/uploads/2023/05/DA9A48E1-DEB3-49CE-96A7-D1F44251E291-1024x376.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/DA9A48E1-DEB3-49CE-96A7-D1F44251E291-1024x376.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
画像があるのとないのとではイメージが全然違いますよね。
![](https://chipisblog.com/wp-content/uploads/2023/05/66D8270F-8F5B-4257-8A3D-728CEFE6E7E6-1024x645.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/66D8270F-8F5B-4257-8A3D-728CEFE6E7E6-1024x645.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/A9EE858A-55D0-4A36-A568-8643B9877BE3-753x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/A9EE858A-55D0-4A36-A568-8643B9877BE3-753x1024.jpeg)
表示させたい画像を選択してください。選択したら設定を保存するをクリックします。
![](https://chipisblog.com/wp-content/uploads/2023/06/A3436A4B-6AFB-4F92-AA0D-441A968B1B27-600x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/06/A3436A4B-6AFB-4F92-AA0D-441A968B1B27-600x1024.jpeg)
Twitterのアカウント名を入力します。@は必要ありません
カードタイプを「summary」と「summary_large_image」の2種類から選び、設定を保存するをクリックします。
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
わたしは大きいほうの「summary_large_image」で設定しています♪
もし設定したのに画像が表示されない場合は、「SWELL設定」→「リセット」からブログカードのキャッシュをクリアしてみてください。
![](https://chipisblog.com/wp-content/uploads/2023/06/F6983D21-86D5-4100-A370-50399EA48852-1024x449.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/06/F6983D21-86D5-4100-A370-50399EA48852-1024x449.jpeg)
CocoonからSWELLへ移行後のホームのデザインは?
![swell移行後のトップページ](https://chipisblog.com/wp-content/uploads/2023/06/swell17-300x175.jpeg)
![swell移行後のトップページ](https://chipisblog.com/wp-content/uploads/2023/06/swell17-300x175.jpeg)
SWELLを有効化するとホームがこのように変化します。
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
自分のブログじゃないみたい!
CocoonとSWELLのホームの比較はこちら。
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review2-663x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review2-663x1024.jpeg)
自分好みにイメージ画像や文字色を変更しただけ。SWELLでは簡単におしゃれなデザインに整いました
CocoonSWELLへ移行後の記事装飾の崩れ方は?
Cocoonから移行するときにSWELL公式サイトから、「移行サポートプライン」をインストールするのが絶対におすすめです。
プラグインがあるのと、ないのとでは記事の崩れかたがどのくらい違うのか比較してみました。
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review1-702x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review1-702x1024.jpeg)
プラグインを使わずSWELLに移行した場合、「ふきだし」のアイコンがどーんと大きく表示されて、ふきだしじゃなくなっています…。
プラグインがあるとふきだしの形が表示されて、そんなに大きくは崩れていないですね
編集作業をして元通り整いました。
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
移行したらなるべく早く編集して見やすくしてあげましょう
編集が終わったら乗り換えサポートプラグインはもう必要ないので削除してOKです。
CocoonからSWELLへ移行するなら早い方がいい理由
SWELLへ移行して有料テーマを使われているみなさんが「変更するなら早いほうがいい」と言っていた理由がわかりました。
記事にほどこした装飾がテーマによって違うので、テーマを移行するすると記事の装飾が崩れてしまうのです。
わたしのブログはたった12記事しかないのに編集作業に5時間かかり大変でした。
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
最初から導入しておくと、無駄な編集時間が省けて効率的でおすすめです。
CocoonからSWELLへ移行前にやっておけばよかったこと
移行前にやっておけばよかったなーと思ったことを紹介します。
ディスクリプションをメモしておく
![](https://chipisblog.com/wp-content/uploads/2023/06/0CD4D3D6-9042-4CA9-93D9-6A5DA4021FC2-1024x539.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/06/0CD4D3D6-9042-4CA9-93D9-6A5DA4021FC2-1024x539.jpeg)
記事の簡単な概要を書く欄ですが、移行すると全部消えてしまいます。もう1度思い出しながら書かないといけなくなるので、コピーしておくといいです。
バックアップをとっておく
万が一移行する際に問題が起きてしまったときのために、ブログのバックアップを取っておくことをおすすめします!
SWELLのお気に入りポイントを6つ紹介
お気に入りポイントを紹介します〜!
スライダー
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review4-1024x557.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review4-1024x557.jpeg)
ブログのホームに記事スライダーを設置できます。
スライダーを設置するのが憧れだったの嬉しいです
![](https://chipisblog.com/wp-content/uploads/2023/05/FB4F2263-4AD8-40F9-9662-811BF1C0500D-1024x551.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/FB4F2263-4AD8-40F9-9662-811BF1C0500D-1024x551.jpeg)
ボタン
\ 簡単にできるよ /
このようなキラっとするおしゃれなボタンが選択するだけで簡単に作れます。
他にも、
「SWELL設定」でカラーを変えたり、ボタンに丸みを持たせたり、四角くしたりいろいろとアレンジできます。
装飾
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review6-854x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review6-854x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review7-758x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/wordpress-swell-review7-758x1024.jpeg)
ポチッと簡単にかわいい装飾ができて嬉しい。自分好みのカラーを「SWELL設定」で登録しておけば楽々です。
このように、「ボーダー」と「スタイル」を組み合わせて使うこともできますよ
ふきだし
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
ふきだしも簡単にアレンジできるよー!
![](https://chipisblog.com/wp-content/uploads/2023/04/326BC6B7-D7DB-4765-A076-515D4504F42C-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/04/326BC6B7-D7DB-4765-A076-515D4504F42C-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/04/326BC6B7-D7DB-4765-A076-515D4504F42C-150x150.jpeg)
心の声もできちゃう
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
縦並び・カラー変更・左右・枠ありなしもボタンひとつ!
![](https://chipisblog.com/wp-content/uploads/2023/05/9144EA82-3C7C-436D-A25F-943B940F97C2-1024x952.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/9144EA82-3C7C-436D-A25F-943B940F97C2-1024x952.jpeg)
「SWELL設定」でふきだしセットを最初に作っておくと、サクサク作業ができますよ。
かわいいアイコン
![](https://chipisblog.com/wp-content/uploads/2023/05/84B886E9-2BEF-4B95-AFD5-0F385FE282C4-874x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/84B886E9-2BEF-4B95-AFD5-0F385FE282C4-874x1024.jpeg)
たくさんのアイコンがあり、装飾のワンポイントになってとってもかわいいです
ボタンにもアイコンが使えちゃいます
リスト
![](https://chipisblog.com/wp-content/uploads/2023/05/F0BE9661-4328-4AEC-A273-84F451216B88-792x1024.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/05/F0BE9661-4328-4AEC-A273-84F451216B88-792x1024.jpeg)
おしゃれなリスト表示もボタンひとつで完成します。
- グループ入りリストを
- 選んで組み合わせると
- こんなにもおしゃれになるよ!
CocoonからSWELLへ有効化後ログインできなくなった場合どうする?
これは実体験なのですが、SWELLを有効化してその後WordPressに再度ログインしようとすると「このページにアクセスする権限がありません」と表示され、ログインできなくなってしまいました…。
わたしが解決するために試した方法は、ブログのレンタルサーバーの管理画面URLからログインしなおすこと。
![](https://chipisblog.com/wp-content/uploads/2023/06/BA1F2D14-DDE1-491F-847D-1AF1E7AE0572-1024x356.jpg)
![](https://chipisblog.com/wp-content/uploads/2023/06/BA1F2D14-DDE1-491F-847D-1AF1E7AE0572-1024x356.jpg)
すぐにログインできるように、お気に入りやホーム画面に追加していたログイン画面からだとエラーが出てしまうんです。
管理画面URLからログインを試してみると、無事にログインできました!
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
![](https://chipisblog.com/wp-content/uploads/2023/03/CE5B71F9-B163-45FB-A0A7-C291746F9C89-150x150.jpeg)
ブログが消えたのかと焦りました…。
わたしだけなのかも知れませんが、もしこんな表示が出たら試してみてくださいね。
まとめ|SWELLはブログ書くのが楽しくなる
こんな悩みがある方にSWELLをおすすめします
- HTML・CSSに悩みたくない
- ブログをもっとサクサク書きたい
- デザインをおしゃれにしたい
SWELLのデメリットはただ値段が高いことだけ。それ以外にデメリットは見当たりません。
SWELLは過去に値上げされているので今後も値上げされる可能性があります。
SWELLに移行して、簡単におしゃれでかわいいブログが作れるので、モチベーションが上がって記事を書くのが楽しくなりました!
ぜひSWELLでブログを楽しんでください♪
\ 17,600円で買い切り/