MENU
さとしん
WordPressが好きで毎日触って勉強しています。ブロックエディターに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

SWELLのテーマ乗り換えサポートプラグインの凄さを画像付きで紹介!

WordPressテーマ「SWELL」にはテーマの乗り換えをサポートしてくれるプラグインがあります。

他テーマからSWELLに移行する時の負担を軽減してくれるとても素敵なプラグインです。

本来、テーマの変更はとても大変ですが、このサポートプラグインを使うことで余裕をもったテーマ変更ができるようになります。

このプラグインは本当にすごいです…!
この記事の内容まとめ
  • テーマ乗り換えサポートプラグインの紹介
  • プラグインを使った場合の装飾の実例紹介
  • SWELLブロックへのリライト方法の紹介

SWELLへの乗り換えを検討している方の背中を押してくれるプラグインだと思います。

さとしん

記事内では、実際のプラグインを使った効果も画像付きで解説します…!

目次

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

SWELLテーマ乗り換えサポートプラグインは、旧テーマのデザインをある程度維持したままSWELLを使うことができるようになるプラグインです。

以下、公式サイトでも詳しく説明されているので見てみてください。

さとしん

これは本当にありがたく素晴らしいプラグインです…!

現状、以下のテーマからの乗り換えプラグインが用意されています。

  • Cocoon
  • JIN
  • SANGO
  • STORK
  • THE THOR
  • AFFINGER5

テーマを変更する際、通常は旧テーマの装飾、デザインを引き継ぐことができません。

そのため、テーマ移行直後は装飾が無く読みにくい記事になってしまうことがあるので、大急ぎでリライトする必要があります。

WordPress側で用意しているブロックや装飾はテーマを変更しても引き継がれます。

実際にCocoonからSWELLにテーマを乗り換えた動画を撮ってみたので見てみてください。

動画では以下の順でテーマやプラグインを切り替えています。

  1. Cocoon
  2. SWELL(プラグイン未使用状態)
  3. SWELL(プラグインを使用)

乗り換えサポートプラグインを使用しないと、全ての装飾が消えてしまっています。

一方で、乗り換えサポートプラグインを有効化すると、Cocoonのデザインが引き継がれているのが分かると思います。

さとしん

これが乗り換えサポートプラグインの威力です…!

ひとつだけ覚えておいていただきたいことは、本来テーマの乗り換えはもの凄く大変な作業だということです。これは全てのテーマに当てはまります。

その中でSWELLは、乗り換えサポートプラグインがあることでかなり負担を減らすことができます。

さとしん

これは本当にすごいことですよ…!

サポートプラグインの使い方

まず、テーマ乗り換えサポートプラグインの使い方をご紹介しておきます。

さとしん

といっても、単純にプラグインを有効化するだけなのでとても簡単です…!

事前にSWELLの購入を完了させる必要があります。以下ダウンロードページから処理を進めます。

SWELL購入の詳しい流れは以下リンク先でも説明しています。
>>SWELLの導入&有効化まで の手順

SWELLの導入が完了している方は、以下の手順でプラグインのダウンロードから有効化まで進めていきましょう。

STEP
SWELLERS’の製品ダウンロードページへ進む

ログインしていない場合は、ログインしてください。

\ ここからDLできます! /

他テーマからSWELLへの移行-1
STEP
旧テーマの乗り換えサポート用プラグインをクリック

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

他テーマからSWELLへの移行-2
STEP
管理画面→「プラグイン」→「新規追加」→「プラグインのアップロード」をクリック
Cocoonからの乗り換え用サポートプラグインのインストール-0
STEP
「ファイルを選択」欄でzipファイルを選択して「今すぐインストール」をクリック
Cocoonからの乗り換え用サポートプラグインのインストール-1
STEP
サポートプラグインを有効化
Cocoonからの乗り換え用サポートプラグインのインストール-2

この手順が完了した後にSWELLを有効化しましょう。

これで旧テーマのデザインをある程度維持したまま、SWELLにテーマを乗り換えることができます。

乗り換えサポートプラグインの効果をCocoonを例に紹介!

実際にサポートプラグインを使用すると、旧テーマのデザインがどのように表示されるか、無料テーマ「Cocoon」を例に画像付きで紹介していきます。

CocoonからSWELLへの移行サポートプラグインは以下の公式マニュアルに詳しい説明があります。

全く崩れないものと、少し崩れるもの、それぞれが分かればSWELL移行後にリライトする優先順位を付けることができます。

さとしん

ぜひ参考にしてください…!

あくまで僕の環境での結果なので、異なる点もあるかもしれません。必ずご自身のサイトの状態をご確認ください。

確認を実施した環境
  • WordPress:バージョン5.8
  • Cocoon:バージョン2.3.4
  • Cocoon Child:バージョン1.1.3
  • SWELL:バージョン2.4.1.1
  • 【SWELL】乗り換えサポート from Cocoon:バージョン1.1.2

※全て、2021年8/18時点の最新バージョン

僕の環境では、以下のコンテンツの装飾が一部崩れました。

  • 文字色、太字
  • 見出しボックス
  • タブ見出しボックス
  • ラベルボックス
  • ふきだし
  • Cocoonボタン
  • 囲みボタン
  • 人気記事一覧
  • ナビカード一覧
  • プロフィールボックス
  • ページ読み込み時の日付
  • Amazonリンク
  • 楽天リンク
  • FAQ(寄付特典)
  • HTML挿入ボタン(寄付特典)
  • 更新日ショートコード(寄付特典)

リライトが必須なもの、気になるならリライトした方が良いものと、コンテンツの状態は様々なのでご自身の環境で一度確認をしてリライトするかどうか判断してもらえれば良いかなと思います。

CocoonのデザインとSWELL移行後のデザインを並べて紹介していくので、移行時の参考にしてください。

赤背景にしている部分は急ぎリライトした方がよさそうなコンテンツです。

文字装飾系のコンテンツ

まずは、文字装飾系のコンテンツから見ていきましょう。

文字色+太字

Cocoon

文字色+太字装飾-1

SWELL移行後

文字色+太字装飾-2

テキストの文字色と太字の装飾はデザインが維持されません。 キーボードキーの装飾のみ装飾が引き継がれました。

ちなみに上記はブロックツールバーの「A」タブから設定した装飾です。

文字色+太字装飾-3

ツールバーの「B」タブもしくは、Ctrl+Bで太字にした装飾は移行後も引き継がれます。

マーカー

Cocoon

Cocoonのマーカー

SWELL移行後

SWELL移行後のマーカー

バッジ

Cocoon

Cocoonのバッジ

SWELL移行後

SWELL移行後のバッジ

フォントサイズ

Cocoon

Cocoonのフォントサイズ

SWELL移行後

SWELL移行後のフォントサイズ

ショートコード

新着記事一覧

Cocoon

Cocoonの新着記事一覧

SWELL移行後

SWELL移行後の新着記事一覧

人気記事一覧

Cocoon

Cocoonの人気記事一覧

SWELL移行後

SWELL移行後の人気記事一覧

ナビカード一覧

Cocoon

Cocoonのナビカード一覧

SWELL移行後

SWELL移行後のナビカード一覧

プロフィールボックス

Cocoon

Cocoonのプロフィールボックス

SWELL移行後

SWELL移行後のプロフィールボックス

過去日時&過去日時(年)

Cocoon

Cocoonの過去日時
Cocoonの過去日時(年)

SWELL移行後

SWELL移行後の過去日時
SWELL移行後の過去日時

ページ読み込み時の日付

Cocoon

Cocoonのページ読み込み時の日付

SWELL移行後

SWELL移行後のページ読み込み時の日付

カウントダウン

Cocoon

Cocoonのカウントダウン

SWELL移行後

SWELL移行後のカウントダウン

評価スター

Cocoon

Cocoonの評価スター

SWELL移行後

SWELL移行後の評価スター

ログインコンテンツ

Cocoon

Cocoonのログインコンテンツ

SWELL移行後

SWELL移行後のログインコンテンツ

テンプレート

Cocoon

Cocoonのテンプレート

SWELL移行後

SWELL移行後のテンプレート

アフィリエイトタグ

Cocoon

Cocoonのアフィリエイトタグ

SWELL移行後

SWELL移行後のアフィリエイトタグ

更新日ショートコード(寄付特典)

Cocoon

Cocoonの更新日ショートコード

SWELL移行後

SWELL移行後の更新日ショートコード

HTML挿入ボタン(寄付特典)

Cocoon

CocoonのHTML挿入ボタン

SWELL移行後

SWELL移行後のHTML挿入ボタン

Cocoonブロック

アイコンボックス

Cocoon

Cocoonのアイコンボックス

SWELL移行後

SWELL移行後のアイコンボックス

Cocoon

Cocoonのアイコンボックス-2

SWELL移行後

SWELL移行後のアイコンボックス-2

Cocoon

Cocoonのアイコンボックス-3

SWELL移行後

SWELL移行後のアイコンボックス-3

案内ボックス

Cocoon

Cocoonの案内ボックス

SWELL移行後

SWELL移行後の案内ボックス

Cocoon

Cocoonの案内ボックス-2

SWELL移行後

SWELL移行後の案内ボックスー2

白抜きボックス

Cocoon

Cocoonの白抜きボックス

SWELL移行後

SWELL移行後の白抜きボックス

付箋風ボックス

Cocoon

Cocoonの付箋風ボックス

SWELL移行後

SWELL移行後の付箋風ボックス

Cocoon

Cocoonの付箋風ボックス-2

SWELL移行後

SWELL移行後の付箋風ボックス-2

タブボックス

Cocoon

Cocoonの白抜きボックス

SWELL移行後

SWELL移行後のタブボックス

ふきだし

PC表示で見ると特に違和感なく問題ないかと思います。

Cocoon

ふきだし-1

SWELL移行後

ふきだし-2

SWELL移行後、スマホ表示のふきだしは以下画像のようなイメージになります。

少し窮屈な印象にはなるので、気になる方は急ぎリライトしてあげましょう。

ふきだし-3
スマホで見たときのふきだし
ふきだし-4
スマホで見たときのふきだし

ブログカード

Cocoon

Cocoonのブログカード

SWELL移行後

SWELL移行後のブログカード

ボタン

Cocoon

Cocoonのボタン

SWELL移行後

SWELL移行後のボタン

囲みボタン

Cocoon

Cocoonの囲みボタン

SWELL移行後

SWELL移行後の囲みボタン

アコーディオン(トグル)

Cocoon

Cocoonのアコーディオン(トグル)

SWELL移行後

SWELL移行後のアコーディオン(トグル)

検索案内

Cocoon

Cocoonの検索案内

SWELL移行後

SWELLの検索案内

タイムライン

Cocoon

Cocoonのタイムライン

SWELL移行後

SWELL移行後のタイムライン

アイコンリスト

Cocoon

Cocoonのアイコンリスト

SWELL移行後

SWELL移行後のアイコンリスト

FAQ

Cocoon

CocoonのFAQ

SWELL移行後

SWELL移行後のFAQ

Cocoon汎用ブロック

見出しボックス、タブ見出しボックス、ラベルボックス

Cocoon

ボックス系装飾-1

SWELL移行後

ボックス系装飾-2

Cocoonマイクロコピー

マイクロバルーン&マイクロテキスト

Cocoon

Cocoonのマイクロコピー

SWELL移行後

SWELL移行後のマイクロコピー

Cocoonレイアウト

2カラム、3カラム

Cocoon

Cocoonの2カラム、3カラム

SWELL移行後

SWELL移行後の2カラム、3カラム

SWELLブロックへのおすすめリライト方法

最終的には旧テーマの装飾は全てSWELLのスタイルに直して、サポートプラグインを停止することを推奨します。

サポートプラグインを有効化している間は、旧テーマとSWELLの2つのテーマを読み込むことになるので、処理が増えて動作が重くなってしまう可能性があります。

大急ぎで対応する必要はないですが、ゆっくりでもSWELLのスタイルにリライトをしていきましょう。

ここでは、先ほどのCocoonのスタイルをSWELLのどんなスタイルに置き換えていくか、それぞれ例を紹介したいと思います。

この記事ではSWELLの各ブロックを詳しく説明しないので、詳細は以下の記事を見てみてください。

SWELLのブロックエディターの機能について動画付きで詳しく紹介しています。

段落ブロック

SWELLの段落ブロックは、サイドバーから多数のスタイルをクリック操作だけで設定できます。

さとしん

段落ブロックのスタイルを設定できるのは本当に助かります…!

Cocoonの以下コンテンツは、SWELLの段落ブロックに置き換えるのもいいと思います。

  • アイコンボックス
  • 案内ボックス
  • 白抜きボックス
  • 付箋風ボックス

SWELLの段落ブロックを使っている動画を用意しました。

段落ブロックで使える装飾については以下公式マニュアルでも紹介されています。

キャプション付きブロック

SWELLのキャプション付きブロックでは、見出し付きのボックススタイルを複数パターン作ることができます。

Cocoonの以下コンテンツは、SWELLのキャプション付きブロックで再現できます。

  • タブボックス
  • 見出しボックス
  • タブ見出しボックス
  • ラベルボックス

キャプション付きブロックは複数のスタイルを設定することができたり、アイコンもクリックだけで自由に切り替えられます。

キャプション付きブロックを使っている動画を用意しました。

さとしん

キャプション付きブロックはかなり活躍します…!

キャプション付きブロックの公式マニュアルは以下です。

ふきだしブロック

ふきだしブロックもSWELLには用意されています。

SWELLのふきだしブロックは、事前に管理画面からアイコンやデザインの設定をしておくことができます。

そのため、記事内でふきだしを使用するときもボタン操作だけで簡単に呼び出すことができます。

さとしん

毎回アイコンを設定する必要がないのでかなり時短になります…!

ふきだしブロックの公式マニュアルは以下です。

SWELLボタンブロック

WordPress側で用意しているボタンブロックとは別に、SWELLボタンブロックというオリジナルのブロックがあります。

Cocoonのボタンブロック、囲みボタンブロックはSWELLボタンブロックに置き換えるのがおすすめです。

SWELLのボタンブロックでは、HTMLタグをそのまま貼り付けることができます。

さとしん

コードを改変することなくボタンリンクを作れます…!

その他にも、クリック率の計測機能が付いていたり、スタイルも複数選択できるのでかなり便利なブロックです。

SWELLボタンブロックの公式マニュアルは以下です。

ステップブロック

SWELLにはステップブロックというブロックがあります。

物事を順序立てて説明したいときや、時系列順で表示したいときに便利です。

Cocoonのタイムラインブロックは、ステップブロックに置き換えるといいと思います。

更にステップブロックでは、スタイルも3パターン選べるのでより見せ方の幅が広がるかなと思います。

ステップブロックの公式マニュアルは以下です。

関連記事ブロック

内部リンク、外部リンクともにブログカードを設置したいときは関連記事ブロックが便利です。

Cocoonのブログカードは関連記事ブロックに置き換えることができます。

関連記事ブロックは、リンクをテキスト表示にできたりなど、かなり多彩な設定が可能です。

以下の動画のようなイメージでリンクを設置することができます。

さとしん

簡単にブログカードを作れるので重宝しています…!

関連記事ブロックの公式マニュアルは以下です。

投稿リストブロック

SWELLにはいろいろなパターンで記事一覧を表示してくれる投稿リストブロックがあります。

さとしん

トップページのカスタマイズで大活躍です…!

Cocoonの以下コンテンツは投稿リストブロックに置き換えることができます。

  • 新着記事一覧
  • 人気記事一覧
  • ナビカード一覧

SWELLの投稿リストブロックは、例えば以下の様に表示する記事の条件を指定できます。

  • 新着順
  • 人気順
  • 更新順
  • ランダム
  • カテゴリー別
  • タグ別
  • 記事ID

記事一覧の表示スタイルも複数から選択できます。

動画を見てもらうと投稿リストブロックの便利さが伝わるかなと思います。

投稿リストブロックの公式マニュアルは以下です。

テーマ移行は早い方が良い!でもSWELLなら…!

今回はSWELLにテーマを移行する時に大活躍する、テーマ乗り換えサポートプラグインを紹介しました。

本来、テーマ移行はとても大変な作業です。これはSWELLに限らず全てのテーマに共通することです。

記事数が増えれば増えるほど、移行後の修正作業の量が増えるので、なるべく早い段階で移行を決断するのがおすすめです。

ですが、SWELLの乗り換えサポートプラグインを活用することで、旧テーマのスタイルをある程度維持したまま、SWELLを使い始めることができます。

さとしん

テーマ移行直後の修正作業の負担がグッと減って楽になります…!

大変な旧テーマのスタイルを修正する作業をゆっくり進められるようになるので、安心してテーマの乗り換えができるかなと思います。

SWELLへの乗り換えを検討している方は、ぜひ乗り換えサポートプラグインを活用してスムーズに移行を完了させましょう。

CocoonからSWELLへの移行手順は以下の記事で詳しくまとめました。

さとしん

Cocoon以外のテーマでも手順は基本的に同じなので参考にしてください…!

最後まで読んでいただきありがとうございました。


SWELL公式サイトはこちらからどうぞ…!

SWELL

SWELLのレビュー記事はこちら↓↓

>>SWELLのブロックエディタは使い心地が最高でした【WordPressテーマレビュー】

SWELLの基本的な設定や使い方はこちら↓↓

>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

SWELLのブロックエディターについて↓↓

>>SWELLのブロックエディターは使い心地が最高!充実の機能を動画で紹介!

SWELLでトップページをカスタマイズする方法↓↓

>>【SWELL】トップページをおしゃれなサイト型にカスタマイズする!

SWELLで作られたサイト集↓↓

>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

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

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