【14個の手順】JINからSWELLへテーマ変更（移行・乗り換え）のやり方

悩む人

WordPressテーマJINからSWELLに変更する手順ややり方を詳しく知りたいです。

不安で仕方ないです。。

今回は、上記のお悩みに答えていきます。

SWELL導入する前に、バックアップをとること、現状サイトのメモを取ることは必須。

検討中の人は下記の記事もおすすめです。

必読：【JINからSWELLへテーマ変更】注意点とバックアップの手順とやり方【解説】

あいうえおLIFE

合計4時間は確保していくのがオススメ。

焦ってしまって、ブログ辞めたくなるレベルで取り返しつかないよりマシですね笑

作業は大変ですが、SWELLerへの道を丁寧に進んでいきましょう。

今日はどうぞ、最後までお読みくださいね。

＼ 乗り換えプラグイン完備 ／

SWELL公式サイトを見る

ブロックエディタでの書きやすさNo.1

運営者：あいうえおLIFE

• HTML名刺とプロフ（日々メンタルアップ）
• モッピーでコインチェックをセルフバックし、元手5万円を取引後、報酬1万円GET
• ブログをWordPressで始め、ブログ運営、カスタマイズ、登録販売者、動画編集にまつわる記事をアップ
• ブロックエディタ完全対応テーマSWELLに変更後、収益UP（レビュー記事）
• 鬼滅の刃の記事が上位表示されSEOに自信をもつ

こんにちは

1：SWELLの導入

STEP

SWELLのダウンロード

上記もしくは、購入確認メールのリンクからSWELLのダウンロード

STEP

SWELLの子テーマのダウンロード

＞https://swell-theme.com/download/swell-child/

SWELLの子テーマ

STEP

デモサイト一覧から、気にいったデザインを選ぶ

＞https://swell-theme.com/demos/

当サイトは、SWELL DEMO 05を選びました

STEP

SWELLERS'のマイページにログインして、デモサイトデータと乗り換えサポート用プラグインをダウンロードする。

＞https://u.swell-theme.com/mypage/

JINからSWELLへの乗り換えサポートプラグインを選びます

下準備が必要なければ、一気に手順の4：乗り換えのためのJIN→SWELLプラグインとCustomizer Export/Importをインストールへ。

2：引き継ぐ追加CSSを修正

あわせて読みたい

【JINからSWELLへテーマ変更】注意点とバックアップの手順とやり方【解説】 今回の記事では、読者の方が2の舞にならないように、現状サイトのバックアップを細かくとる手順や内容を執筆。実際に、ぼくが本記事の10個の手順をとってから、SWELLへテーマ変更することで、すぐに現状サイトに近づけたまま記事に取り掛かることが出来ました。

上記の記事で、バックアップのためにメモしたCSSを修正します。

以下は、ぼくの備忘録となります（ご参考までに）。

もしもアフィリのボタンのアイコンを変更

もしもアフィリエイトの簡単リンクで、商品紹介をしていました。

JINのオリジナルアイコンで、「＞（矢印）」を入れていたので、下記に修正予定。

/*fontawesomeを文字の前に*/
  .easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    padding-right: 3px;
  }

上記の記事が、fontawesomeの使い方の説明がわかりやすいです。

ボックスナビの修正

ボックスナビを上記に入れてみる。

JINオリジナルアイコン→Fontawesomeに変更（下記は変更例）。

[jin_icon_academic]→<i class="fas fa-heartbeat"></i>

3：ヘッダーロゴ画像作成＆プラグインの見直し

ロゴ画像はCANVAで、1200×360（png）で作成しておく。

背景透過とPNG

オウスケブログ｜ブログ運営・副業...

【SWELLをカスタマイズ】カスタマイズ方法を36枚の画像を使って解説 | オウスケブログ｜ブログ運営・副業に... 本記事ではSWELLをトップページ風にカスタマイズする方法を紹介しています。ヘッダーロゴから、画像サイズまですべて解説しているので、初心者の方でもオシャレなサイトを...

上記の記事で、CANVAでロゴ画像を作成する方法が紹介されています。

ロゴサイズの修正【追記：2021/09/21】

記事内で、ヘッダーのサイズを1,200✖️360で作成したと書いた。

けど、1,200✖️180がちょうどよかったというオチ笑笑😂 pic.twitter.com/6OFZU5JFOW

— あいうえおLIFE@登録販売者✖︎ ︎WordPress ✖︎動画編集 (@pledge17uchs) September 20, 2021

上記のツイートのとおり、CANVAで「1,200×180」で作り直しました。

プラグインの修正

上記の公式マニュアルで、削除（停止）するプラグインと、導入するプラグインを決めます。

4：乗り換えのためのJIN→SWELLプラグインとCustomizer Export/Importをインストール

jin-to-swell-1-1-1というzipファイルを、下記の手順で。

WordPress管理画面のプラグイン→新規追加→プラグインのアップロード→ファイルを選択。

Customizer Export/Importの着せ替えプラグインは、検索窓から。

5：SWELLテーマを２種インストールをして、有効化前に必要プラグイン導入と削除（または停止）

購入した本体テーマと、子テーマを外観→テーマ→新規追加から、インストール。

テーマを有効化する前に、下記を削除（停止）。

ewww、サイトガード、WordPress Popular Posts、Autoptimize、Contact Form 7、プラグイン「CARAT」、RTOC、native lazy load、ZEBLINE

テーマ有効化前に、下記のプラグインを「有効化」しておきます。

Highlighting Code Block、seoシンプルパック、Invisible reCaptcha for WordPress、Contact Form by WPForms、Wordfence Security、Imagify（2021.7追記）

注意：seoシンプルパックは、記事のディスクリプションを引き継いでくれるので、導入お忘れなく！

6：SWELL Childの有効化後、外観→カスタマイズで着せ替えデータインストール

あいうえおLIFE

SWELL Childの有効化をすると、いよいよJINからSWELLに切り替わります！

すっぴん状態のテーマ有効化状態は下記画像の通り。

SWELLになった嬉しさたっぷりですよね。

下記から、デザインを着せ替え。

デモサイトの着せ替えデータは、ZIPファイルを解凍→datファイルにする。

WordPress管理画面→外観→カスタマイズ→エクスポート / インポートのファイルを選択。

画像ファイルをダウンロードしてインポートしますか ?に✔️を入れて、datファイルをインポート。

7：SWELLでの各設定

あいうえおLIFE

WordPress管理画面から、外観→カスタマイズ、へ移動して設定します。

8：SWELL設定【管理画面】

SWELL独自の内部SEO対策が豊富すぎます（開発者様ありがとう）。

[SWELL設定]

• 高速化
• 構造化データ
• jQuery
• Font Awesome→CSSで読み込む
• 機能停止
• 広告コード→記事内広告"ad"と目次広告と自動広告（導入して、Advanced Adsを停止）を設定
• [ads.txt]google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0→Googleアドセンスの[アカウント]→[アカウント情報]→[パブリッシャーID]を記入

[SWELLERS' 設定]

• SWELLERS' IDを設定する（SWELLEERのマイページ）

9：ウィジェット

外観→ウィジェットへ移動。

• スマホ開閉メニュー下にナビゲーションメニュー（JINオリジナルアイコンから変更する）
• CTAウィジェットに、SWELLプロモーションバナー設置
• メニュー：グローバルメニューの設定、フッターメニューの設定、スマホ開閉メニューの設定（カテゴリページ設定すると、説明文も入るのでここで削除しておく）

10：プラグイン修正と追加

SWELLの推奨プラグインに適正化しましょう。

• Contact Form 7削除→WPForms Lite導入
• 固定ページ【お問い合わせ】WP Formsで作成したショートコードに差し替え（3分）
• Invisible reCaptchaの設定（GoogleアカウントでreCaptchaV3の設定）　＞https://korenasorena.com/wordpress-recaptchav3/
• WP Formsにrecaptcav3のサイトキーと、シークレットキーを入力して紐付け　＞https://re-start78.com/recaptchav3/
• Wordfence Security導入　＞https://excesssecurity.com/wordfence-settings/
  →XO Securityに変更（20210625〜）理由：wordfenceだとSWELL設定の変更でブロックが起きてしまう　＞https://oinavi.net/security/
• Imagify（2021.7追記）導入して画像圧縮　＞https://naoto-biz.com/imagify/

11：ユーザー

あいうえおLIFE

下記は実際に、当サイトで設定しているプロフィール。

プロフィール情報入力

広島在住 / 医薬品登録販売者として、【お薬・漢方・サプリメント】をお届けする営業パーソン / 衣食住のライフスタイルやメンタルヘルスのケアをしています / 配置薬10年・WordPress1年半・動画編集1年 / 依存しない自立した生き方のマインドや他者貢献の姿勢・日常の切り抜きを発信中 / 人生より良くしたい人好き

12：SEOパック

主にやることは、Googleアナリティクス、サーチコンソール、OGP設定を行います。

OGP設定をしておくことで、サイトをシェアされたときのサムネイルがきちんと表示。

13：CSSカスタマイズ

CSSカスタマイズは、おまけ。

基本は何もせずOK

読みやすいサイト作りに、自己満足込めてカスタマイズします。

①目次ハイライト

＞参考：https://www.cg-method.com/side-job/wordpress-swell-customize/

追加CSSに記入

/*目次ハイライト*/
a.p-toc__link.mkj-active {
background-color: #F8FFB9;
}
li.mkj-marker::before {
background-color: #F8FFB9;
}

記入して、＋function.phpに参考サイトのコード記入。

参考サイトに、目次下にプロフィールウィジェットをつくるphpコードもあるので、導入。

②余白

＞参考：https://shindy-style.com/swell-customize-margin

追加CSSに記入

/*行間*/
	.post_content{
	line-height: 1.8;
	}
/*ブロック間*/
	.post_content > *{
	margin-bottom: 5.5em;
	}
/*SWELLステップブロック行間*/
	.swell-block-step__body{
	line-height: 2.0;
	}
/*ステップブロックブロック間*/
	.swell-block-step__body> *{
	margin-bottom: 3.0em;
	}
/*ステップブロックタイトル余白*/
	.swell-block-step__title {
	margin: 3em 0 2em;
	}

③もしもアフィリのボタンのアイコンを変更

下記のコードは、そのままコピペできます。

 /*もしもアフィリかんたんリンクCSS--------- */
  div.easyLink-box {
    border:double #CCC !important; /* ２重線 */
  margin-bottom: 1.5em!important;/*簡単リンク枠下と文字の空白つける*/
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
  border-radius: 20px;/*角を丸く*/
  }
  /*Amazon楽天Yahoo幅揃えて見やすく*/
  .easyLink-info-btn a{
  margin: 1px 1px 5px 0!important;
  padding: 0 12px!important;
    line-height: 35px!important;
  display: inline-block!important;
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
  font-size: 0.7em!important;
  }
  /* --- 商品リンク タイトル --- */
  p.easyLink-info-name a {
    color: #1111cc !important; /* 文字色 */}
  /* --------- 各ボタン色 --------- */
  a.easyLink-info-btn-amazon {
    background: #f6a306 !important; /* 背景色 */
    border: 2px solid #f6a306 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
  }
  a.easyLink-info-btn-rakuten {
    background: #cf4944 !important; /* 背景色 */
    border: 2px solid #cf4944 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
  }
  a.easyLink-info-btn-yahoo {
    background: #51a7e8 !important; /* 背景色 */
    border: 2px solid #51a7e8 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
  }
  /* --- マウスオーバー時のボタン色 --- */
  a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
  }
  a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
  }
  a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
  }
  /*fontawesomeを文字の前に*/
  .easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    padding-right: 3px;
  }
  /* --- PC以外の時の設定--- */
  @media screen and (max-width: 480px){ 
  div.easyLink-box div.easyLink-info p.easyLink-info-btn a { 	
    width: 100%!important; 	
      position: relative; 	} 	
  .easyLink-info-btn a:before { 		padding-right: 5px; 
    right: 5px; 	
  position: absolute;		 
  } }
  @media screen and (max-width: 480px){
  div.easyLink-box.easyLink-size-s {
  max-width: 340px !important;
  }}
 

「2：追加CSSの修正」内容を上記のように、JINオリジナルアイコンからFontawesomeに修正。

14：リライトとおまけ

• 人気記事ランキング：ポピュラーポストのショートコード削除して、SWELLの「投稿リスト機能」で人気記事表示

こんな感じにできます。

• 投稿ページのリライト
• Useful Blocks有料買って、CVボックスをグレードアップして、ブログパーツ化して、ウィジェットとして、CTAゾーンへ

ブログパーツとは？：https://swell-theme.com/function/1740/

これがCTA。

• ブロックエディタ完全対応！
• 他テーマからの移行プラグイン完備！
• マニュアル公式サイト＋フォーラムで安心サポート！

最強買い切りで複数サイトで利用可

¥17,600（税込）
カスタマイズ簡単で時短可能

ブログパーツで、カテゴリごとの記事ページへ飛ぶバナー作成

＞https://www.kurasitotonoe.com/entry/swell-blogparts/

スマホメニュー内に運営者情報のブログパーツ

＞https://sorairolog.com/swell_reliability_part/

目次下にプロフィール

＞https://www.cg-method.com/side-job/wordpress-swell-customize/

投稿・固定ページ→記事下エリア→著者情報エリアの設定→ 著者情報を表示をOFF

ウィジェットで、テキストにブログパーツIDを貼る

＞https://swell-theme.com/function/2565/

フッター直前に各カテゴリ別新着記事ブログパーツ

＞https://www.kurasitotonoe.com/entry/swell-blogparts/#index_id3

まとめ | バックアップ後は14の手順でSWELLを軌道に

今回は、「JINからSWELLを導入したいけど、バックアップ取った後は、どうしたらいい？」というお悩み解答しました。

SWELLには、独自の「乗り換えサポートプラグイン」があるので、活用するべし。

下記の⑤でテーマ有効化する前に、プラグインの調整。

上記のメリットは下記。

SWELLの良さは下記の記事でおすすめしています。

それでは、今日はここまで読んでいただきありがとうございます！