最新のSEO・サイト高速化に対応|WordPressテーマ「SWELL」の評判・レビューはこちら ≫

SWELLの評判・レビューはこちら ≫

クリック

タップ

SWELLのテーマ乗り換えサポートプラグインでデザイン崩れを最小限に!おすすめなリライト例も紹介

「乗り換えサポートプラグインとは?」

「なるべくデザインを崩さずに他テーマから変更したい」

「乗り換えサポートプラグインを利用したときのデザインの変化は?」

この記事では、そんな方に向けて、他WordPressテーマからSWELLへの乗り換えサポートプラグインの機能性について解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • デザイン崩れを最小限に抑えてテーマ乗り換えできる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、他テーマからSWELLへ完全移行できました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!

SWELL購入を検討中の人はこちらもご覧ください!/

乗り換えサポートプラグインを利用したテーマ移行はこちら
目次

SWELLの乗り換えサポートプラグインとは?

SWELLの乗り換えサポートプラグインとは、旧テーマ(=今利用しているテーマ)のデザインを最低限維持したまま新テーマ(=SWELL)へ乗り換えることができるプラグインです。

通常テーマを乗り換える場合、

  • 過去に書いた記事で利用している装飾をすべてリライトする
  • 広告コードや独自のCSSコードなどを新テーマに再追加する
  • GoogleサーチコンソールやGoogleアナリティクスを再設定する

といった作業が必要になります。

これらの作業のうち、過去に書いた記事で利用している装飾をなるべく崩さず、自分のペースでリライトを進めることを可能にするのが乗り換えサポートプラグインの役目になります。

かめコンパス

これがメチャクチャ便利!

SWELL公式サイトでも紹介されているので、あわせて見てみてください。

公式サイト他テーマからSWELLへの「乗り換えサポートプラグイン」一覧

乗り換えサポートプラグインがあるテーマないテーマ

SWELLの乗り換えサポートプラグインがあるテーマとないテーマは以下のとおりです。

乗り換えサポートプラグインがあるテーマ乗り換えサポートプラグインのないテーマ
CocoonLightning
JINSnow Monkey
SANGOEmanon Premium
STORKAstra
THE THOR賢威
AFFINGER5ここに書かれていないテーマ
※2024年8月時点
かめコンパス

今は6テーマしか対応していないが随時増やしていくらしいよ

プラグインがないテーマだと乗り換えができないのかというとそうではありません。

時間と手間はかかりますが、すべてのWordPressテーマで乗り換えは可能です。

つぎに乗り換えサポートプラグインを利用する場合としない場合の違いを見ていきましょう。

乗り換えサポートプラグインを利用する場合としない場合の違い

SWELLの乗り換えサポートプラグインを利用する場合としない場合の違いを以下にまとめてみました。

乗り換えサポートプラグインを利用する場合
  • デザイン崩れが最小限に抑えられる
  • ゆっくりリライトできる
  • 優先順位を付けてリライトできる
  • プラグイン利用中はサイトが重くなる
乗り換えサポートプラグインを利用しない場合
  • 旧テーマ専用のデザインがすべて崩れる
  • 急いでリライトしないといけない
  • 片っ端からリライトせざるを得ない
  • 新テーマで利用できない装飾がすべて分かる

このようにメリット・デメリットはありますが、基本的にプラグインを利用できるテーマであれば利用しましょう。

かめコンパス

プラグインを利用して優先度の高さに応じてリライトできる点が個人的に良かったよ

SWELLで乗り換えサポートプラグインを導入・有効化する方法

乗り換えサポートプラグインを導入するには、WordPressテーマ「SWELL」を購入する必要があります。

SWELL紹介記事SWELLの評判レビュー|メリットとデメリットも紹介

SWELLの購入がまだの人は、以下のボタンからダウンロードしてください。

\ここからSWELL購入画面へジャンプ!/

SWELLの購入手順

SWELLの購入・インストール手順は、下の記事を参考にしてください。

SWELLの購入・導入を終えている人は、下記の方法で乗り換えサポートプラグインを導入・有効化していきましょう。

STEP
SWELL会員サイト「SWELLERS’」にログインする
  1. 「メールアドレス」「パスワード」「CAPTCHAコード」を入力する
  2. ログインをクリックする
SWELL会員サイト「SWELLERS'」のログイン画面
STEP
「SWELL製品ダウンロード」まで下にスクロールする

今利用しているWordPressテーマの乗り換えサポートプラグインをクリックする

「SWELL製品ダウンロード」内にある乗り換えサポートプラグインのzipファイルをダウンロードできる場所

これでzipファイルがダウンロードされます。

STEP
WordPressにプラグインを導入・有効化する

WordPress管理画面を開き、プラグイン新規プラグインを追加の順にクリックする

「プラグイン」「新規プラグインを追加」がある場所
STEP
  1. プラグインのアップロードをクリックする
  2. ファイルを選択をクリックし、先ほどダウンロードしたzipファイルを選択する
  3. 今すぐインストールをクリックする
サポートプラグイン「Cocoon用」のzipファイルをインストールする手順
STEP

プラグインを有効化をクリックする

「プラグインを有効化」がある場所

これで乗り換えサポートプラグインの導入・有効化できます。

では実際に、テーマを乗り換えた後のデザインがどうなっているのか見ていきましょう。

乗り換えサポートプラグイン利用中のデザインの変化【Cocoon編】

SWELLの乗り換えサポートプラグインを利用すると旧テーマのデザインがどのように変化するのか、Cocoonテーマを例に見ていきます。

旧テーマ新テーマ
CocoonSWELL
これから比較する新旧のWordPressテーマ

Cocoonには専用のエディター機能が下記3つあり、すべてリライトする必要があります。

テーマ専用のエディター機能
  • Cocoon専用のブロック
  • Cocoon専用の装飾
  • Cocoon専用のツールバー

乗り換えサポートプラグインを利用すれば、上記3つの中でデザインが崩れるものと崩れないものがあります。

崩れるものから優先的にリライトして、崩れないものはゆっくりリライトするといいでしょう。

かめコンパス

デザインが崩れるものと崩れないものを前もって知りたい!

そこで3つあるCocoon専用のエディター機能それぞれに分けて、デザインの変化を詳しく解説していきます。

2024年8月に私の環境で調べた結果です。実際のデザインの状態はご自身のサイトをご確認ください。

比較1:Cocoon専用のブロック

Cocoon専用のブロック一覧

乗り換えサポートプラグインを利用してSWELLに変更するときの、Cocoon専用ブロックの変化は以下のとおりです。

クリックでタブを切り替える

CocoonからSWELLへ移行前のCocoon専用ブロックエディター「アイコンボックス」の表示例
乗り換えの「アイコンボックス
CocoonからSWELLへ移行後のCocoon専用ブロックエディター「アイコンボックス」の表示例
乗り換えの「アイコンボックス

各Cocoon専用ブロックのデザイン崩れの度合いとリライトの優先度を以下の表にまとめました。

デザイン崩れ:多い
リライトの優先度:高
  • ブログカード
  • ボタン
  • 囲みボタン
  • ランキング
  • テンプレート
  • ボックスメニュー
  • 広告
  • プロフィールボックス
  • 新着記事
  • 人気記事
  • 新着情報
  • ナビカード
  • タブ
  • CTA
デザイン崩れ:少ない
リライトの優先度:中
  • アコーディオン
  • 検索案内
  • タイムライン
  • アイコンリスト
  • FAQ
  • 見出しボックス
  • タブ見出しボックス
  • ラベルボックス
  • マイクロバルーン
  • マイクロテキスト
デザイン崩れ:ほぼなし
リライトの優先度:低
  • アイコンボックス
  • 案内ボックス
  • 白抜きボックス
  • 付箋風ボックス
  • タブボックス
  • ふきだし
  • 2カラム
  • 3カラム

Cocoon専用のブロックではデザイン崩れが多く見られました。

比較2:Cocoon専用の装飾

Cocoon専用の装飾一覧

乗り換えサポートプラグインを利用してSWELLに変更するときの、Cocoon専用装飾の変化は以下のとおりです。

クリックでタブを切り替える

CocoonからSWELLへ移行前のCocoon専用の装飾「ボーダー」の表示例
乗り換えの「ボーダー」
CocoonからSWELLへ移行後のCocoon専用の装飾「ボーダー」の表示例
乗り換えの「ボーダー」

各Cocoon専用装飾のデザイン崩れの度合いとリライトの優先度を以下の表にまとめました。

デザイン崩れ:多い
リライトの優先度:高
  • ボーダー
  • スタイル
デザイン崩れ:少ない
リライトの優先度:中
  • ブロック下余白
デザイン崩れ:ほぼなし
リライトの優先度:低
  • 特になし

Cocoon専用の装飾ではデザイン崩れが多く見られました。

比較3:Cocoon専用のツールバー

Cocoon専用のツールバー一覧

乗り換えサポートプラグインを利用してSWELLに変更するときの、Cocoon専用ツールバーの変化は以下のとおりです。

クリックでタブを切り替える

CocoonからSWELLへ移行前のCocoon専用のツールバー機能「文字」の表示例
乗り換えの「文字
CocoonからSWELLへ移行後のCocoon専用のツールバー機能「文字」の表示例
乗り換えの「文字

各Cocoon専用ツールバーのデザイン崩れの度合いとリライトの優先度を以下の表にまとめました。

デザイン崩れ:多い
リライトの優先度:高
  • 文字
  • ショートコード
  • テンプレート
  • アフィリエイトタグ
デザイン崩れ:少ない
リライトの優先度:中
  • マーカー
  • インラインタグ
  • 背景アイコン
  • ハイライト
デザイン崩れ:ほぼなし
リライトの優先度:低
  • フォントサイズ
  • 太字
  • イタリック
  • リンク
  • HTML挿入
  • ふりがな(ルビ)
  • インラインコード
  • インライン画像
  • キーボード入力
  • 上付き
  • 下付き
  • 打ち消し線
  • 脚注
  • 言語

Cocoon専用のツールバーではデザイン崩れが少なかったです。

SWELL専用エディター機能へのおすすめなリライト例【Cocoon編】

乗り換えサポートプラグイン利用中でもデザイン崩れが生じる項目が分かったら、Cocoon専用からSWELL専用のエディター機能へリライトしましょう。

ここで私が思うよく使われていそうなエディター10項目に絞って、SWELLへのおすすめなリライト例を紹介します。

Cocoon専用エディター機能
-リライト前-
SWELL専用エディター機能
-リライト後-
ブロック「ふきだし」 ブロック「ふきだし」
ブロック「アイコンボックス」
「案内ボックス」
「白抜きボックス」
「付箋風ボックス」
「タブボックス」
「見出しボックス」
「タブ見出しボックス」
「ラベルボックス」
ブロック「キャプションボックス」
ブロック「(囲み)ボタン」ブロック「SWELLボタン」
ブロック「広告」ブロック「記事内広告」
ブロック「ブログカード」ブロック「関連記事」
ブロック「タイムライン」ブロック「ステップ」
ブロック「マイクロバルーン」
「マイクロテキスト」
ツールバー「上付き」
「下付き」
ブロック「2カラム」
「3カラム」
ブロック「リッチカラム」
装飾「ボーダー」
「スタイル」
装飾「ボーダー設定」
「スタイル」
ツールバー「マーカー」
「太字」
ツールバー「マーカー」
「太字」

それぞれ解説します。

SWELL専用のエディター機能
WordPress管理画面にある「SWELL標準機能」
WordPress管理画面
SWELL記事編集画面にある「SWELL専用ブロック」「SWELL専用の装飾」「SWELL専用ツールバー」の場所
SWELL記事編集画面
  • SWELL標準機能
  • SWELL専用ブロック
  • SWELL専用の装飾
  • SWELL専用ツールバー

上記4つの中から選んでリライトしてください。

テーマ専用のエディター項目はすべてリライトが必要です。本記事では10つ紹介しますが、それ以外のエディター項目もリライトしてください。

「ふきだし」はSWELL対応に置き換える

Cocoon専用のブロック「ふきだし」をSWELL専用のブロック「ふきだし」に置き換えましょう。

Cocoon専用ブロックエディター「ふきだし」の表示例
Cocoonブロック「ふきだし」
SWELL専用ブロックエディター「ふきだし」の表示例
SWELLブロック「ふきだし」

「〇〇ボックス」は「キャプションボックス」に置き換える

Cocoon専用のボックスブロックは全8種類あり、すべてSWELL専用のブロック「キャプションボックス」に置き換えてください。

Cocoon専用のボックスブロック
  • アイコンボックス
  • 案内ボックス
  • 白抜きボックス
  • 付箋風ボックス
  • タブボックス
  • 見出しボックス
  • タブ見出しボックス
  • タブ見出しボックス
Cocoon専用ブロックエディター「〇〇ボックス」の表示例
Cocoonブロック「〇〇ボックス」
SWELL専用ブロックエディター「キャプションボックス」の表示例
SWELLブロック「キャプションボックス」

「(囲み)ボタン」は「SWELLボタン」に置き換える

Cocoon専用のブロック「ボタン」「囲みボタン」をSWELL専用のブロック「SWELLボタン」に置き換えます。

Cocoon専用ブロックエディター「(囲み)ボタン」の表示例
Cocoonブロック「(囲み)ボタン」
SWELL専用ブロックエディター「SWELLボタン」の表示例
SWELLブロック「SWELLボタン」

「広告」は「記事内広告」に置き換える

Cocoon専用のブロック「広告」はSWELL専用のブロック「記事内広告」に置き換えましょう。

Cocoon専用ブロックエディター「広告」の表示例
Cocoonブロック「広告」
SWELL専用ブロックエディター「記事内広告」の表示例
SWELLブロック「記事内広告」

「ブログカード」は「関連記事」に置き換える

Cocoon専用のブロック「ブログカード」をSWELL専用のブロック「関連記事」に置き換えてください。

Cocoon専用ブロックエディター「ブログカード」の表示例
Cocoonブロック「ブログカード」
SWELL専用ブロックエディター「関連記事」の表示例
SWELLブロック「関連記事」

「タイムライン」は「ステップ」に置き換える

Cocoon専用のブロック「タイムライン」をSWELL専用のブロック「ステップ」に置き換えます。

Cocoon専用ブロックエディター「タイムライン」の表示例
Cocoonブロック「タイムライン」
SWELL専用ブロックエディター「ステップ」の表示例
SWELLブロック「ステップ」

「マイクロバルーン」「マイクロテキスト」は「上付き」「下付き」に置き換える

Cocoon専用のブロック「マイクロバルーン」「マイクロテキスト」はSWELL専用のツールバー「上付き」「下付き」に置き換えましょう。

Cocoon専用ブロックエディター「マイクロバルーン」「マイクロテキスト」の表示例
Cocoonブロック「マイクロバルーン」「マイクロテキスト」
SWELL専用ツールバー「上付き」「下付き」の表示例
SWELLツールバー「上付き」「下付き」

「2カラム」「3カラム」は「リッチカラム」に置き換える

Cocoon専用のブロック「2カラム」「3カラム」をSWELL専用のブロック「リッチカラム」に置き換えてください。

Cocoon専用ブロックエディター「2カラム」「3カラム」の表示例
Cocoonブロック「2カラム」「3カラム」
SWELL専用ブロックエディター「リッチカラム」の表示例
SWELLブロック「リッチカラム」

「ボーダー」「スタイル」はSWELL対応に置き換える

Cocoon専用の装飾「ボーダー」「スタイル」はSWELL専用の装飾「ボーダー設定」「スタイル」に置き換えます。

Cocoon専用の装飾「ボーダー」の表示例
Cocoon装飾「ボーダー」
SWELL専用の装飾「ボーダー設定」の表示例
SWELL装飾「ボーダー設定」
Cocoon専用の装飾「スタイル」の表示例
Cocoon装飾「スタイル」
SWELL専用の装飾「スタイル」の表示例
SWELL装飾「スタイル」

「マーカー」「太字」はSWELL対応に置き換える

Cocoon専用のツールバー「マーカー」「太字」をSWELL専用のツールバー「マーカー」「太字」に置き換えましょう。

Cocoon専用のツールバー「マーカー」「太字」の表示例
Cocoonツールバー「マーカー」「太字」
SWELL専用のツールバー「マーカー」「太字」の表示例
SWELLツールバー「マーカー」「太字」

リライト後は乗り換えサポートプラグインの削除を忘れずに!

デザイン崩れを修正し終えたら、乗り換えサポートプラグインを削除しましょう。

乗り換えサポートプラグインをそのまま残しておくと、

  • SWELLと旧テーマの両方を読み込むのでサイトが重くなる
  • 単純にプラグイン数が1つ増えるのでサイトが重くなる

からです。

つまりサイトの表示速度が遅くなり、ユーザーの利便性を損ねてしまったり、SEO評価に悪影響を及ぼす可能性も出てきます。

かめコンパス

デザイン修正後は残しておいても意味ないよ

ですので、デザイン崩れを修正し終えたら乗り換えサポートプラグインを削除しましょう。

クリックで開く

プラグインの削除方法はこちら
STEP

プラグインインストール済みプラグインの順にクリックする

「プラグイン」「インストール済みプラグイン」がある場所
STEP

乗り換えサポートプラグインの無効化をクリックする

乗り換えサポートプラグインの「無効化」がある場所
STEP

削除をクリックする

乗り換えサポートプラグインの「削除」がある場所

これでプラグインを削除できます

SWELLの乗り換えサポートプラグインでよくある質問

ここからはSWELLの乗り換えサポートプラグインでよくある質問に回答します。

かめコンパス

気になる質問をクリックしてね

乗り換えサポートプラグインがないテーマでも乗り換えできますか?

はい、乗り換えできます。

ただ乗り換えサポートプラグインがないテーマでは、そのテーマ専用のデザインがすべて崩れます。ですのでリライトする時間を多く用意し、なるべく早めに修正してください。

かめコンパス

私の場合、プラグインがあるCocoonでも1記事30分もかかったよ

乗り換えサポートプラグインがないテーマで乗り換えるときの注意点は?

プラグインがないテーマで乗り換えるときの注意点は下記3つです。

  • デザイン崩れが多く、急いでリライトしないといけない
  • リライトが遅れると、デザイン崩れが原因で利便性が悪くなる
  • デザイン崩れにより、ページの滞在時間が減る可能性がある
かめコンパス

乗り換え前にある程度どんなふうにリライトするか決めるといいね

SWELLの乗り換えサポートプラグインまとめ

今回は、他WordPressテーマからSWELLへの乗り換えサポートプラグインの機能性について紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

SWELLのテーマ乗り換えサポートプラグインの記事

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

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

コメント

コメントする

目次