★当サイトは【SWELL】を使用しています....(▽◕ ᴥ ◕▽)    ★★ 【Canva】のテンプレートで年賀状を作る方法を紹介しています(^-^)/

CocoonからSWELLへ|乗りかえ直後のサイト画面を公開!【デザインの崩れが心配の方必見】

【CocoonからSWELLへ】乗り換えでどのくらいサイトのデザインがくずれるの?|体験者のサイト画面をおみせします!
お悩みさん

CocoonからSWELLに乗り換えを考えているんだけど・・・

かわうそ

そうなんだ!でも何だか心配そうな顔をしているねえ

お悩みさん

実際のところ乗り換えをしたら、サイトのデザインがどのくらいくずれてしまうのか心配なのよ

かわうそ

そうだよね。この記事ではそんなお悩みさんの疑問に、CocoonからSWELLに乗り換えたばかりの私が、お答えします。

この記事はこんな人におすすめ
  • CocoonからSWELLへの移行を考えている方
  • SEWLLに乗り換え直後に実際どのくらいサイトのデザインが変わるのかを知りたい方
目次

CocoonからSWELLへの乗り換えでどのくらいサイトのデザインがくずれるの?

リタイアかわうそです。

CocoonからSWELLへの移行を検討されている方が多くいらっしゃると思います。

そんな方にとって「今まで頑張ってつくってきたサイトのデザインがくずれてしまうのではないか」というのがいちばんの心配ごとではないでしょうか。

4日前にCocoonからSWELLに乗り換えたばかりの私が、結論からお伝えします。

かわうそ

ぜひ乗り換えをおすすめします!

安心してください。乗換えで多少デザインのくずれがあっても、修正可能な範囲です。

「Cocoon乗り換えサポート用」のプラグインがデザインのくずれを最小限にしてくれます

SWELLには、他テーマに乗り換える際、サイトのデザインくずれを最小限にするための「乗り換え用サポート」用のプラグインが準備されています。

Cocoon⇒SWELL乗り換えサポート用」 のプラグインもあります。

SWELLのテーマを有効化する前に 「Cocoon乗り換えサポート用」プラグインを有効化することで、デザインのくずれを最小限にしてくれるのです。

お悩みさん

「乗り換えサポート用」のプラグインを使ってもある程度はデザインがくずれてしまうよのね?

かわうそ

確かにデザインが100%引き継がれるわけではありません。

かわうそ

これから、わたしが実際に乗り換えをしたときのサイト画面をおみせします。もちろん「乗り換えサポート」プラグインを使っています

CocoonからSWELLへの移行を検討されている方は、ぜひ参考にしてください。

 

スポンサーリンク

CocoonからSWELLへ乗り換え直後の実際のサイト画面

【サイトトップページ】SWELL仕様になります

サイトトップページのビフォアアフターです。

Cocoonで作った【トップページ

自分なりに頑張ってつくったトップページで愛着があります。

カテゴリー別のカードを入れたのもお気に入りでした。

SWELLり換え直後の【トップページ

こちらが乗り換え直後のトップページです。

あたりまえですが、まったく別物のサイトになりました😲

 

かわうそ

正直、お気に入りのページが化けたときはショックでした。

かわうそ

でも安心してください。SWELLには着せ替え用のデモサイトが6種類も準備されています


SWELLの「着せ替え用デモサイト」はこちら

男性、女性構わず人気のパンです。チーズにコーンにマョネーズ相性は抜群。この大きさで216円のコスパの良さで、ガレットという生地の薄さも食べやすくやみつきになります!
SWELLのデモサイト

どれもSWELLらしい素敵なデザインですよね。

とりあえず、お好みのデモサイトを選んで着せ替えておくと、すぐにオシャレなサイトにすることができます。

後は、ゆっくり自分の好みにカスタマイズすればOKです。

私はまず「DEMO4」に着せ替えてから、サイトのデザインをカスタマイズしました。

下記が、SWELLでカスタマイズしたトップページです。

Cocoonで作ったトップページとほとんど変化がないですね(^_^)

SWELLに慣れたら、少しづつ手直ししていきたいと思います。

SWELLで作ったトップページ

かわうそ

乗りかえ直後けっこうパニックになっていて、デモサイトに着せかえた直後のスクリーンショットをとり忘れていました。

 

【吹き出し】パソコン画面ではくずれなし

乗り換えの際、【吹き出し】のくずれが一番気になっていました。

ネットで調べると【吹き出し】は崩れるという情報が多くみられたからです。

意外なことに、パソコンの画面では【吹き出し】はほとんど崩れていませんでした😃

【吹き出し】のビフォアアフターです。

Cocoonの【吹き出しの画面

Cocoonの吹き出し画像
Cocoonの吹き出し

 

SWELL乗り換え後の【吹き出しの画面

CocoonからSWELLに乗り換え直後の吹き出し画面
SWELL

スマホの画面はどうなったの?

かわうそ

スマホの【吹き出し】は、形が縦長になってしまいました・・・

SWELL スマホ

縦長になったスマホの【吹き出し】は、わたしは許容範囲としました。

Cocoonの吹き出しでお世話になった「お悩みさん」にも愛着があるので、このままでいきます(^_^)

かわうそ

SWELLの【吹き出し】登録機能を使えば、吹き出しの修正もスムーズにできそうですね

【Cocoon標準の囲み枠】くずれなし

Cocoonの【標準の囲み枠は崩れていませんでした😃

【囲み枠】のビフォア・アフターです。

Cocoonの【標準囲み枠】の画面

Cocoon

SWELL乗り換え後の【標準囲み】の画面

SWELL
かわうそ

スマホの画面も大丈夫でした(^-^)/

SWELL スマホ

HTMLで【カスタムした囲み画面】一部くずれあり

【カスタマイズした囲み枠】のうちいくつかはこわれていました😯

こわれてしまった【カスタマイズした囲み枠】の ビフォア・アフターです。

Cocoonの【カスタマイズした囲み枠】画面

Cocoonでカスタマイズした囲み枠の画像
Cocoon


SWELL乗り換え後の【カスタマイズした囲み枠】画面

Cocoonでカスタマイズした囲み枠のSWELL移行後の画面
SEWLL
かわうそ

吹き出し内の画像が枠の外に飛び出してしまいました。

かわうそ

でも クラシックエディーター編集で、はみ出した画像をコピーして枠内にペーストしたら簡単に修正できました

【カスタマイズした囲み枠】は全部くすれてしまったの?

かわうそ

ほとんどくずれていませんでした。

 

こちらが、くずれなかった【カスタマイズした囲み枠】の画面です。

SWELL
SWELL
SWELL
かわうそ

多少のくずれは、クラシックエディ―タで修正は可能です。心配な方は、カスタマイズした囲み枠を消しておいた方が無難かもしれません。

【テーブルで作った表】一部くずれあり

【テーブルで作った表】のうちいくつかはくずれていました 😯

下記の写真は、こわれてしまった【テーブルで作った表】です。

(上にはみ出しているサムネイル写真は、もともとは表の右側枠内に入っていました)

CocoonからSWELLに乗り換え後にこわれた表
SWELL
かわうそ

乗り換え直後はこわれていなかったと思います。おそらくリライト途中でクラシックエディ―タからブロックエディッターに設定変更した際に崩れたと思われます

かわうそ

でも、クラシックエディーター編集で、はみ出した画像をコピーして表の中にペーストしたら簡単に修正できました

下の図は、こわれた表と同じ方法でCocoonで作成した表ですが、ほとんどくずれがありません。

CocoonからSWELLに乗り換え後にこわれなかった表
SWELL

 

かわうそ

パソコン画面で大丈夫でも、スマホ画面でくずれているケースもあります

かわうそ

下記の表は、パソコン画面ではくずれていませんでした

SWELL パソコン

 

かわうそ

でも、スマホ画面では、おススメ度の★がぐちゃぐちゃに・・・

CocoonからSWELLに移行後のスマホ画面の表
SWELL スマホ
かわうそ

パソコン画面で大丈夫でもスマホ画面でチェックする必要があります

かわうそ

SWELLに移行後、表はPDFファイルのようになって、線の位置は修正できません。線の位置を修正したい場合は、作りなおす必要があります。

 

【ブログカード】はこわれます

ブログカード】は、内部・外部リンクともにこわれます 😯

事前のネット情報で、これは想定内でした。

Cocoonの【ブログカード画面

Cocoonのブログカードの画像
Cocoon

 SWELL移行直後の【ブログカード画面

CocoonからSWELLに移行直後のブログカードの画像
SWELL
かわうそ

ブログカードは地道に修正するしかないですね

 

【植え込み】くずれなし

ツイッター」「インスタグラム」「YouTube」「グーグルマップ」「カエレバ」を【植え込み】した画面は、くすれがありませんでした 😃

SWELL移行後のツイッター植え込み画面

SWELL乗り換え直後のツイッター植え込み画面
SWELL ツイッター

 

SWELL移行後の「カエレバ」植え込み画面

SWELL乗り換え直後のカエレバ植え込み画面
SWELL カエレバ

 

かわうそ

【植え込み】は、きれいに引き継がれます。ただし、Googleアドセンのスコードは入れなおしが必要です。

 

スポンサーリンク

まとめ

今回は、 CocoonからSWELLへの移行にあたり「サイトのデザインのくずれが心配」という方のために、移行前後の実際のサイト画面をご紹介しました。

多少デザインのくずれはあるもののCocoon乗り換えサポート用プラグインがとても優秀である、ということがわたっていただけたのではないでしょうか。

私も乗り換え前は不安があったものの、安心して乗り換えができたと実感しています。

これなら、乗りかえたあとのリライト作業も落ち着いてゆっくりできますよね!

 CocoonからSWELLへの乗り換えに迷っている方へ

かわうそ

なるべく記事数が少ないうちに移行することをぜひおススメします!

さいごまでお読みいただきありがとうございました。

追記

追記(乗りかえ7日目)

かわうそ

乗りかえ後は、1~2つ新しい記事を作って、新しいテーマに慣れてからリライト作業をすることをおススメします

乗りかえ後に私が実感したのは「新たに記事を書くよりもリライトする方がむずかしい」ということでした。

Cocoonで簡単にできたことも、最初のうちは調べながらになるので時間がかかります。

でも、1~2記事作れば、だいたい基本的な使い方は理解できます。

Cocoonでクラシックエディ―タ―しか使ってこなかった私でも、あっという間にブロックエディーターに慣れました。

それほどSWELLのブロックエディーターは親切です。

SWELLのブロックエディーター にある程度慣れると、思ったほどリライトするのも苦痛ではありませんでした。

乗りかえプラグインのおかげで慌ててリライトしなくてもよいので、マイペースで行えるのもいいですね。

気になる「吹き出し」も修正しました

Cocoonの吹き出しをSWELL移行後修正したことを説明するための画像

追記(乗りかえ2週間)

公開中の13記事、すべてデザインの修正が完了しました。

修正作業も段々慣れてきたせいか、楽しみながらできました。

合間に、新規記事を3つ、下書きにしていた記事のリライトを1つ行うこともできました。

ブロックエディ―ターの使いやすさ、乗換えプラグインの優秀さを改めて実感してるところです。

これから、CocoonからSWELLに乗りかえをされる方へ

SWELLの子テーマの有効化ボタンを押す前に、ぜひこちらの記事もチェックしてみてくだい!

ポチっとしていただけると嬉しいです

リタイアかわうその主婦活ブログ - にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URL Copied!
目次
閉じる