カテゴリメニュー
WordPressテーマをJINからSWELLに変更SWELL公式サイト

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

JINSWELL移行やり方
この記事のまとめ

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

手順は14個!!

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

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

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

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

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

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

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

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

\ 表示速度が早い! /

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

目次
この記事を書いた人
  • HTML名刺プロフィール
  • 広島在住の医薬品登録販売者で700軒担当
  • 【お薬・漢方・サプリメント】をお届けする営業パーソン
  • 衣食住のライフスタイルやメンタルヘルスのケアをしています
  • 配置薬10年・WordPress1年半・動画編集1年
  • 依存卒業の自立した生き方のマインドや他者貢献の姿勢・日常の切り抜きを発信中
あいうえおLIFEです

1:SWELLの導入

SWELL導入
SWELLの導入
STEP
SWELLのダウンロード
SWELLダウンロード
https://swell-theme.com

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

SWELL本体
STEP
SWELLの子テーマのダウンロード
STEP
デモサイト一覧から、気にいったデザインを選ぶ

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

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

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

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

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

乗り換えサポートプラグイン

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

上記の記事で、バックアップのためにメモした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

上記の記事で、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テーマを2種インストールをして、有効化前に必要プラグイン導入と削除(または停止)

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

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

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間もない
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のデザイン[左に2色のブロック]見出し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の推奨プラグインに適正化しましょう。

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; /* 2重線 */
  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を軌道に

JINSWELL移行やり方

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

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

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

手順は14個
  1. SWELLの導入
  2. 引き継ぐ追加CSSを修正
  3. ロゴ画像作成&プラグインの見直し
  4. 乗り換えのためのJIN→SWELLプラグインとCustomizer Export/Importをインストール
  5. SWELLテーマを2種インストールをして、有効化前に必要プラグイン導入と削除
  6. SWELL Childの有効化後、外観→カスタマイズで着せ替えデータインストール
  7. SWELLでの各設定
  8. SWELL設定【管理画面】
  9. ウィジェット
  10. プラグイン修正と追加
  11. ユーザー
  12. SEOパック
  13. CSSカスタマイズ
  14. リライトとおまけ

上記のメリットは下記。

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

何度も言いますが、テーマ変更前のバックアップ10の手順は必須ですよ。

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

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

\ 表示速度が早い! /

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

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