
WordPressテーマJINからSWELL
不安で仕方ないです。。
今回は、上記のお悩みに答えていきます。
JINからSWELL
本記事を読むことで得られるメリットは下記の内容です。
- テーマ変更前のデザインを引き継げる
- SWELLに合うロゴ画像を作成できる
- 推奨プラグインがわかるので気持ちよくブログ運営できる
- 着せ替えでオシャレにデザイン
- SWELL独自の設定も細かく解説
- CSSカスタマイズで差をつける
SWELL
検討中の人は下記の記事もおすすめです。
- 上記の記事の10個の手順でバックアップを取るのに1時間
- 今回の記事で、SWELLを導入して、設定していくのに、3時間



合計4時間は確保していくのがオススメ。
焦ってしまって、ブログ辞めたくなるレベルで取り返しつかないよりマシですね笑
作業は大変ですが、SWELLerへの道を丁寧に進んでいきましょう。
今日はどうぞ、最後までお読みくださいね。
\ 乗り換えプラグイン完備 /
ブロックエディタでの書きやすさNo.1
1:SWELLの導入


>https://u.swell-theme.com/mypage/
JINからSWELL


下準備が必要なければ、一気に手順の4:乗り換えのためのJIN→SWELLプラグインとCustomizer Export/Importをインストールへ。
2:引き継ぐ追加CSSを修正
以下は、ぼくの備忘録となります(ご参考までに)。
もしもアフィリのボタンのアイコンを変更
もしもアフィリエイトの簡単リンクで、商品紹介をしていました。
JINのオリジナルアイコンで、「>(矢印)」を入れていたので、下記に修正予定。
/*fontawesomeを文字の前に*/
.easyLink-info-btn a:before {
font-family: "Font Awesome 5 Free";
content: "\f138";
padding-right: 3px;
}
ボックスナビの修正
- スマホ開閉メニュー
- サイドバー
ボックスナビを上記に入れてみる。
JINオリジナルアイコン→Fontawesomeに変更(下記は変更例)。
[jin_icon_academic]→<i class="fas fa-heartbeat"></i>
3:ヘッダーロゴ画像作成&プラグインの見直し
ロゴ画像はCANVAで、1200×360(png)で作成しておく。
背景透過とPNG
ロゴサイズの修正【追記:2021/09/21】
記事内で、ヘッダーのサイズを1,200✖️360で作成したと書いた。
— あいうえおLIFE@登録販売者✖︎ ︎WordPress ✖︎動画編集 (@pledge17uchs) September 20, 2021
けど、1,200✖️180がちょうどよかったというオチ笑笑😂 pic.twitter.com/6OFZU5JFOW
- 画像サイズ(PC): 80px
- 画像サイズ(PC追従ヘッダー): 38px
- 画像サイズ(SP): 60px
プラグインの修正
上記の公式マニュアルで、削除(停止)するプラグインと、導入するプラグインを決めます。
- 削除(停止)→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追記)
6:SWELL Childの有効化後、外観→カスタマイズで着せ替えデータインストール



SWELL Childの有効化をすると、いよいよJINからSWELLに切り替わります!
すっぴん状態のテーマ有効化状態は下記画像の通り。


下記から、デザインを着せ替え。
デモサイトの着せ替えデータは、ZIPファイルを解凍→datファイルにする。
WordPress管理画面→外観→カスタマイズ→エクスポート / インポートのファイルを選択。
画像ファイルをダウンロードしてインポートしますか ?に✔️を入れて、datファイルをインポート。
7:SWELLでの各設定



WordPress管理画面から、外観→カスタマイズ、へ移動して設定します。
WordPress設定→サイト基本情報→サイトアイコン再設定 ホームページ設定→ホームページの表示→最新の投稿に変更
- サイト全体設定→基本カラー:リンクカラーをJINと同じ#1111ccに変更
- 基本デザイン:フォント設定のみ変更
- お知らせバー:テーマ変更しましたと、Aboutへいったんリンク
- 下部固定ボタン・メニュー:目次ボタンの表示設定を[表示]に
- ヘッダー→ヘッダーロゴの設定でロゴ画像をする設定
- ヘッダー→PC 100 PC追従ヘッダー 30 SP 80
- ヘッダーのレイアウト(PC):ヘッダーナビをロゴの横に(右寄せ)
- ヘッダー境界線:影
- ヘッダーの追従設定 ON:ヘッダーを追従させる(PC)OFF:ヘッダーを追従させる(SP)
- >参考:https://osukeblog.com/swell-customize/#index_id3
- 検索ボタンの表示設定(SP):カスタムボタンにセット メニューボタン設定:アイコン下に表示するテキストを[MENU]に
- カスタムボタン設定:アイコンクラス名を[icon-search]にして、デフォルトの手紙マークから変更
フッター→コピーライトの設定:あいえうおLIFE
- サイドバー:サイドバーを表示するをONにしておく
- スマホはサイドバー内容は下に移動するのでok(swellは独自で切り替え可能)
- トップページ→メインビジュアル:表示しない(デザイン落ち着くまでは保留)
- デフォルトではSWELL関連画像のスライドショー
- 記事スライダー:設置するに変更
- スライド設定でスライダーの枚数設定(PC)4、スライダーの枚数設定(SP)2
- 投稿・固定ページ:アイキャッチ画像を固定ページにも、[ON]本文の始めにアイキャッチ画像を表示
- コンテンツのデザインを、見出し2のデザイン[ふきだし風]見出し3のデザイン[左に2色のブロック]見出し4のデザイン[チェックアイコン]
- テキストリンクを[ON]テキストリンクにアンダーラインを付ける
- 目次:[ストライプ背景]目次のデザイン
- 記事一覧リスト:タブ切り替え設定(トップページ)[ON]
- 「新着記事タブ」を追加する
- 「人気記事タブ」を追加する
SNS情報:バックアップメモから再設定
- メニュー:JINのSPハンバーガーメニュー[削除]
- スマホ開閉メニュー内に、JIN時代の[スマホスライドメニュー]削除
- スマホの固定フッター[設置]+HOMEとSNSを設置
追加CSS:JINのバックアップメモからSWELLテーマ用に修正したものをコピペ
- 気になるところ→JINオリジナルアイコンが[✖️]マークになっている
- JINオリジナルアイコンを使ったアイコンボックスがマーク表示されてない
- 吹き出しの名前の部分がはみ出ている
- 見出しボックスがうまく表示されてない(SWELLのキャプションボックスに切り替え予定)
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:プラグイン修正と追加
- 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:ユーザー



下記は実際に、当サイトで設定しているプロフィール。
プロフィール情報入力
広島在住 / 医薬品登録販売者として、【お薬・漢方・サプリメント】をお届けする営業パーソン / 衣食住のライフスタイルやメンタルヘルスのケアをしています / 配置薬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に参考サイトのコード記入。
②余白
>参考: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; /* 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;
}}
14:リライトとおまけ
- 人気記事ランキング:ポピュラーポストのショートコード削除して、SWELLの「投稿リスト機能」で人気記事表示
こんな感じにできます。
- 投稿ページのリライト
- Useful Blocks有料買って、CVボックスをグレードアップして、ブログパーツ化して、ウィジェットとして、CTAゾーンへ
これがCTA。
ブログパーツで、カテゴリごとの記事ページへ飛ぶバナー作成
>https://www.kurasitotonoe.com/entry/swell-blogparts/
スマホメニュー内に運営者情報のブログパーツ
>https://sorairolog.com/swell_reliability_part/
目次下にプロフィール
>https://www.cg-method.com/side-job/wordpress-swell-customize/
ウィジェットで、テキストにブログパーツIDを貼る
>https://swell-theme.com/function/2565/
フッター直前に各カテゴリ別新着記事ブログパーツ
>https://www.kurasitotonoe.com/entry/swell-blogparts/#index_id3
まとめ | バックアップ後は14の手順でSWELLを軌道に


今回は、「JINからSWELL
SWELLには、独自の「乗り換えサポートプラグイン」があるので、活用するべし。
下記の⑤でテーマ有効化する前に、プラグインの調整。
- SWELLの導入
- 引き継ぐ追加CSSを修正
- ロゴ画像作成&プラグインの見直し
- 乗り換えのためのJIN→SWELLプラグインとCustomizer Export/Importをインストール
- SWELLテーマを2種インストールをして、有効化前に必要プラグイン導入と削除
- SWELL Childの有効化後、外観→カスタマイズで着せ替えデータインストール
- SWELLでの各設定
- SWELL設定【管理画面】
- ウィジェット
- プラグイン修正と追加
- ユーザー
- SEOパック
- CSSカスタマイズ
- リライトとおまけ
上記のメリットは下記。
- テーマ変更前のデザインを引き継げる
- SWELLに合うロゴ画像を作成できる
- 推奨プラグインがわかるので気持ちよくブログ運営できる
- 着せ替えでオシャレにデザイン
- SWELL独自の設定も細かく解説
- CSSカスタマイズで差をつける
SWELLの良さは下記の記事でおすすめしています。
それでは、今日はここまで読んでいただきありがとうございます!