JINからSWELLへの移行手順や注意点を紹介!準備をしっかりして移行に取り掛かろう!

有料テーマ「JIN」から有料テーマ「SWELL」に移行する方法を紹介します。

有料テーマから有料テーマへの移行を決断するのはかなり勇気が必要だったと思います。
安い買い物ではないですし…。

さとしん

でも、SWELLへの移行はきっと後悔しないと僕は思っています…!

ご存知の方も多いと思いますが、SWELLには他テーマからの移行用プラグインがあり、移行時の負担をかなり軽減してくれます。

ただ、それでも移行作業はやはり大変ですし、SWELL移行前に確認しておいた方が良い項目や注意点もあります。

この記事では、思い切って決断したJINからSWELLへの移行が不具合なくスムーズに進められるように、単純な移行手順に加えて、移行時の注意点なども紹介していきます。

みにしん

SWELLで素敵なブログ運営ができるように一緒にがんばろ…!

お知らせ

JIN以外のテーマからの移行方法は以下の記事を参考にしてください。

>>全テーマ共通のSWELLへの移行方法と注意点まとめ!準備をしっかりして移行作業を進めよう!

目次

JINからSWELLへの乗り換えをサポートしてくれるプラグインがある!

SWELLにはJINからの乗り換えをサポートしてくれるプラグインがあります。

さとしん

このプラグインはテーマ移行の際に大活躍します…!

JINも含めて、以下テーマのサポートプラグインが用意されています。

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

このサポートプラグインのおかげでテーマ移行の負担がとても軽くなります。

本来、テーマの移行作業はとても大変です。各テーマが独自に持たせている機能や装飾は、移行後のテーマに引き継ぐことはできません。

例えば以下赤枠部のJIN専用ブロックなどは、通常のテーマ移行時にはデザインが全て崩れてしまいます。

JINブロック

そのため、テーマを切り替えた後に、大急ぎで崩れた装飾を修正する必要があります。

ですが、JIN移行用サポートプラグインを使用すると、JINブロックの装飾をある程度保った状態でSWELLに移行することができます。

つまり、テーマを切り替えた後にゆっくり自分のペースで記事内の装飾の修正を進めることできるイメージです。

さとしん

テーマ移行直後の負担が減るので本当にありがたいプラグインです…!

ただし、最終的にはSWELLの装飾にリライトし直すことをおすすめします。
詳細は記事後半の「JIN独自の装飾をSWELLのスタイルにリライト」で説明します。

では、さっそくJINからSWELLへの移行手順を解説していきます。

JINからSWELLへの移行手順!SWELLの導入&有効化まで!

ここでは、SWELLを購入してテーマを有効化するまで進めていきます。

大きく以下の5つの手順です。

  1. SWELLのダウンロード
  2. 会員サイトへの登録
  3. JIN乗り換えサポートプラグインの有効化
  4. SEO関連の設定データ移行
  5. SWELLの有効化
みにしん

落ち着いて進めていこう…!

SWELLのダウンロード

SWELLをダウンロードしていきます。以下の手順です。

STEP
SWELLの購入ページにアクセスする

\ ここからアクセスできます! /

STEP
利用規約を確認し、「SWELLを購入する」ボタンをクリック
SWELLのインストール方法-2
STEP
Stripeの決済画面で必要事項を入力する
SWELLのインストール方法-3
STEP
入力したアドレス宛に届くメールに記載されたURLへアクセス

SWELL親テーマのzipファイルがPCにダウンロードされます。

STEP
管理画面→「外観」→「テーマ」→「新規追加」→「テーマのアップロード」 をクリック
SWELLのインストール方法-3
STEP
「ファイルを選択」欄でzipファイルを選択して「今すぐインストール」をクリック
SWELLのインストール方法-4

この時点ではまだSWELLを有効化せずにJINのままでOKです。

次はSWELL会員サイトへの登録を進めていきます。

会員サイト「SWELLERS’」への会員登録

SWELLにはユーザー専用の会員サイト「SWELLERS’」があります。

フォーラムへの投稿や、以下のようなデータをダウンロードするために会員登録は必須ですので、もれなく対応しましょう。

  • SWELL親テーマ
  • SWELL子テーマ
  • 乗り換えサポートプラグイン
  • デモサイト着せ替えデータ

会員サイトへの登録手順は以下のとおりです。

STEP
SWELLERS’にアクセスする

SWELL公式サイトのヘッダーにある「フォーラム」をクリック。

SWELLERS'への会員登録
STEP
SWELLERS’ のサイドバーにある「会員登録はこちらから」をクリック
SWELLERS'への会員登録-2
STEP
会員登録画面で必要事項を入力し、「登録する」ボタンをクリック

メールアドレスはSWELL購入時のものを入力してください。
ユーザー名とパスワードは任意でOKです。

SWELLERS'への会員登録-3

これで会員登録作業は完了です。

みにしん

ついにSWELLERS’の仲間入りだね…!笑

JIN乗り換えサポートプラグインの有効化

次は乗り換え用のサポートプラグインをダウンロードします。以下の手順です。

STEP
SWELLERS’マイページでJINからの乗り換えサポートプラグインをクリック

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

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

JINからSWELLへSEO関連データの引き継ぎ【重要】

SWELLテーマを有効化する前にSEO関連のデータについて確認していきます。

サイト全体のSEO設定や、各記事で設定しているディスクリプションなどのメタタグをSWELL移行後にどの方法で管理、設定するか決めておいた方が良いです。

JINではテーマの機能で以下のようなSEOの設定ができました。

全体のSEO設定

JINのSEO設定

記事個別のSEO設定

JINのメタタグ設定

このメタタグなどの情報は、乗り換えサポートプラグインを有効化している間のみ引き継がれます。

さとしん

プラグインを無効化するとこの情報は消えてしまうので注意です…!

このSEO関連の設定をSWELLでどのように管理していくかの方針次第で移行作業の内容が少し変わります。

JINはテーマの機能でSEO関連の設定ができましたが、SWELLではプラグインで管理することになります。

もし、JIN時代からAll in One SEOなどのプラグインでSEO設定をしていた場合はここはスルーしてもOKです。
次の「SWELLテーマの有効化」に進みましょう。

SWELL移行後のSEO関連データ管理方法の案を2つ紹介します。

  1. SEO SIMPLE PACKプラグインで管理する ←推奨
  2. その他SEOプラグインで管理する(All in One SEO、Yoast SEOなど)

僕は①のSEO SIMPLE PACKプラグインで管理する方法を推奨します。

さとしん

この記事でも①にする前提で詳細を説明してきます…!

SEO SIMPLE PACKはSWELL開発者の了さんが開発しているプラグインですし、他のSEOプラグインより使いやすいと感じています。

ちなみに、SEO機能をあえてプラグインに任せる理由を開発者の了さんが説明してくれています。

興味がある方は以下のアコーディオンを開いて確認してください。

では、さっそくJINで設定していたSEO関連の設定をSEO SIMPLE PACKに移行する作業を進めていきましょう。

以下2パターンの方法を紹介します。

  1. 手動でSEO SIMPLE PACKにデータを移行する ←推奨
  2. コードを追記してSEO SIMPLE PACKにデータを移行する
さとしん

手間はかかりますが、今後の事も考えて①が推奨です…!

【推奨】手動でSEO SIMPLE PACKにデータを移行する場合

JINテーマの機能、もしくはその他SEOプラグインから手動でSEO SIMPLE PACKへデータを移行する方法を紹介します。

STEP
SEO SIMPLE PACKをインストール&有効化

プラグイン追加画面で「SEO SIMPLE PACK」と検索すると見つかります。

SEO SIMPLE PACKのインストール
STEP
サイト全体のSEO設定

JINのSEO設定の内容をSEO PACKで設定し直す。

ここの設定です↓↓

JINのSEO設定

管理画面→「SEO PACK」→「一般設定」の各タブを移動しながら必要な項目を入力しましょう。

SEO SIMPLE PACKの一般設定

細かいプラグインの設定は了さんが記事を書いてくれているので参考にしてください。

>>WordPressの超シンプルなSEOプラグイン「SEO SIMPLE PACK」の使い方

次のステップからは記事個別の設定をしていきます。

STEP
各記事個別のSEO設定

作業したい記事の編集画面に進みましょう。

JINのメタタグ設定-2
STEP
JINの「SEO設定」欄にある情報をコピー

JIN側の入力情報は消してしまってOKなので、切り取り(Ctrl+X)でもOKです。

JINのメタタグ設定-3

ブロックエディターで使えるショートカットキーを以下で紹介しています。

>>ブロックエディターの記事執筆を快適にするショートカットまとめ!

STEP
「SEO SIMPLE PACK設定」の欄に貼り付け

JINの「SEO」欄の下に 「SEO SIMPLE PACK設定」 が追加されているはずです。

CocoonからSWELLへ移行時のSEO関連データの移行-3

このSTEP3以降の手順を全ての記事で行えば完了です。

もちろん必須ではないので、メタディスクリプションが不要な場合や、改めて設定し直したい記事ではこの手順は省略してOKです。

コードを追記してSEO SIMPLE PACKにデータを移行する場合

上記の手順に沿って手動で移行した方はこの作業は不要です!

こちらの方法では、子テーマなどのfunctions.phpにコードを追記することで、SEO SIMPLE PACKでメタタグの情報を出力することができるようになります。

乗り換えサポートプラグインにはあらかじめコードが含まれているので、有効化している間はユーザー側でコードを追記する必要ありません。

しかし、最終的には乗り換えサポートプラグインは無効化することを推奨しているので、その場合は後々コードを自分で追記する必要はでてきます。

実際に入力するコードについては以下の公式マニュアルを参考にしてください。

>>テーマ乗り換え時にメタディスクリプションなどの設定をSEO SIMPLE PACKに引き継ぐ方法
>>「All in One SEO Pack」の各記事の設定を引き継いで「SEO SIMPLE PACK」へ乗り換える方法

SWELLテーマの有効化

ここまで完了したら、SWELLテーマを有効化しましょう。

さとしん

いよいよサイトがSWELLに生まれ変わりますよ…!

管理画面→「外観」→「テーマ」から『SWELL』を探して「有効化」をクリックすればOKです。

SWELLのダウンロード方法-3

ちなみに、SWELLでは子テーマも用意されています。

会員サイトのマイページからダウンロードできます。

テーマエディターなどでコードを記述してカスタマイズする予定がある場合は、子テーマをインストール、有効化しておきましょう。

SWELLのテーマエディター画面

追加CSSや、プラグインを使ってコードを記述する場合は、子テーマのインストールはしなくてもOKです。

テーマカスタマイザーの追加CSS
さとしん

迷う場合は子テーマをインストール&有効化しておいて良いかと思います…!

SWELLに切り替えた後の設定

ついにブログがSWELLに変わりました。初めに最低限の環境を整えておきましょう。

以下6点について説明します。

  1. SWELLユーザー認証設定
  2. 基本設定
  3. プラグインの整理
  4. Googleアナリティクスの設定
  5. Googleサーチコンソールの設定
  6. Googleアドセンスの設定

SWELLユーザー認証設定

SWELLを有効化した直後は管理画面に「SWELLのユーザー認証が完了していません」と警告文が表示されます。

SWELLのアクティベート設定

この状態だと、SWELLをアップデートできず、最新の機能を使うことができなくなります。

SWELLを常に最新版にアップデートするために、ユーザー認証(アクティベート設定)をしておきましょう。

以下の画面でアクティベート設定をすることができます。

WordPress管理画面→「SWELL設定」→「アクティベート」に進む。

「ユーザー認証」の欄に、先ほどSWELLERS’会員登録に使用したメールアドレスを入力して「認証リクエストを送信」をクリックしましょう。

SWELLのアクティベート設定-2

正しいメールアドレスが入力されれば、そのアドレス宛にメールが届きます。

メール内に記載のある、認証を完了させるためのURLをクリックして、アクティベート設定も完了です。

次は、サイトに関わる設定を行っていきます。

SWELL導入直後の基本設定

サイト全体のカラーやベースになるデザインなど、SWELLの基本的な設定を進めていきましょう。

以下がとても参考になります。

取り急ぎ、公式マニュアル内の「基本設定」の項目を参考に設定を進めておくと良いかなと思います。

SWELL公式マニュアル

当サイトでも、上記の公式マニュアルをベースに、困った時の対処法などもまとめた記事を作っていますので参考にしてください。

プラグインの整理

SWELLとJINでは、テーマ側に含まれる機能が異なるので、JINで使っていたプラグインで不要になるものや、新たにインストールしたほうが良いプラグインもあります。

例えば、JIN公式で推奨されているプラグインで、SWELLでは使わなくても良いかなと思うプラグインの例は以下です。

  • Rich Table of Contents
  • AddQuicktag
  • Autoptimize
  • WP Super Cache

公式サイトで推奨、非推奨のプラグインや注意が必要なプラグインが多数紹介されているので参考にしてください。

さとしん

このマニュアルは絶対に読んだ方が良いです…!

Googleアナリティクスの設定

Googleアナリティクスの計測用コードをJINの「HTMLタグ設定」から入力していた場合は、再設定が必要です。

以下の手順で設定できます。

事前にプラグイン「SEO SIMPLE PACK」をインストールしておいてください。

STEP
管理画面→「SEO PACK」→「一般設定」→「Googleアナリティクス」をクリック
SEO SIMPLE PACKのアナリティクス設定-1
STEP
「トラッキングID」または「測定ID」欄にIDを入力

「UA」もしくは「G」から始まるIDです。

これだけでGoogleアナリティクスの設定は完了です。

さとしん

正しく計測されているかの確認も忘れずに…!

Googleサーチコンソールの設定

続いて、Googleサーチコンソールの設定方法も紹介しておきます。

GoogleサーチコンソールもSEO SIMPLE PACKで設定できます。

STEP
管理画面→「SEO PACK」→「一般設定」→「ウェブマスターツール」をクリック
SEO SIMPLE PACKのサーチコンソール設定-1
STEP
Googleサーチコンソールの認証コード」欄にコードを入力
SEO SIMPLE PACKのサーチコンソール設定-2

Bingのウェブマスターツールを使っている方は同様に設定しておきましょう。

Googleアドセンスの設定

サイト内のアドセンス広告をJINの「広告管理」から設置していた場合も再度設定し直す必要があります。

SWELLでは以下の手順で各広告を設定することができます。

STEP
管理画面→「SWELL設定」→「広告コード」をクリック
アドセンス広告の貼り方
STEP
お好みの広告の入力欄に広告コードを入力
アドセンス広告の貼り方-2

詳しいGoogleアドセンスの設置方法は以下の公式マニュアルを参考にしてください。

また、当サイトの記事でもアドセンスの設置方法やうまく表示されないときの確認内容を以下のリンク先で解説しています。

>>アドセンス広告の設置方法

JIN独自の装飾をSWELLのスタイルにリライト

JINからSWELLへの移行に伴い崩れた装飾をリライトしていきましょう。

JINからSWELLへの乗り換えサポートプラグインのお陰で、装飾の崩れがある程度抑えられているはずです。

それでも一部装飾は崩れてしまうので、優先順位を付けてリライトしていくことをおすすめします。

リライトを進めるにあたり、JINの装飾がSWELLに移行したあとどうなるのか?気になる方も多いと思います。

まずは公式サイトのマニュアルに目を通してみましょう。サポートプラグインが対応している装飾の一覧が記載されています。

僕の方でも実際に移行前後での装飾の変化を確認してみたので紹介していきます。

さとしん

デザイン崩れが発生する装飾から最優先でリライトしていきましょう…!

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

確認を実施した環境
  • WordPress:バージョン5.8.2
  • JIN:バージョン2.650
  • SWELL:バージョン2.5.5.3
  • 【SWELL】乗り換えサポート from JIN:バージョン1.1.2

優先的にリライトしたい装飾

JINからSWELLに変更して、デザインが維持できない、崩れてしまう可能性のある装飾は以下のとおりです。

  • 見出し付きボックス
  • アイコンボックス
  • 吹き出し
  • ブログカード
  • シンプルボタン
  • ランキング(ボタンのみ)
  • 横並びボタン(シンプルボタンのみ)

今回は、青マーカーを引いたコンテンツの移行前後の状態を画像で紹介していきます。

見出し付きボックス

見出し付きボックスは、特に黒板ボックス以外のボックスデザインが大きく崩れてしまいます。

テーマ移行前後の装飾の違いは以下のとおりです。

JIN

JINの見出し付きボックス

SWELL移行後

SWELL移行後のJINの見出し付きボックス

おすすめのリライト方法

SWELLにはキャプション付きブロックというブロックがあるので、そちらに置き換えると良いと思います。

アイコンボックス

アイコンボックスは、ボックスの左側に表示されるアイコンが表示されなくなりました。

それぞれ、 テーマ移行前後の装飾の違いは以下のとおりです。

JIN

JINのアイコンボックス

SWELL移行後

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

このボックス系のブロックは使っている方も多いですよね。

アイコンが表示されないだけなので致命的ではないですが、アイコンでボックスの内容のイメージが掴めなくなるので早めに修正したほうが良いかなと感じました。

おすすめのリライト方法

SWELLは段落ブロックでアイコン付きのスタイルを設定できるので、そちらにリライトしましょう。

みにしん

SWELLの段落ブロックは本当に便利だよ…!

吹き出し

吹き出しもデザインが崩れてしまうので早めの修正がおすすめです。

テーマ移行前後の装飾の違いは以下のとおりです。

JIN

JINの吹き出し

SWELL移行後

SWELL移行後のJINの吹き出し

おすすめのリライト方法

SWELLにもふきだしブロックがあるので、そちらにリライトしましょう。

ちなみに、SWELLのふきだしはアイコンなどを事前に設定しておくことができるのでとても便利です。

ブログカード

ブログカードも移行後にはURLが表示されるだけの状態になりました。

テーマ移行前後の装飾の違いは以下のとおりです。

JIN

JINのブログカード

SWELL移行後

SWELL移行後のJINのブログカード

おすすめのリライト方法

SWELLには関連記事ブロックというブログカードが作れるブロックがあるので、そちらにリライトしましょう。

SWELLの関連記事ブロックは、内部リンクも外部リンクもブログカード化してくれるので、かなり便利です。

シンプルボタン

JINのシンプルボタンは、デザインは崩れませんが左寄せの状態になりました。

さとしん

特に大きな問題ではないですね…!

テーマ移行前後の装飾の違いは以下のとおりです。

JIN

JINのシンプルボタン

SWELL移行後

SWELL移行後のJINのシンプルボタン

ちなみに、ブロックエディター標準のボタンは問題なく移行できます。

おすすめのリライト方法

SWELLにはSWELLボタンというブロックがあるので、そちらにリライトしましょう。

便利な機能がたくさん用意されているので、ぜひSWELLボタンに置き換えると良いかなと思います。

ゆっくりでもリライトしておきたい装飾

上記で紹介したもの以外は、サポートプラグインのお陰でデザインが大きく崩れることなく維持されます。

ですが後述するとおり、最終的にサポートプラグインは削除することをおすすめします。

そのため、デザインが維持されていたとしても、JIN独自の装飾は全てリライトしたほうが良いです。

さとしん

記事数が多ければ多いほど、この作業が大変になりますね…。

ですが、このリライトに緊急性はないので、新記事を書いたり他の作業をする合間にゆっくり進めても良いと思います。

無理のない程度にJIN時代の装飾を無くしていきましょう。

乗り換えサポートプラグインとJINテーマの削除

満足いくところまで装飾をリライトできたら、乗り換えサポートプラグインとJINテーマは削除してOKです。

乗り換えサポートプラグインを有効化している間は、JINとSWELLの2つのテーマを読み込むためサイトが重くなる懸念があります。

なので基本的には、最終的には移行サポートプラグインは停止することを推奨します。

さとしん

装飾の修正作業お疲れさまでした…!

SWELLでサイト全体のデザインを整えてみる

一通りSWELL移行後の設定とリライトまで完了したので、ここから先は自由にブログを運営していきましょう。

記事を書き始めるのもOKですし、サイトのデザインを整えてみても良いと思います。

ここでは、デザインを整える方法を紹介しておきます。

さとしん

デザインを作りこむのも楽しいですよ…!

デモサイトデザインに着せ替える

SWELLにはデモサイトデザインに着せ替えるためのデータが無料配布されています。

着せ替えデータは以下の6パターン用意されています。

SWELLのデモサイトの一覧

デモサイトデータを反映させる方法は以下のリンク先で解説しています。

>>SWELLのデモサイト着せ替えデータで簡単にリッチなブログを作ろう!

サイト型のトップページカスタマイズにチャレンジする

もちろん、デモサイトではなく自分でオリジナルのトップページを作りこむこともできます。

まず、ファーストビューの印象を整えてくれる設定がSWELLには複数用意されています。

  • メインビジュアル
  • 記事スライダー
  • ピックアップバナー

これらの設定方法は以下のリンク先で紹介しています。

>>トップページ設定

さらにトップページの記事の配置などをオリジナルにカスタマイズしたい場合は以下の記事を見てみてください。

>>SWELLカスタマイズ!サイト型トップページの作り方!素敵なブログを作ろう!

さとしん

デザインのカスタマイズもSWELLの醍醐味だと思います。いろいろ試してみてください…!

SWELLのブロックエディターで記事を書いてみる

せっかくSWELLユーザーになったので、JINではクラシックエディターを使っていた方もブロックエディターを使ってみてほしいです。

さとしん

SWELLのブロックエディターの使い心地は最高です…!

ブロックエディターの基本的な使い方も当サイトで解説しています。

>>WordPressブロックエディター(Gutenberg)の使い方!時短テクニックも紹介!

それからSWELLでは、ブロックエディターを強化してくれる機能が豊富に用意されています。

SWELLのブロックエディターでできることは以下の記事にまとめたのでぜひ参考にしてください。

いよいよSWELLのサイト運営がスタートです!!

ここまで「JIN」から「SWELL」にテーマを移行する手順を紹介してきました。

さとしん

移行作業、大変お疲れさまでした…!

みなさん大きな問題なくSWELLに移行が完了できていれば嬉しいです。

これからいよいよ、SWELLのサイト運営がスタートです。素敵なWordPressテーマ「SWELL」を楽しんでいきましょう。

当サイトではSWELLのことや、ブロックエディターについての記事を書いているので良ければ今後も参考にしてください。

それから、SWELLで作られたサイトを集めたギャラリーも運営しています。

みなさんがSWELLで素敵なブログを作られた際にはぜひ掲載させてくださいね。

掲載の依頼は、当サイト運営者のTwitter(@__satoshin)まで。楽しみにお待ちしております。

さとしん

ぜひTwitterでも絡んでください…!

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


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

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

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

>>SWELLのブロックエディターの使い方!超充実の機能を動画付きで紹介!

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

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

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

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

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

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