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

2021 7/30

2021.07.30

この記事のまとめ

JINからSWELLへテーマ変更（移行）するやり方を丁寧にまとめました。

手順は14個！！

本記事を読むことで得られるメリットは下記の内容です。

テーマ変更前のデザインを引き継げる
SWELLに合うロゴ画像を作成できる
推奨プラグインがわかるので気持ちよくブログ運営できる
着せ替えでオシャレにデザイン
SWELL独自の設定も細かく解説
CSSカスタマイズで差をつける

SWELL導入する前に、バックアップをとること、現状サイトのメモを取ることは必須なので、検討中の人は下記の記事もおすすめ。

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

上記の記事の10個の手順でバックアップを取るのに1時間
今回の記事で、SWELLを導入して、設定していくのに、3時間

あいうえおLIFE

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

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

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

＼表示速度が早い！／

レンタルサーバーエックスサーバー

当サイトでも使用中のサーバー

1：SWELLの導入

STEP

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からSWLLへの乗り換えサポートプラグインを選びます

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

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

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

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

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

【THE THOR】コピペだけでAFFINGERのボックスを作るカスタマイズ

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

ボックスナビの修正

スマホ開閉メニュー
サイドバー

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

くろすけぶろぐ

テーマ『SWELL』カスタマイズ｜ボックスナビを設置する方法【図解】 | くろすけぶろぐワードプレステーマ「SWELL」にアイコン付きのボックスナビゲーション（ボックスメニュー）を設置するカスタマイズを紹介。ワードプレス初心者でも設置できるように画像多...

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

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

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

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

背景透過とPNG

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

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

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

プラグインの修正

公式マニュアル

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

削除（停止）→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追記）

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管理画面から、外観→カスタマイズ、へ移動して設定します。

STEP

WordPress設定

WordPress設定→サイト基本情報→サイトアイコン再設定ホームページ設定→ホームページの表示→最新の投稿に変更

STEP

サイト全体設定

サイト全体設定→基本カラー：リンクカラーをJINと同じ#1111ccに変更　
基本デザイン：フォント設定のみ変更　
お知らせバー：テーマ変更しましたと、Aboutへいったんリンク　
下部固定ボタン・メニュー：目次ボタンの表示設定を[表示]に

STEP

ヘッダー

ヘッダー→ヘッダーロゴの設定でロゴ画像をする設定　
ヘッダー→PC　100　PC追従ヘッダー　30　SP　80　
ヘッダーのレイアウト(PC)：ヘッダーナビをロゴの横に（右寄せ）　
ヘッダー境界線：影　
ヘッダーの追従設定 ON:ヘッダーを追従させる（PC）OFF:ヘッダーを追従させる（SP）
＞参考：https://osukeblog.com/swell-customize/#index_id3
検索ボタンの表示設定（SP）：カスタムボタンにセット　メニューボタン設定：アイコン下に表示するテキストを[MENU]に　
カスタムボタン設定：アイコンクラス名を[icon-search]にして、デフォルトの手紙マークから変更

STEP

フッター

フッター→コピーライトの設定：あいえうおLIFE

STEP

サイドバー

サイドバー：サイドバーを表示するをONにしておく
スマホはサイドバー内容は下に移動するのでok(swellは独自で切り替え可能)

STEP

トップページ

トップページ→メインビジュアル：表示しない（デザイン落ち着くまでは保留）
デフォルトではSWELL関連画像のスライドショー　
記事スライダー：設置するに変更
スライド設定でスライダーの枚数設定（PC）4、スライダーの枚数設定（SP）2

STEP

投稿・固定ページ

投稿・固定ページ：アイキャッチ画像を固定ページにも、[ON]本文の始めにアイキャッチ画像を表示　
コンテンツのデザインを、見出し2のデザイン[ふきだし風]見出し3のデザイン[左に２色のブロック]見出し4のデザイン[チェックアイコン]　
テキストリンクを[ON]テキストリンクにアンダーラインを付ける　
目次：[ストライプ背景]目次のデザイン

STEP

記事一覧リスト

記事一覧リスト：タブ切り替え設定（トップページ）[ON]
「新着記事タブ」を追加する
「人気記事タブ」を追加する

STEP

SNS情報

SNS情報：バックアップメモから再設定

STEP

メニュー

メニュー：JINのSPハンバーガーメニュー[削除]
スマホ開閉メニュー内に、JIN時代の[スマホスライドメニュー]削除
スマホの固定フッター[設置]＋HOMEとSNSを設置

STEP

追加CSS

追加CSS：JINのバックアップメモからSWELLテーマ用に修正したものをコピペ

STEP

サイトの表示崩れの確認（PCとスマホ）

気になるところ→JINオリジナルアイコンが[✖️]マークになっている
JINオリジナルアイコンを使ったアイコンボックスがマーク表示されてない
吹き出しの名前の部分がはみ出ている
見出しボックスがうまく表示されてない（SWELLのキャプションボックスに切り替え予定）

8：SWELL設定【管理画面】

[SWELL設定]

高速化
構造化データ
jQuery
Font Awesome→CSSで読み込む
機能停止
広告コード→記事内広告と目次広告と自動広告（導入して、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: 2.0;
	}
/*ブロック間*/
	.post_content > *{
	margin-bottom: 3.0em;
	}
/*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に修正。