SWELLのテーマ乗り換えサポートプラグインでデザイン崩れを最小限に!おすすめなリライト例も紹介
「乗り換えサポートプラグインとは?」
「なるべくデザインを崩さずに他テーマから変更したい」
「乗り換えサポートプラグインを利用したときのデザインの変化は?」
この記事では、そんな方に向けて、他WordPressテーマからSWELLへの乗り換えサポートプラグインの機能性について解説します。
こんにちは、かめコンパスです!
この記事を読めば、あなたも簡単に
- デザイン崩れを最小限に抑えてテーマ乗り換えできる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、他テーマからSWELLへ完全移行できました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!
\SWELL購入を検討中の人はこちらもご覧ください!/
SWELLの乗り換えサポートプラグインとは?
SWELLの乗り換えサポートプラグインとは、旧テーマ(=今利用しているテーマ)のデザインを最低限維持したまま新テーマ(=SWELL)へ乗り換えることができるプラグインです。
通常テーマを乗り換える場合、
- 過去に書いた記事で利用している装飾をすべてリライトする
- 広告コードや独自のCSSコードなどを新テーマに再追加する
- GoogleサーチコンソールやGoogleアナリティクスを再設定する
といった作業が必要になります。
これらの作業のうち、過去に書いた記事で利用している装飾をなるべく崩さず、自分のペースでリライトを進めることを可能にするのが乗り換えサポートプラグインの役目になります。
これがメチャクチャ便利!
SWELL公式サイトでも紹介されているので、あわせて見てみてください。
公式サイト:他テーマからSWELLへの「乗り換えサポートプラグイン」一覧
乗り換えサポートプラグインがあるテーマとないテーマ
SWELLの乗り換えサポートプラグインがあるテーマとないテーマは以下のとおりです。
あるテーマ | 乗り換えサポートプラグインがないテーマ | 乗り換えサポートプラグインの
---|---|
Cocoon | Lightning |
JIN | Snow Monkey |
SANGO | Emanon Premium |
STORK | Astra |
THE THOR | 賢威 |
AFFINGER5 | ここに書かれていないテーマ |
今は6テーマしか対応していないが随時増やしていくらしいよ
プラグインがないテーマだと乗り換えができないのかというとそうではありません。
時間と手間はかかりますが、すべてのWordPressテーマで乗り換えは可能です。
つぎに乗り換えサポートプラグインを利用する場合としない場合の違いを見ていきましょう。
乗り換えサポートプラグインを利用する場合としない場合の違い
SWELLの乗り換えサポートプラグインを利用する場合としない場合の違いを以下にまとめてみました。
- デザイン崩れが最小限に抑えられる
- ゆっくりリライトできる
- 優先順位を付けてリライトできる
- プラグイン利用中はサイトが重くなる
- 旧テーマ専用のデザインがすべて崩れる
- 急いでリライトしないといけない
- 片っ端からリライトせざるを得ない
- 新テーマで利用できない装飾がすべて分かる
このようにメリット・デメリットはありますが、基本的にプラグインを利用できるテーマであれば利用しましょう。
プラグインを利用して優先度の高さに応じてリライトできる点が個人的に良かったよ
SWELLで乗り換えサポートプラグインを導入・有効化する方法
乗り換えサポートプラグインを導入するには、WordPressテーマ「SWELL」を購入する必要があります。
SWELL紹介記事:SWELLの評判レビュー|メリットとデメリットも紹介
SWELLの購入がまだの人は、以下のボタンからダウンロードしてください。
\ここからSWELL購入画面へジャンプ!/
SWELLの購入・インストール手順は、下の記事を参考にしてください。
SWELLの購入・導入を終えている人は、下記の方法で乗り換えサポートプラグインを導入・有効化していきましょう。
今利用しているWordPressテーマの乗り換えサポートプラグインをクリックする
これでzipファイルがダウンロードされます。
WordPress管理画面を開き、プラグイン⇒新規プラグインを追加の順にクリックする
- プラグインのアップロードをクリックする
- ファイルを選択をクリックし、先ほどダウンロードしたzipファイルを選択する
- 今すぐインストールをクリックする
プラグインを有効化をクリックする
これで乗り換えサポートプラグインの導入・有効化できます。
では実際に、テーマを乗り換えた後のデザインがどうなっているのか見ていきましょう。
乗り換えサポートプラグイン利用中のデザインの変化【Cocoon編】
SWELLの乗り換えサポートプラグインを利用すると旧テーマのデザインがどのように変化するのか、Cocoonテーマを例に見ていきます。
旧テーマ | 新テーマ |
---|---|
Cocoon | SWELL |
Cocoonには専用のエディター機能が下記3つあり、すべてリライトする必要があります。
- Cocoon専用のブロック
- Cocoon専用の装飾
- Cocoon専用のツールバー
乗り換えサポートプラグインを利用すれば、上記3つの中でデザインが崩れるものと崩れないものがあります。
崩れるものから優先的にリライトして、崩れないものはゆっくりリライトするといいでしょう。
デザインが崩れるものと崩れないものを前もって知りたい!
そこで3つあるCocoon専用のエディター機能それぞれに分けて、デザインの変化を詳しく解説していきます。
比較1:Cocoon専用のブロック
乗り換えサポートプラグインを利用してSWELLに変更するときの、Cocoon専用ブロックの変化は以下のとおりです。
\クリックでタブを切り替える/
各Cocoon専用ブロックのデザイン崩れの度合いとリライトの優先度を以下の表にまとめました。
リライトの優先度:高
- ブログカード
- ボタン
- 囲みボタン
- ランキング
- テンプレート
- ボックスメニュー
- 広告
- プロフィールボックス
- 新着記事
- 人気記事
- 新着情報
- ナビカード
- タブ
- CTA
リライトの優先度:中
- アコーディオン
- 検索案内
- タイムライン
- アイコンリスト
- FAQ
- 見出しボックス
- タブ見出しボックス
- ラベルボックス
- マイクロバルーン
- マイクロテキスト
リライトの優先度:低
- アイコンボックス
- 案内ボックス
- 白抜きボックス
- 付箋風ボックス
- タブボックス
- ふきだし
- 2カラム
- 3カラム
Cocoon専用のブロックではデザイン崩れが多く見られました。
比較2:Cocoon専用の装飾
乗り換えサポートプラグインを利用してSWELLに変更するときの、Cocoon専用装飾の変化は以下のとおりです。
\クリックでタブを切り替える/
各Cocoon専用装飾のデザイン崩れの度合いとリライトの優先度を以下の表にまとめました。
リライトの優先度:高
- ボーダー
- スタイル
リライトの優先度:中
- ブロック下余白
リライトの優先度:低
- 特になし
Cocoon専用の装飾ではデザイン崩れが多く見られました。
比較3:Cocoon専用のツールバー
乗り換えサポートプラグインを利用してSWELLに変更するときの、Cocoon専用ツールバーの変化は以下のとおりです。
\クリックでタブを切り替える/
各Cocoon専用ツールバーのデザイン崩れの度合いとリライトの優先度を以下の表にまとめました。
リライトの優先度:高
- 文字
- ショートコード
- テンプレート
- アフィリエイトタグ
リライトの優先度:中
- マーカー
- インラインタグ
- 背景アイコン
- ハイライト
リライトの優先度:低
- フォントサイズ
- 太字
- イタリック
- リンク
- HTML挿入
- ふりがな(ルビ)
- インラインコード
- インライン画像
- キーボード入力
- 上付き
- 下付き
- 打ち消し線
- 脚注
- 言語
Cocoon専用のツールバーではデザイン崩れが少なかったです。
SWELL専用エディター機能へのおすすめなリライト例【Cocoon編】
乗り換えサポートプラグイン利用中でもデザイン崩れが生じる項目が分かったら、Cocoon専用からSWELL専用のエディター機能へリライトしましょう。
ここで私が思うよく使われていそうなエディター10項目に絞って、SWELLへのおすすめなリライト例を紹介します。
-リライト前- | Cocoon専用エディター機能 SWELL専用エディター機能 -リライト後- | ||
---|---|---|---|
ブロック | 「ふきだし」 | ブロック | 「ふきだし」 |
ブロック | 「案内ボックス」 「白抜きボックス」 「付箋風ボックス」 「タブボックス」 「見出しボックス」 「タブ見出しボックス」 「ラベルボックス」 | 「アイコンボックス」ブロック | 「キャプションボックス」 |
ブロック | 「(囲み)ボタン」 | ブロック | 「SWELLボタン」 |
ブロック | 「広告」 | ブロック | 「記事内広告」 |
ブロック | 「ブログカード」 | ブロック | 「関連記事」 |
ブロック | 「タイムライン」 | ブロック | 「ステップ」 |
ブロック | 「マイクロテキスト」 | 「マイクロバルーン」ツールバー | 「下付き」 「上付き」 |
ブロック | 「3カラム」 | 「2カラム」ブロック | 「リッチカラム」 |
装飾 | 「スタイル」 | 「ボーダー」装飾 | 「スタイル」 「ボーダー設定」 |
ツールバー | 「太字」 | 「マーカー」ツールバー | 「太字」 「マーカー」 |
それぞれ解説します。
- SWELL標準機能
- SWELL専用ブロック
- SWELL専用の装飾
- SWELL専用ツールバー
上記4つの中から選んでリライトしてください。
「ふきだし」はSWELL対応に置き換える
Cocoon専用のブロック「ふきだし」をSWELL専用のブロック「ふきだし」に置き換えましょう。
「〇〇ボックス」は「キャプションボックス」に置き換える
Cocoon専用のボックスブロックは全8種類あり、すべてSWELL専用のブロック「キャプションボックス」に置き換えてください。
- アイコンボックス
- 案内ボックス
- 白抜きボックス
- 付箋風ボックス
- タブボックス
- 見出しボックス
- タブ見出しボックス
- タブ見出しボックス
キャプションボックスブロックの使い方は、下の記事を参考にしてください。
「(囲み)ボタン」は「SWELLボタン」に置き換える
Cocoon専用のブロック「ボタン」「囲みボタン」をSWELL専用のブロック「SWELLボタン」に置き換えます。
SWELLボタンブロックの使い方は、下の記事を参考にしてください。
「広告」は「記事内広告」に置き換える
Cocoon専用のブロック「広告」はSWELL専用のブロック「記事内広告」に置き換えましょう。
「ブログカード」は「関連記事」に置き換える
Cocoon専用のブロック「ブログカード」をSWELL専用のブロック「関連記事」に置き換えてください。
「タイムライン」は「ステップ」に置き換える
Cocoon専用のブロック「タイムライン」をSWELL専用のブロック「ステップ」に置き換えます。
「マイクロバルーン」「マイクロテキスト」は「上付き」「下付き」に置き換える
Cocoon専用のブロック「マイクロバルーン」「マイクロテキスト」はSWELL専用のツールバー「上付き」「下付き」に置き換えましょう。
「2カラム」「3カラム」は「リッチカラム」に置き換える
Cocoon専用のブロック「2カラム」「3カラム」をSWELL専用のブロック「リッチカラム」に置き換えてください。
リッチカラムブロックの使い方は、下の記事を参考にしてください。
「ボーダー」「スタイル」はSWELL対応に置き換える
Cocoon専用の装飾「ボーダー」「スタイル」はSWELL専用の装飾「ボーダー設定」「スタイル」に置き換えます。
「マーカー」「太字」はSWELL対応に置き換える
Cocoon専用のツールバー「マーカー」「太字」をSWELL専用のツールバー「マーカー」「太字」に置き換えましょう。
リライト後は乗り換えサポートプラグインの削除を忘れずに!
デザイン崩れを修正し終えたら、乗り換えサポートプラグインを削除しましょう。
乗り換えサポートプラグインをそのまま残しておくと、
- SWELLと旧テーマの両方を読み込むのでサイトが重くなる
- 単純にプラグイン数が1つ増えるのでサイトが重くなる
からです。
つまりサイトの表示速度が遅くなり、ユーザーの利便性を損ねてしまったり、SEO評価に悪影響を及ぼす可能性も出てきます。
デザイン修正後は残しておいても意味ないよ
ですので、デザイン崩れを修正し終えたら乗り換えサポートプラグインを削除しましょう。
\クリックで開く/
プラグインの削除方法はこちら
プラグイン⇒インストール済みプラグインの順にクリックする
乗り換えサポートプラグインの無効化をクリックする
削除をクリックする
これでプラグインを削除できます
SWELLの乗り換えサポートプラグインでよくある質問
ここからはSWELLの乗り換えサポートプラグインでよくある質問に回答します。
気になる質問をクリックしてね
SWELLの乗り換えサポートプラグインまとめ
今回は、他WordPressテーマからSWELLへの乗り換えサポートプラグインの機能性について紹介しました。
当ブログでは、SWELLに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
ためになったという人は“コメント”してくれると嬉しいです!
コメント