本記事は約12分で読むことができます。
【14個の手順】JINからSWELLへテーマ変更(移行・乗り換え)のやり方

JINからSWELLへテーマ変更したいけど手順が分からず悩む人

JINからWordPressテーマ「SWELL」へテーマ変更したいのですが手順が知りたいです
具体的にイメージできれば購入したいです



今日は「お悩み解決に役立つ内容」をお伝えしていきます!
JINからWordPressテーマ「SWELL」へテーマ変更するのに、具体的手順が気になりますよね。ぼくも「JINを買ったときの手間より大変かな?JINにCSS入れまくったけど引き継げるかな?」と試行錯誤する日々…
- SWELL購入から乗り換えや設定の手順は合計で14個
- 引き継ぐテーマのCSSをある程度反映させることを想定
- プラグインの削除や導入をSWELL導入に際して見直す
- SWELLの見た目をさらに良くするCSSも紹介
本記事では詳細を解説します。SWELL公式サイトではテーマ変更時のデザイン崩れ注意を下記のように配慮してくれています。
テーマを乗り換える時、旧テーマの独自機能で文章の装飾などを使っていると過去記事のデザインが一気に崩れてしまいます。
引用:他テーマからSWELLへの「乗り換えサポートプラグイン」一覧
PVがたくさんある場合 | PVが少ない場合 |
---|---|
丁寧に乗り換えやデザイン引き継ぎの手順を理解しながらデザイン崩れが最小限になるように移行 | プラグインの導入や記事のリライトも含めて丸ごと新しくするイメージでデザインは気にせず移行 |
当サイト記事、SWELLはおすすめ!【評判・レビューに忖度なくメリット・デメリットを解説】においても2022年10月時点の情報で「Cocoon・JIN・SANGO・STORK・THE THOR・AFFINGER5の6テーマから乗り換えるサポートプラグインは、SWELL購入後のマイページからダウンロード可能」と書きました。
SWELL購入から乗り換えや設定の手順は下記の14個。
- SWELLを購入
- 引き継ぐ追加CSSを修正
- ヘッダーロゴ画像作成&プラグインの見直し
- 乗り換えのためのJIN→SWELLプラグインとCustomizer Export/Importをインストール
- SWELLの親・小テーマをインストールをして、有効化前に必要プラグイン導入と削除(または停止)
- 子テーマswell-childの有効化後、外観→カスタマイズで着せ替えデータインストール
- SWELLでの各設定
- SWELL設定【管理画面】
- ウィジェット
- プラグイン修正と追加
- ユーザー
- SEO SIMPLE PACKの設定
- CSSカスタマイズ
- リライトとおまけ
引き継ぐテーマのCSSをある程度反映させるには、既存サイトのメモが推奨。メモアプリや、テキストエディットが最適です。
半角表示のスペースや改行などもデリケートな問題なので、コピペメモの際は要注意。メモの取り方に参考になる記事【JINからSWELLへテーマ変更】注意点とバックアップの手順とやり方【解説】を書きました。
SWELL移行時にプラグインの削除や導入前に読む記事
SWELL導入時から見た目をさらに良くする工夫として、「目次ハイライト・行間余白・もしもアフィリのかんたんリンクデザイン」のCSSコードを紹介しました。
実際にぼくは「10個の手順でバックアップを取るのに1時間」と「14個の手順でSWELL導入から設定まで3時間」で合計4時間かかりました。本記事を読むことで得られるメリットは下記のとおり。
- テーマ変更前のデザインを引き継げる
- SWELLに合うロゴ画像を作成できる
- 推奨プラグインがわかるので気持ちよくブログ運営できる
- 着せ替えでオシャレにデザイン
- SWELL独自の設定も細かく解説
- CSSカスタマイズで差をつける



SWELL購入から移行には「PVがたくさんある場合」で4時間確保して丁寧に作業していけば問題ないので、準備万端で取り掛かりましょう!
SWELL購入前の状況を想定していますが、「SWELL購入後にテーマ移行の手順で悩んでいる人」にも役立つ記事です。
今日はどうぞ最後まで、お読みくださいね。
現状サイトのバックアップやメモ、乗り換えの手順や気をつけることが理解できれば、乗り換えプラグインでサポートしてくれるSWELLは強い味方。ダウンロードはSWELL公式サイトから17,600円(税込)で購入できます(下記リンクからも可)。
\ 乗り換えプラグイン完備 /
ブロックエディタでの書きやすさNo.1
SWELL購入から移行・設定まで14個の手順【所要時間3時間】


現状サイトのメモやバックアップを取った状態を想定して、SWELL購入から移行・設定まで14個の手順を解説します。まとまった時間を確保しておくことがおすすめ。
SWELLをダウンロードします(下記画像をクリックするとSWELL公式サイトへ)。


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


SWELLの子テーマをダウンロードします。
SWELLの子テーマは、会員サイトマイページよりダウンロード可能。


デモサイト一覧から気に入ったデザインを選ぶ。
当サイトは、SWELL DEMO 05を選びました。


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


現状サイトバックアップのためにメモしたCSSを修正します(下記はぼくの備忘録なのでご参考までに)。もしもアフィリのボタンのアイコンを変更します。
もしもアフィリエイトの簡単リンクで、商品紹介をしていました。
JINのオリジナルアイコンで「>(矢印)」を入れていたので修正
/*fontawesomeを文字の前に*/
.easyLink-info-btn a:before {
font-family: "Font Awesome 5 Free";
content: "\f138";
padding-right: 3px;
}
SWELLで使えるFont Awesomeアイコンに対応させる
SWELL導入からしばらくして、もしもアフィリエイトのかんたんリンクから「ポチップ」に変更しました。
ボックスナビの修正をします。
JINでぽんひろさんのカスタマイズでボックスナビを活用していました
- スマホ開閉メニュー内
- サイドバー
JINオリジナルアイコン→Font Awesomeに変更します(下記サイトからHTMLコードをコピペ)。
ボックスナビのJINアイコンをSWELL対応させた例
[jin_icon_academic] から <i class="fas fa-heartbeat"></i> へ変更
SWELL公式サイトにて【SWELL – ver. 2.6.1 アップデート情報】で「ボックスメニュー」ブロックが実装されました。



2022年10月時点の情報でも次々とアップデートされることで、オリジナルカスタマイズが不要になっていくという嬉しい悲鳴です。
ロゴ画像はCANVAで1,200×180〜360(png)で、作成しておきましょう。


ヘッダーロゴ設定の参考サイト
固定ヘッダーのサイズバランス
- 画像サイズ(PC): 80px
- 画像サイズ(PC追従ヘッダー): 38px
- 画像サイズ(SP): 60px
プラグインの修正をします。
導入 | 削除 |
---|---|
Highlighting Code Block SEO SIMPLE PACK Invisible reCaptcha for WordPress Wordfence Security Imagify Converter for Media | EWWW Image Optimizer SiteGuard WP Plugin WordPress Popular Posts Autoptimize プラグイン「CARAT」 RTOC native lazy load ZEBLINE |
高速化の施策のため「画像圧縮・WebP」に効果的な無料プラグインを導入した内容を【完全版】SWELL爆速化【WebP・画像圧縮・第3者コード対策が必須】に書きました。
当サイトプラグインを公開(2022年11月時点の情報)
- BBQ Firewall
- Broken Link Checker
- Contact Form 7
- Converter for Media
- Highlighting Code Block
- Imagify
- Invisible reCaptcha
- Pochipp
- Pochipp Assist
- PS Auto Sitemap
- SEO SIMPLE PACK
- WebSub (FKA. PubSubHubbub)
- WP Multibyte Patch
- WP Revisions Control
- XML Sitemap & Google News
- XO Security
- Youtube SpeedLoad
WP Multibyte Patch・BBQ FirewallとXO Securityは【必須4つ】WordPressで最初に入れる基本プラグインのインストール方法を参考にして、導入しました。
jin-to-swell-1-1-1という乗り換えプラグインのzipファイルをインストール。
WordPress管理画面のプラグイン→新規追加→プラグインのアップロード→ファイルを選択。
Customizer Export/Importの着せ替えプラグインはWordPress管理画面「プラグイン」の検索窓に入力。


「購入した本体テーマと子テーマ」を「外観→テーマ→新規追加」から、インストール。
SWELLテーマを有効化する前に削除(停止)したプラグイン
- EWWW Image Optimizer
- SiteGuard WP Plugin
- WordPress Popular Posts
- Autoptimize
- プラグイン「CARAT」
- RTOC
- native lazy load
- ZEBLINE
SWELLテーマ有効化前に「有効化」したプラグインを紹介します。
- Highlighting Code Block
- SEO SIMPLE PACK
- Invisible reCaptcha for WordPress
- Wordfence Security
- Imagify
- Converter for Media
注意:SEO SIMPLE PACKは、記事のディスクリプションを引き継いでくれるので導入お忘れなく。
SWELLに乗り換える際に「SEO SIMPLE PACK」を導入している場合、当プラグインを有効化している間はJINで各記事に設定していたSEO用のタイトル・ディスクリプション ・noindex設定を自動で引き継ぐことができます。
引用:JINからSWELLへの乗り換えサポート用プラグイン
swell-childを有効化をすると、JINからSWELLに切り替わります。
親テーマはインストールしたままで、小テーマを有効化。
当サイトがテーマ有効化した直後の状態


SWELLはシンプルかつ洗練されたデザインですよね。
デモサイトの着せ替えデータを「zipファイルを解凍→datファイル」にします。


WordPress管理画面→外観→カスタマイズ→エクスポート / インポートのファイルを選択。「画像ファイルをダウンロードしてインポートしますか」 ?に「✔️(チェック)」を入れて、デモサイトのdatファイルをインポート。
WordPress管理画面から、外観→カスタマイズ、へ移動して設定します。
- WordPress設定→サイト基本情報→サイトアイコン再設定
- ホームページ設定→ホームページの表示→最新の投稿に変更
下記項目の設定を見直したいときは、マニュオンさんの【必須8項目】WordPressのおすすめ初期設定【パーマリンク設定など】を参照ください。
- 一般設定
- 投稿設定
- 表示設定
- ディスカッション設定
- メディア設定
- パーマリンク設定
- プロフィール設定
- 更新設定
- サイト全体設定→基本カラー:リンクカラーをJINと同じ#1111ccに変更
- 基本デザイン:フォント設定のみ変更
- お知らせバー:テーマ変更しましたと、Aboutへいったんリンク
- 下部固定ボタン・メニュー:目次ボタンの表示設定を[表示]に
SWELLサイトの配色設定は見やすいブログの配色パターンは色彩心理学的に設定すると悩まない!の記事が参考になります。
- ヘッダー→ヘッダーロゴの設定でロゴ画像をする設定
- ヘッダー→PC:100・PC追従ヘッダー:30・SP:80
- ヘッダーのレイアウト(PC):ヘッダーナビをロゴの横に(右寄せ)
- ヘッダー境界線:影
- ヘッダーの追従設定 ON:ヘッダーを追従させる(PC)OFF:ヘッダーを追従させる(SP)
- 検索ボタンの表示設定(SP):カスタムボタンにセット メニューボタン設定:アイコン下に表示するテキストを[MENU]に
- カスタムボタン設定:アイコンクラス名を[icon-search]にして、デフォルトの手紙マークから変更
SWELLで使えるアイコンの設定方法はアイコンを簡単に呼び出せるショートコードの使い方が参考になります。
フッター→コピーライトの設定:あいえうおLIFE(サイト名を設定)
- サイドバー:サイドバーを表示するをONにしておく
- スマホはサイドバー内容は下に移動するのでOK(SWELLはスマホのみで記事下に表示するサイドバーも設定可能)
- トップページ→メインビジュアル:表示しない(デザイン落ち着くまでは保留)
- デフォルトではSWELL関連画像のスライドショー
- 記事スライダー:設置するに変更
- スライド設定でスライダーの枚数設定(PC)4、スライダーの枚数設定(SP)2
- 投稿・固定ページ:アイキャッチ画像を固定ページにも、[ON]本文の始めにアイキャッチ画像を表示
- コンテンツのデザインを、見出し2のデザイン[ふきだし風]見出し3のデザイン[左に2色のブロック]見出し4のデザイン[チェックアイコン]
- テキストリンクを[ON]テキストリンクにアンダーラインを付ける
- 目次:[ストライプ背景]目次のデザイン
見出しをオリジナルでCSSカスタマイズしたいときは、SWELLの見出しをCSSでサルワカデザインに【SANGO風でおしゃれ】をお読みください。
- 記事一覧リスト:タブ切り替え設定(トップページ)[ON]
- 「新着記事タブ」を追加する
- 「人気記事タブ」を追加する
SNS情報:バックアップメモから再設定
- メニュー:JINのSPハンバーガーメニュー[削除]
- スマホ開閉メニュー内に、JIN時代の[スマホスライドメニュー]削除
- スマホの固定フッター[設置]+HOMEとSNSを設置
JINのバックアップメモからSWELLテーマ用に修正したものをコピペ
- JINオリジナルアイコンが[✖️]マークになっている
- JINオリジナルアイコンを使ったアイコンボックスがマーク表示されてない
- 吹き出しの名前の部分がはみ出ている
- 見出しボックスがうまく表示されてない(SWELLのキャプションボックスに切り替え予定)
ボックスメニューについては冒頭の「STEP2」に書きました。
SWELL独自の内部SEO対策が豊富です。
[SWELL設定]
- 高速化
- 構造化データ
- jQuery
- Font Awesome→CSSで読み込む
- 機能停止
- 広告コード→記事内広告"ad"と目次広告と自動広告(導入して、Advanced Adsを停止)を設定
- [ads.txt]google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0→Googleアドセンスの[アカウント]→[アカウント情報]→[パブリッシャーID]を記入
[SWELLERS' 設定]をします。
SWELLERS' IDを設定する(SWELLEERのマイページにて)。
外観→ウィジェットへ移動
- スマホ開閉メニュー下にナビゲーションメニュー(JINオリジナルアイコンから変更する)
- CTAウィジェットに、SWELLプロモーションバナー設置
- メニュー:グローバルメニューの設定、フッターメニューの設定、スマホ開閉メニューの設定(カテゴリページ設定すると、説明文も入るのでここで削除しておく)
SWELLの推奨プラグインに適正化しましょう。
- Invisible reCaptchaの設定(GoogleアカウントでreCaptchaV3の設定)
- Contact Form7へrecaptcav3のサイトキーと、シークレットキーを入力して紐付け
- Wordfence Security導入→XO Securityに変更(20210625〜)理由:Wordfence SecurityではSWELL設定の変更でブロックが起きてしまう
- Imagify(2021.7追記)導入して画像圧縮
- Converter for Media(2021.7追記)でアップロード済みの画像も全てWebPに変換可能
実際に当サイトで設定していたプロフィール。
プロフィール情報入力
広島在住 / 医薬品登録販売者として、【お薬・漢方・サプリメント】をお届けする営業パーソン / 衣食住のライフスタイルやメンタルヘルスのケアをしています / 配置薬10年・WordPress1年半・動画編集1年 / 依存しない自立した生き方のマインドや他者貢献の姿勢・日常の切り抜きを発信中 / 人生より良くしたい人好き
主にやることは、Googleアナリティクス、サーチコンソール、OGP設定を行います。OGP設定をしておくことで、サイトをシェアされたときのサムネイルがきちんと表示。
見た目に差をつけるCSSカスタマイズを参考に紹介します。
①:目次ハイライト機能(function.phpと追加CSS)
追加CSSに記入
/*目次ハイライト*/
a.p-toc__link.mkj-active {
background-color: #F8FFB9;
}
li.mkj-marker::before {
background-color: #F8FFB9;
}
function.phpを編集
function motoki_mkj_highlighter() {
echo <<< EOM
<script>
const mkjHighlight = (e) => {
const hashes = document.querySelectorAll(".widget_swell_index a");
const sy = window.pageYOffset;
const ey = sy + document.documentElement.clientHeight;
let userAgent = window.navigator.userAgent.toLowerCase();
let focusEl = [null, null];
hashes.forEach((el) => {
const targetEl = document.querySelector(decodeURI(el.hash));
const y = sy + targetEl.getBoundingClientRect().top;
el.closest(".p-toc__list li").classList.remove("mkj-marker");
el.classList.remove("mkj-active");
if (sy < y && y < ey && !focusEl[1]) {
focusEl[1] = el;
focusEl[0] = null;
}
if (sy > y) focusEl[0] = el;
});
if (focusEl.length)
focusEl.forEach((el) => {
el && el.classList.add("mkj-active");
el && el.closest(".p-toc__list > li").classList.add("mkj-marker");
});
};
mkjHighlight();
window.addEventListener("scroll", mkjHighlight);
EOM;
}
add_action( 'wp_print_footer_scripts', 'motoki_mkj_highlighter' );
②:行間に読みやすい余白をつける
追加CSSに記入
/*行間*/
.post_content {
line-height: 2.0;
}
/*ブロック間余白*/
.post_content > p {
margin-bottom: 5.0em;
}
/*SWELLステップブロック行間*/
.swell-block-step__body {
line-height: 2.0;
}
/*ステップブロックブロック間*/
.swell-block-step__body > p {
margin-bottom: 3.0em;
}
/*ステップブロックタイトル余白*/
.swell-block-step__title {
margin: 1.7em 0 1.0em;
}
③:もしもアフィリの「かんたんリンク」のボタンやデザイン変更
/*もしもアフィリかんたんリンク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;
}}
冒頭STEP2で「矢印アイコン」をJINオリジナルからFont Awesomeに修正。
人気記事ランキングページはWordPress Popular Postsのショートコードを削除して、SWELLの「投稿リストブロック」で表示しました。


プラグインやショートコードなしで表示可能
ブログパーツを有効活用すれば、カテゴリごとの記事ページへ飛ぶバナー作成を作成可能。ブログパーツについては登録したコンテンツを自由に呼び出せる「ブログパーツ」機能をお読みください。
使用例についてはくうかんシンプルライフさんのこんな使い方してます!SWELLブログパーツの利用例がおすすめです。スマホメニュー内に運営者情報をブログパーツ化したものを設置することもできます。
「タブブロックと投稿リストブロックやグループ化機能」でブログパーツ化すると、様々な場所に配置可能。
以上の14個に大別した手順と詳細をお伝えしました。
まとめ | バックアップ後は14の手順でSWELLを軌道に


今日はJINからSWELLへテーマ変更したいけど手順が分からず悩む人に向けて、下記を解説しました。
- SWELL購入から乗り換えや設定まで合計14個の手順
- 引き継ぐテーマのCSSとプラグインの修正や見直しのポイント
- SWELLの見た目をさらに良くするCSSも紹介



本記事を実践することでテーマ変更前のデザインを引き継げますし、SWELLと相性のよいプラグインやCSSと設定が可能になるので、安心してJINからテーマ変更できますよ。
作業時間は4時間確保して丁寧に作業していけば問題ないので、準備万端で取り掛かりましょう!JINも14,800円(税込)かかりましたが、SWELLはさらに高い17,600円(税込)というお値段です。
使い勝手やサイトスピード・SEO対策に加えデザインは損させないテーマなので、自信を持って乗り換えていくためにもまずはSWELL公式サイトからダウンロード
\ 乗り換えプラグイン完備 /
ブロックエディタでの書きやすさNo.1
無事に乗り換え作業完了した後は、SWELL乗り換えを機に「セルフバック5万円達成やアフィリエイト」にチャレンジするのがおすすめ。ASPへの登録やセルフバック案件についても、A8.netのセルフバック【自己アフィリ】で5万円稼ぐ案件とは?【体験談】に書きました。
今日は最後までお読みいただき、ありがとうございました!