メニュー

テーマ変更に重要なバックアップの手順とやり方【FTPソフトやプラグインを解説】

JINSWELL注意点

本記事は約33分で読むことができます。

JINからSWELLへテーマ変更するのにバックアップの取り方で悩む人

テーマ変更時にやる既存サイトのバックアップの方法が知りたいです
既存サイトのバックアップ(メモ)を取るのに必要な項目は?

あいうえおLIFE

今日は「お悩み解決に役立つ内容」をお伝えしていきます!

テーマ変更時には既存サイトのバックアップが必須と聞いても、どの方法が最適なのか気になりますよね。ぼくも既存サイトのバックアップ(メモ)を取るのに必要な項目が分からず、作業が進まないまま困っていました…

本記事の結論
  • 既存サイトのバックアップはFTPソフトやバックアッププラグインでとる
  • 既存サイト内容のバックアップ(メモ)は9項目

本記事では詳細を解説します。既存サイトのバックアップを取得しておくことは、「元のサイト内容に戻したい・エラーでサイトが壊れた・アップデートで機能に影響が出た」ときに役立ちます。

FTPソフトとは、サーバーにファイルを転送するためのプロトコル(通信規約)のこと。バックアッププラグインはFTPソフトの操作性が難しく感じる人にはおすすめで、既存サイト全体の丸ごとバックアップが簡単にできます。

既存サイト内容のバックアップ(メモ)は手動でコピペしていきますが、下記のとおり9項目推奨。

既存サイト内容のバックアップ(メモ)

  1. 投稿→カテゴリ:カテゴリごとの説明文
  2. 固定ページ
  3. CTA
  4. 広告管理
  5. HTMLタグ設定
  6. Advanced Ads
  7. 外観
  8. プラグイン
  9. 記事のメタディスクリプション

バックアップの手動メモはGoogleドキュメントがおすすめで、所要時間は1時間ほどです。

実際にぼくが本記事で紹介した「データとメモのバックアップ」をとってSWELLへテーマ変更したことで、現状サイトに近づけたまま記事に取り掛かることが出来ました。SWELLへテーマ変更した内容は【14個の手順】JINからSWELLへテーマ変更(移行・乗り換え)のやり方に書きました。

本記事を読むことで得られるメリット

  • 既存サイトのバックアップにおすすめなFTPソフトやバックアッププラグインの使い方がわかる
  • 既存サイト内容の手動バックアップ(メモ)をGoogleドキュメントでとる9項目がわかる
あいうえおLIFE

JINからSWELLにテーマ変更したい人が安心して、準備を万端にできる記事になること間違いなし。

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

タップできるもくじ

サイト運営者について : 「副業スキルで複数収入」がテーマ / 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者 / 2サイト合計最高月間1万5,000PV / ブログ収益:月3万〜4万円

テーマ変更前に既存サイトのバックアップ

テーマ変更前に既存サイトのバックアップ
テーマ変更前に既存サイトのバックアップ

WordPress(ワードプレス)のバックアップが必要な理由

①改ざんなどへの事前対策②アップデートなどによる不具合からの修復ができる③カスタマイズ中のミスに対応できる

引用:教えて!レンタルサーバーのこと

テーマ変更前に既存サイトのバックアップは、FTPソフト(FileZilaがおすすめ)かバックアッププラグインで行いましょう。

①:FTPソフト(FileZilaがおすすめ)

TCD(WordPress Theme)によると、FTPソフトは下記の3つがピックアップされています。

代表的なFTPソフト

  • FileZilla(ファイルジラ)
  • FFFTP
  • Cyberduck(サイバーダック)

FileZilla(ファイルジラ)はWindowsとMac両方に対応しています。

FileZillaの接続設定に必要なもの

Xserverを利用しているときの設定方法を解説します。

ファイルジラ接続内容
ファイルジラ接続内容
スクロールできます
①プロトコル②ホスト③暗号化④ログオンの種類⑤ユーザ⑥パスワード
設定内容「FTP-ファイル転送プロトコル」を選択sv●●●●.xserver.jp「明示的なFTP over TLSが必要」を選択「通常」を選択FTPユーザー名FTPパスワード
Xserver利用時にFTP接続設定

「②ホスト・⑤ユーザ・⑥パスワード」はサーバー契約時に届いたメールから確認。

詳細はサルワカさんの【FileZillaの使い方】WordPressでFTPソフトを使おうを参照してください。

バックアップを取得する対象は目的別

  • プラグインなどを復旧する必要もある場合は【サイト名】→【public_html】をダウンロード
  • プラグインなど不要の場合は【public_html】→【wp-content】をダウンロード

②:バックアッププラグイン(BackWPupがおすすめ)

FTPソフトでは手動バックアップでデータをダウンロードすることになりますが、バックアッププラグインを使えば定期的なスケジュールでデータを保存することができます。TCD(WordPress Theme)によると、下記の3つのプラグインがピックアップ。

代表的なバックアッププラグイン

  • BackWPup
  • All-in-One WP Migration
  • UpdraftPlus
スクロールできます
BackWPupAll-in-One WP MigrationUpdraftPlus
メリット時間を指定して定期的自動バックアップが可能
バックアップデータを1つにまとめられる
ボタン1つでバックアップファイルを作成
不要なファイルを省くことが可能
復元作業が簡単
無料版でも特に容量制限なし
無料版でも自動バックアップ可能
管理画面内でバックアップと復元が完結
プラグインやテーマなどバックアップファイルが5つに分けられている
デメリット復元作業が少し面倒な点無料版はバックアップは手動のみ
無料版でインポートできるファイルは最大512MBまで
バックアップデータがエクスポートした側のサーバー上に残る
サイトの引越しには、少し手間がかかる
1つのサイトのバックアップファイルが計5つで管理数が多くなる
各々のメリットデメリット

BackWPUpの使い方

サクッとバックアップを取りたいだけのときは、簡単な設定で定期的に自動でバックアップをとってくれるプラグイン「BackWPup」を参照してください。

バズ部さんの記事も分かりやすい

バックアップデータを元に「復元する」やり方は「BackWPup」のバックアップデータを復元する方法をお読みください。

「BackWPup」で復元する際はデータベースを復元するので、phpMyAdminのログイン情報を確認する方法を読んでphpMyAdminへ接続しましょう。

既存サイト内容のバックアップ(メモ)9項目をGoogleドキュメントでとる

SWELL
Designed by vectorpouch / Freepik

実際にJINからSWELLへテーマ変更したときに、既存サイトの設定をGoogleドキュメントでメモした内容を公開します。

①:投稿→カテゴリでカテゴリごとの説明文

2022年11月現在は雑記ブログとして移行しましたが、上記固定ページのAbout(紹介記事)でカテゴリ説明文を反映するようにしていました。

カテゴリ説明文

WordPress

WordPressをいじりながら問題解決に至ったブログなどを紹介しています。備忘録が誰かの役に立つと嬉しいです。

あ「愛情」

目に見える健康や目に見えない自然治癒力の原動力 大自然や家庭の中で育まれる愛が1番のリソース(源)です!

い「生きがい」

ここは人それぞれです!趣味や好きなことが当てはまります

う「運動」

自転車で言えば前輪です!カラダを動かすことが、酸素など全てを送り届けます

え「栄養」

自転車で言えば後輪が「食事」。日本人なら主食はお米ですが、糖質脂質の取りすぎに気をつけ、ビタミン・ミネラルを積極的に取り、代謝を促進しましょう

お「温活」

カラダを温めること。体温が1度上がるだけで、免疫力が20%〜30%上がります。お灸や、温熱療法、お風呂にゆっくり浸かるというホットライフ

健康のススメ

あいうえおLIFEでの健康づくりの基本的なハウツー。本来あるべき姿、病気の原因に迫る、生活習慣の改善法「あいうえおLIFE」という流れです。

SWELLでは「カテゴリ」に遷移するバナーをブログパーツで作成可能(リンク先は解除しています)。

バナー以外にも多くの機能をワンタッチで使用できるSWELLについてはSWELLはおすすめ!【評判・レビューに忖度なくメリット・デメリットを解説】に書きましたので、あわせてどうぞ。

②:固定ページ

固定ページはテーマ変更後も引き継ぐので、SWELLへテーマ変更後の方向性や修正箇所を考えておく。

  • About:JINオリジナルアイコンを使っていた文字列を削除する予定
  • サイトマップ:PS Auto Sitemapは引き続き使用する
  • トップページ:JINでサイト型トップページを作っていたが、SWELLのブロック機能で作成できるので、作り直さず現状のトップページをスクショしてメモ
  • プライバシーポリシー:現状維持
  • 人気記事1週間版:JINのデフォルト機能では人気記事の設定が使えないので、WordPress Popular Postsのプラグインを使用
  • 記事一覧ー投稿ページ:SWELLでもサイト型にすれば、投稿ページが必要なので継続使用
  • お問い合わせ:Contact form7のショートコードで作っていましたが、SWELL開発者了さんが推奨プラグインと非推奨・不要・注意すべきプラグインについてにてWPFormsが紹介されていたので変更検討

使っていたトップページを書き換えるので、JINオリジナルアイコン使っている部分やショートコードで呼び出している部分は維持しておく。

ページの全画面キャプチャーのやり方

Chromeでトップページを開く→【⌘+option+I】→【⌘+shift+P】→【fullと入力】

人気記事ランキング固定ページの方向性

JINに固定ページで「1週間人気記事ランキング」を作成していた内容は【JIN】固定ページに人気記事ランキングを作るやり方【ショートコード】に書きましたので、あわせてどうぞ。

  • 固定ページに週間の人気記事ランキングを作成して、スマホのフッターメニューに設定していた(JIN当時)
  • SWELLでもデフォルトで人気記事ランキング使えますが、週間ランキングは作成不可なのでWPPP使用を停止の方向へ

③:CTA

使っていなかったのでなし。CTAとはCall To Action(コール・トゥ・アクション)を略したもので、「サイトやブログを見た人に何らかの行動を促すこと」を意味します。

CTAの作り方

SWELLと相性ぴったりなUseful Blocksの「CVボックス」という機能で、オシャレなCTAを作成可能。

Useful BlocksのCVボックス

デザインの好みですがSWELLでは「プラグイン不要」でブログパーツ機能や「広告タグ」で作成したCTAを簡単に呼び出すことができます。

SWELLの広告タグの例

④:広告管理

SWELLでは記事下と関連記事下への広告(アドセンスなど)は、ウィジェットで設定します。

JINの広告設定からメモ

  • 【最初のH2見出しの上に表示される広告】→JINのH2見出し上の記事内広告をメモ
  • 【記事下】と【関連記事下】にも個別に設置

JINには広告管理の箇所がありましたが、SWELLになると「SWELL設定」という箇所にアドセンスコードを入力します。

SWELL公式サイトによるアドセンス設定方法

Googleアドセンスの貼り付け方【申請コード・広告ウィジェット・目次前広告・自動広告】を参照ください。

⑤:HTMLタグ設定

JINでは「サーチコンソール・アナリティクス」の必要記述箇所。

JIN【head内】
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-00000000-0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '00000000-0');
</script>

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<meta name="google-site-verification" content="ここはそれぞれ" />
<meta name="p:domain_verify" content="ここはそれぞれ"/>
あいうえおLIFE

SWELLは「SEO SIMPLE PACK」というプラグインを入れて設定することになるので、メモ必須。

SWELLでのサーチコンソール・アナリティクス設定

マニュオンさんのSEO SIMPLE PACKの設定方法と使い方【SWELLでnoindex】を参照ください。

⑥:Advanced Ads

JINではH2見出し1つ目だけだったので、プラグインでアドセンスの表示を拡張していました。

Advanced Adsの設定

各H2見出し上に設定していた。

詳細は【神プラグインAdvanced Adsの使い方】広告設置方法&知らなきゃ損のマル秘機能をあわせてどうぞ。

SWELLでのアドセンス設定箇所

共通サイドバーなど「18ヶ所」のウィジェットに設定可能(SWELLで使用できるウィジェットエリア一覧参照)。

2022年9月3日SWELL公式サイトにて、任意のH2見出しごとに表示させるカスタマイズが公表されました。

// X個ごと(Xn番目)のh2の終わりに 

スポンサーリンク

広告 を挿入するコード function swl_custom__add_ad_automatically( $the_content ) { $X = 2; // 投稿ページ以外は何もしない。 if ( ! is_single() ) return $the_content; // 本文内のH2を取得 PREG_SET_ORDER $has_h2 = preg_match_all( '/^<h2.*?>.+?<\/h2>$/im', $the_content, $h2_list, PREG_SET_ORDER ); // h2がなければ何もしない if ( ! $has_h2 ) return $the_content; // Xn番目の見出しのコンテンツの最後 = Xn+1 番目の見出しの直前 にコードを挿入する foreach ( $h2_list as $num => $h2 ) { if ( $num && ( $num % $X === 0 ) ) { $the_content = str_replace( $h2[0], '

スポンサーリンク

' . $h2[0], $the_content ); } } return $the_content; } add_filter( 'the_content', 'swl_custom__add_ad_automatically' );

「functions.php」を編集して「$X = 2;」の整数値を修正することで、H2見出し何個ごとに表示させるか決定できます。

⑦:外観

「外観」パートが1番メモしておくこと多いですが、「デザインや見た目」に関わる箇所なので時間をかけていきます。

STEP
カスタマイズ

a.基本設定

テーマ変更すると大事なサイトの特徴部分となる記述が消えることがあるので、メモ(バックアップ)推奨。

  • SEO用タイトル:あいうえおLIFE 【健康のススメ】
  • SEO用サブタイトル:健康づくりの秘訣
  • ディスクリプション:このサイトでは、あいうえおをキーワードに健康づくりをしていきます。趣味や、運動、食事なども、健康に関わるコンテンツですので、併せてあいうえおLIFEとして発信していきます。お役に立てれば嬉しいです。ライフハックしながら時代の流れに乗って、豊かに便利に楽しく生きましょう。

b.カラー設定

テーマ変更すると引き継がない可能性があるので、テーマ変更前のテーマカラーや、リンク色など再現したい時は、控えておきましょう。

  • テーマカラー:#0e9de4
  • サイトやタイトルの文字色:#2e1a03
  • リンクの色:#1111cc
  • リンクにマウスオーバー色:#1a3dff
  • サイト内の文字色:#333333

c.SNS設定(OGP)

テーマ変更や着せ替えデータを読み込むと消えます。

d.メニュー

テーマ変更すると引き継がない可能性あるので、メモすべし。

SPハンバーガーメニュー

  • フロントページ
  • トップページ
  • About
  • YouTube
  • 記事一覧
  • 人気記事【1週間版】
  • サイトマップ

スマホのフッターメニュー

  • HOME
  • 記事一覧
  • 人気記事
  • MENU

スマホスライドメニュー

  • トップページ
  • 記事一覧
  • 紹介
  • 人気記事
  • コロナ
  • 鬼滅の刃
  • ビタミン
  • JIN
  • サイトマップ
  • お問い合わせ

e.ウィジェット

①サイト内検索(JINテーマの検索窓を設置して、キーワード検索に対応させていた)

②プロフィール(運営者情報で自己紹介を作っていた→HTMLを書いて内容を増やしていました):プロフィール名 :あいうえおLIFE(肩書き →CARP×登録販売者×動画編集)

プロフィールの説明文(HTML)
<div align="center">
<div id="profile_link">
<a href="https://aiueolife.com/page-9/">ごあいさつ</a></div>​<br>【↓YouTubeやってます↓】<br>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-layout="full" data-count="default" data-channelid="UCixcCo68uriqY1EPO0RCBhQ"></div><br><strong>
↑チャンネル登録喜びます↑</strong><br>
【Personal】<br>
愛知県出身<br>
広島在住6年の30代CARP男子<br>
医薬品登録販売者<br>
【Like】<br>
テニス・動画編集・ブログ<br>
YouTubeで学習<br>
【Wants】<br>
プログラミング<br>
英語力<br>

【Mission】<br>
ライフスタイルデザイナー<br>
地域医療に貢献<br>
【Life】<br>
魚座と正直者のこじか<br>
2018.2.22 入籍 東京育ちの妻<br>
<a href="https://aiueolife.com/sitemap-aiueo/">サイトマップへGo</a>
<div>

③ナビゲーション

元ネタはぽんひろさんのボックスナビの記事。

アイコンはJINオリジナルアイコンなので、SWELLアイコンか、Fontawesomeに切り替える予定です。

ソースコード
<div class="p-nav">
<ul>
<li><a href="https://aiueolife.com/sitemap-aiueo/">[jin_icon_camp]<span class="p-nav-title">サイトマップ</span></a></li>
<li><a href="https://aiueolife.com/page-9/">[jin_icon_relatedpost]<span class="p-nav-title">紹介</span></a></li>
<li><a href="https://aiueolife.com/popularposts/">[jin_icon_crown]<span class="p-nav-title">人気記事</span></a></li>
<li><a href="https://aiueolife.com/tag/新型コロナウイルス/">[jin_icon_drag]<span class="p-nav-title">コロナ</span></a></li>
<li><a href="https://aiueolife.com/tag/鬼滅の刃/">[jin_icon_writer]<span class="p-nav-title">鬼滅の刃</span></a></li>
<li><a href="https://aiueolife.com/tag/ビタミン/">[jin_icon_datsumou]<span class="p-nav-title">ビタミン</span></a></li>
<li><a href="https://aiueolife.com/tag/jin/">[jin_icon_homewifi]
<span class="p-nav-title">JIN</span></a></li>
<li><a href="https://aiueolife.com/page-11/">[jin_icon_airline]<span class="p-nav-title">問い合わせ</span></a></li>
</ul>
</div>

【14個の手順】JINからSWELLへテーマ変更(移行・乗り換え)のやり方に「アイコン」の置き換えを書きました。

④最近の投稿→新着記事

とりあえず新しいものから読みたい読者向けに設置していた。

⑤WordPress Popular Posts:よく読まれている記事

ブログ内で人気の記事を表示することで、検索需要の高い記事への注目を増やしていた。

⑥カテゴリー:カテゴリー

カテゴリーの表示で、関連情報を探しやすく表示。

⑦タグクラウド:検索キーワード

タグの一覧を表示することで、サイト内のキーワードの見える化をしていた。

⑧アーカイブ:アーカイブ

年月ごとに記事数の表示をしていた。

⑨カスタムHTML

トップページへ戻るボタン↓↓

<div class="t-aligncenter"><span class="color-button01-big"><a href="https://aiueolife.com">トップページへ</a></span></div>

⑩カスタムHTML

1週間のランキングへ飛ぶボタン↓↓

<div class="t-aligncenter"><span class="color-button02-big"><a href="https://aiueolife.com/popularposts/"><small>1週間のランキングへ</small></a></span></div>

f.追加CSSのメモ

SWELLにしてから不要になるものは削除する予定。

【JIN】追加CSS
/*パンくずリスト*/
#breadcrumb li:last-child {
	display:none;
	}
/*人気記事*/
.orange-badge {
  color: #fff; 
  font-size: 14px;
  margin-right: 10px;
  background-color: #e45653;
  border-radius: 2px;
  padding: 8px 8px 7px;
}
/*h2 タイプ5の横幅いっぱいformen*/
@media (max-width: 500px){/*スマホ表示*/
.h2-style05 h2 {
font-size: 1.3rem;
padding: 10px 16px;
width: calc(100% + 50px);
margin-left: -25px;
border-radius: 0;
}}
@media (min-width: 501px) and (max-width: 768px){/*タブレット表示*/
.h2-style05 h2 {
font-size: 1.5rem;
padding: 12px 26px;
width: 110.5%;
border-radius: 0;
margin-left: -20px;
}}
@media (min-width: 769px){/*PC表示*/
.h2-style05 h2 {
font-size: 1.6rem;
padding: 12px 26px;
width: 110%;
border-radius: 0;
margin-left: -30px;
}}
@media (min-width: 769px){/*左側*/
.balloon-left .balloon-serif {
margin: 0 0px 30px 125px;
}	}
@media(min-width: 769px){
.balloon-right .balloon-serif {
margin: 0 100px 30px 0px;
} } /*右側吹き出し*/ 
@media (min-width: 501px) and (max-width: 768px){/*タブレット左側吹き出し*/
.balloon-left .balloon-serif {
margin: 0 0px 30px 125px;
}	}
@media (min-width: 501px) and (max-width: 768px){
.balloon-right .balloon-serif {
margin: 0 100px 30px 0px;
} } /*タブレット右側吹き出し*/ 

/* レスポンシブ文字サイズ */
@media screen and (max-width:479px) {
  p {
      font-size: 15px;}}
.cps-post-main p {
padding-bottom: 3em;/*改行後の余白の幅*/
line-height: 2em;/*行間*/
letter-spacing: 0.05em;/*文字間*/
}
h3 { /*見出し3のNomadコード*/
  font-size: 20px !important;/*文字のサイズ*/
border-left: 10px solid #4DA1FF;/*左線*/
padding: .5em .7em;/*余白*/
  background: rgba(247,251,255,.05);/*背景色*/
color: #272727;
margin-bottom: 15px;
}
/*JINアイキャッチワイド*/
.cps-post .cps-post-thumb {
margin: 0px -30px 10px; }
/*パディング切り替わり後のアイキャッチワイド*/
@media (max-width: 1023px) {
.cps-post .cps-post-thumb {
margin: 0px -20px 10px; } }
.entry-content > p { /*改行幅*/
margin: 0 0 1.5em;
}
/**内部ブログリンクカードおしゃれにブログカードの説明文を消す*/
.blog-card-excerpt{
  display:none;
}
/*20201006ブログカードのリンクっぽく下線*/
@media (min-width: 768px){
.blog-card-title {
  text-decoration: underline;
}}
.blog-card-title {
  text-decoration: underline;
}
div.blog-card-hl-box {
   background-color: #ffffff!important;
}
.blog-card .jin-ifont-post {
 font-size: 1rem;
   background: #ff8c00;
   width: 35px;
   line-height: 35px;
   height: 35px;
   display: inline-block;
   text-align: center;
   border-radius: 50%;
   margin-right: 5px;
}
.blog-card {
   border-bottom: 25px solid;
}
.blog-card .blog-card-hl:after {
   color: #ff8c00;
   width: 340px;
   top: 3px;
   left: 0;
   font-size: 0.8rem;
   font-weight: 500;
}
.blog-card-title {
   color: #0e9de4;
}
.blog-card-excerpt {
   opacity: .7;
}
.blog-card:after {
 content: "続きを読む»";
   position: absolute;
   bottom: -22px;
   right: 7px;
   color: white;
   font-size: 14px;
}
@media (max-width: 767px){
.blog-card .jin-ifont-post:before {
   line-height: 35px;
}
.blog-card-hl-box {
   padding: 5px;
   top: -24px;
   left: 10px;
   width: 180px;
}}
@media (min-width: 768px){
.blog-card-hl-box {
   padding: 5px;
   top: -23px;
   left: 20px;
   width: 180px;
}}
/*サイドバーボックスナビ調整 */
#sidebar .p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 2列 */
flex-basis: calc(100%/2);/* 2列 */
}
/* スマホのボックスナビ調整 */
@media screen and (max-width: 559px) {
.p-nav ul li{
  -ms-flex-preferred-size: calc(100%/2);/* 2列 */
  flex-basis: calc(100%/2);/* 2列 */
}
}
/*ボックスナビCSS*/
.p-nav{
margin:2em 0;/* 全体外余白 */
padding:0;/* 全体内余白 */
}
.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/2);/* 4→2列 */
flex-basis: calc(100%/2);/* 4→2列 */
margin:0;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:100px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
 transform:scale(1.2,1.2);/*ホバー時ズームする*/
}
.p-nav ul li a img{
max-width:50% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #666;/* 文字色 */
font-size: 0.7em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 900;/* 文字太さ */
text-align: center;
line-height: 1.5;/* 文字行間高さ */
}
/* ナビのアイコン */
.p-nav ul li a i,.p-nav ul li a svg{
font-size: 40px;/* アイコン大きさ */
padding: 10px 0;/* アイコン余白 */
color: #ff8c00;/* アイコン色 */
display:inline-block;
}
/*スマホメニューにボックスナビIN*/
.sp-menu-box .p-nav ul.menu-box{
height:auto;
}
.sp-menu-box .p-nav ul{
padding: 0 7% 1%;
}
.sp-menu-box .p-nav .menu-item{
min-height:120px;
}
.sp-menu-box .p-nav li a:before{
content:unset;
}
.sp-menu-box .p-nav ul li a {
padding: 0.3em 1em 1em;
}
@media screen and (min-width: 768px) {
ul.menu-box li.menu-item a img{
  display:none;
}
}
/*WPPP人気記事ランキングリストデザイン*/
ul.wpp-list li {
  border-bottom: 1px dashed #456fed;/*記事間の点線と色*/
  position: relative;/*相対位置*/
}

ul.wpp-list li img {
box-shadow: 0 3px 6px rgba(0,0,0,0.7);/*アイキャッチ画像に影*/
margin: 5px 5px 5px 0px;/*画像の余白*/
  padding: 1px;/*画像の位置*/
border-radius: 1px;/*角を丸く*/
}
ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
  display: block;/*ブロック形式で表示*/
  font-size: 14px;/*文字サイズ*/
  color: #0e9de4;/*文字色*/
  padding: 1px;/*タイトル位置*/
}
ul.wpp-list li a.wpp-post-title:hover {
text-decoration: underline;
  color: #1111cc; /*ホバー時のタイトル色*/
}
ul.wpp-list li:before {/*ランキングカウンター全体*/
  content: counter(wpp-count);/*カウンターを表示*/
  display: block;/*ブロック形式で表示*/
  position: absolute;/*絶対位置*/
font-size: 12px;/*数字サイズ*/
  color: #fff;/*数字の色*/
  background-color: #333;/*背景色*/
  padding: 5px 10px;/*縦と横の幅*/
  border-radius: 1px;/*角の丸み*/
  top: 0;/*右からの位置*/
  left: 0;/*下からの位置*/
  opacity: 0.9;/*透明度*/
  z-index: 5000;/*重なりの順序*/
}
ul.wpp-list li {
  counter-increment: wpp-count;/*カウント数*/
}
ul.wpp-list li:nth-child(1):before{/*ランキング1*/
  background-color: #FBCC54;/*背景色*/
}
ul.wpp-list li:nth-child(2):before{/*ランキング2*/
  background-color: #B7BFC1;/*背景色*/
}
ul.wpp-list li:nth-child(3):before{/*ランキング3*/
  background-color: #D47B16;/*背景色*/
}
/*ランキング4~10をピンク透明に*/
ul.wpp-list li:nth-child(4):before{
  background-color: #ff7fa1;
}
ul.wpp-list li:nth-child(5):before{
background-color: #ff7fa1;}
ul.wpp-list li:nth-child(6):before{
background-color: #ff7fa1;}
ul.wpp-list li:nth-child(7):before{
background-color: #ff7fa1;}
ul.wpp-list li:nth-child(8):before{
background-color: #ff7fa1;}
ul.wpp-list li:nth-child(9):before{
background-color: #ff7fa1;}
ul.wpp-list li:nth-child(10):before{
background-color: #ff7fa1;}
ul.wpp-list li:nth-child(11):before{
background-color: #1e73be;}
ul.wpp-list li:nth-child(12):before{
background-color: #1e73be;}
ul.wpp-list li:nth-child(13):before{
background-color: #1e73be;}

/*スマホでyoutube等の幅を最適化*/
.responsive_video { 
  position: relative; 
  padding-bottom: 56.25%; 
}
.responsive_video video, 
.responsive_video iframe, 
.responsive_video object, 
.responsive_video embed { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
/***プロフィールにボタンつける***/
#profile_link a{
display:block;
text-align:center;
padding:0.7em 1em;
background:#ff8c00;/*ボタンカラー変更*/
width:50%;
margin:0 auto;
margin-top:20px;
border-radius:20px;
border:3px double #fff;
font-size: .75rem;
color:#fff;
box-shadow: 0 3px 6px rgba(0,0,0,0.4);/*プロフあいさつ影をつける*/
}
#profile_link a:hover{
opacity:0.75;
color:#fff;
}
/*ボックスの横幅広げるCSS*/
@media (min-width: 768px) {
.pb-iconbox,
.simple-box1,
.simple-box2,
.simple-box3,
.simple-box4,
.simple-box5,
.simple-box6,
.simple-box7,
.simple-box8,
.simple-box9,
.kaisetsu-box1,
.kaisetsu-box2,
.kaisetsu-box3,
.kaisetsu-box4,
.kaisetsu-box5,
.kaisetsu-box6,
.concept-box1,
.concept-box2,
.concept-box3,
.concept-box4,
.concept-box5,
.concept-box6,
.innerlink-box1 {
width: 100%;
}
}
/*もしもアフィリかんたんリンクCSS490まで外枠 --------- */
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; /* 文字色 */
}
/*JINアイコンフォントを文字の前に*/
.easyLink-info-btn a:before {
  font-family: "jin-icons";
  content: "\e902";
  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;
}}

/*20200929 トップページカスタマイズ*/
.home .cps-post-main{
padding-top:0;
}
.home .top-wrap{
display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content:space-between;
-ms-flex-wrap: wrap;
flex-wrap:wrap;
margin-bottom:1rem;
}
.home .top-wrap .blog-card-hl-box{
display:none;
}
.home .top-wrap .blog-card{
border:none;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18);
background:#fff;
padding:0 !important;
margin:1rem 0 !important;
flex-basis:48%;
}
.home .top-wrap .blog-card:hover{
transform: translateY(-3px);
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.08);
opacity:1 !important;
}
.home .top-wrap .blog-card:hover .blog-card-thumbnail img{
transform:none;
}
.home .top-wrap .blog-card-box{
display:block;
}
.home .top-wrap .blog-card-content{
flex:unset;
}
.home .top-wrap .blog-card-thumbnail {
margin: 0 !important;
flex: unset;
overflow: visible;
}
.home .blog-card-title{
padding:1rem;
}
.home .blog-card-excerpt{
display:none;
}
.home h1.cps-post-title{
display:none;
}
.home .cps-post-main-box h2:first-of-type{
margin-top:0 !important;
}
.home .share-top,.home .share{
display:none;
}
/*(スマホ)480px以下*/
@media screen and (max-width: 480px){
.home .top-wrap{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction:column;
}
.home .top-2{
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}
}
/*202009トップをカード幅いっぱいCSS*/
.home .cps-post-box{
  padding: 0;
  box-shadow: none;
}
@media(min-width: 1024px){
  #main-contents {
      margin-top:-15px;
}
}
/* トップ見出し */
.top_h {
position: relative;
margin-bottom: 1em!important;
font-size: 32px!important;
padding-bottom: 0!important;
text-align: center;
}
.top_h:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #3B4675;
border-radius: 2px;
}

/* ハンバーガーメニュースクロール*/
@media screen and (max-width: 767px){
.sp-menu-box  {
  overflow: scroll;
}}
/*スマホのハンバーガーメニュー背景色*/
.sp-menu-box {
background-color: rgba(255, 254, 253, 0.9); /* 背景色で最後が透明度 */
}
.my-btn {/*アフィリンクボタン*/
text-align: center;
margin-bottom: 2rem;
}
.my-btn a {
display: inline-block;
width: 70%;/**PCでのボタンの幅**/
margin: 20px auto;
padding: 10px;
border-radius: 5px;
text-align: center;
color: #fff!important;
text-decoration: none;
font-size: 15px;
line-height: 27px;
font-weight: bold;
background: #FF8C00;
border-bottom: 4px solid #ff8000;
position: relative;
overflow: hidden;
}
/* 自作のキラッとのボタンを凹ませる */
.my-btn a:active {
transform: translateY(4px); /*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); /*影を小さく*/
border-bottom: none;
}
/* ボタンをキラッとさせる */
.my-btn a:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 100) 81%, rgba(255, 255, 255, 0) 100%);
animation: shine 3s infinite; /* inifiniteによりずっと続ける */
}
@keyframes shine {
33% {
  left: 100%;
}
100% {
  left: 100%;
}
}
/* テキストの後ろにarrow */
.my-btn a:after {
content: '»';
display: inline-block;
color: #fff;
padding-left: 10px;
font-size: 20px;
}
/* 767px(iPad)以下 */
@media (max-width: 767px) {
.my-btn a {
  width: 95%;
}
}
/*manabuTextLinkの CSS*/
a {
  text-decoration: none;
  color: #337ab7;
  font-weight: 620;	
}
a:hover, a:focus {
  color: #23527c;
  cursor: pointer;
}
a:hover {
  outline: 0;
}
a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
code {
  background-color: #f9f2f4;
  border-radius: 4px;
  color: #c7254e;
  font-size: 120%;
  padding: 2px 4px;
}

/*パンくずリストはトップページ非表示*/
.home #breadcrumb {
  display: none;
}
/*iPhoneAndroidリンクボタン*/ 
#linkbotan{
padding-bottom:0em;
width:90%;
margin:0 auto;
background-color:#ffffff;
border:none;
}
.left{
width:40%;
border:none;
float:left;
margin:0.5em;
padding:0px;
}
.right{
width:40%;
border:none;
float:right;
margin:0.5em;
padding:0px;
}
.clear{
clear:both;
}
/* スマホ固定フッター色*/
.footer-menu-sp .menu-item a{
background-color:#ffffff; /* 背景の色を指定 */
color:#333; /* 文字の色を指定 */
}
/*背景付きマイクロコピ*/
.mcbtn-waku {
margin-bottom: 2rem;
  background: #f4f4f5;
  text-align: center;
  padding: 10px;
}
.mcbtn-waku .color-button02-big {
margin-bottom: 0;
}
.mcbtn-waku .color-button02-big a {
  padding-top: 15px!important;
  padding-bottom: 15px!important;
  width: 100%!important;
font-size: 0.9rem;
}
.mcbtn-waku p {
padding-bottom: 0.5rem;
  text-align: center;
}
.mcbtn-waku p:first-child {
  font-weight: 500!important;
font-size: .8em;
color: #808080;
}
.mcbtn-waku p:last-child {
font-size: .7em;
color: #ff6347; 
margin-top: 0.5rem
}
.point {/*h4代わりのチェック印*/
  font-size: 20px;
  font-weight: 600;
margin-bottom: 10px;
  font-weight: 600;
}
.point:before {
  font-family: jin-icons;
  content: "\e90a";
  font-weight: 900;
  color: #6C9FCE;
  padding-right: 10px;
}
/* レスポンシブ */
@media screen and (max-width:479px) {
.point {
      font-size: 20px;
  }
}
/*---トップへ戻るボタン色と透明化---*/
#page-top a {
background-color: #0e9de4;/*背景色*/
opacity: 0.8;/*透明度80%*/
}
/* トップへ戻るボタンに影 */
#page-top :after {
 position: absolute;
  z-index: 3000;
  content: "";
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}
/*埋め込みツイートを中央表示させるCSSコード*/
.twitter-tweet {
margin: 0 auto !important;
}
STEP
ウィジェット

7の外観→カスタマイズのe.ウィジェットに記載。

STEP
メニュー

7の外観→カスタマイズのd.メニューに記載。

STEP
テーマエディター

function.phpのバックアップ(メモ)。

JINで施行したカスタマイズ

  1. JINトップページをサイト型にカスタマイズ(参考記事:ぽんひろさん
  2. ハンバーガーメニューのウィジェット化(参考記事:ナシタカさん
function.phpのメモ【子テーマ】
<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); 
function theme_enqueue_styles() { 
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} 

/* 最新記事取得 */
function new_list_func($atts){
  global $post;
  $arg   = array(
    'posts_per_page' => 4,
    'orderby'        => 'date', 
    'order'          => 'DESC',
  );
  $posts = get_posts($arg);
  foreach($posts as $post):
    setup_postdata($post);
    $str.='<p>';
    $str.=home_url().'/?p=';
    $str.=get_the_ID(); 
    $str.='</p>';
  endforeach;
  wp_reset_postdata();
  return $str;
}
add_shortcode('new_list', 'new_list_func');
/* カテゴリ別最新記事取得 */
function cat_list_func($atts) {
    extract(shortcode_atts(array(
        "num" => '',
        "cat" => ''
    ), $atts));
    global $post;
    $posts = get_posts('numberposts='.$num.'&order=DESC&orderby=date&category='.$cat);
    foreach($posts as $post) :
    $str.='<p>';
    $str.= get_permalink();
    $str.='</p>';
    endforeach;
    wp_reset_postdata();
    return $str;
}
add_shortcode("cat_list", "cat_list_func");
//20201014ハンバーガーウィジェット
register_sidebar(array(
  'name' => 'SP:ハンバーガーメニュー',
 'id' => 'sidebar-sp',
 'description' => 'スマートフォンのヘッダー部分のハンバーガーボタン(menu)を押したときに表示されるウィジェット',
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<div class="widgettitle ef">',
 'after_title' => '</div>',
));
?>

⑧:プラグイン

JIN使用時のプラグイン

  1. Advanced Ads:WordPress 内の広告を管理・最適化
  2. Autoptimize:CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化
  3. Contact Form 7:お問い合わせフォームプラグイン
  4. EWWW Image Optimizer:NextGEN Gallery や GRAND Flagallery を含む WordPress 内の画像のファイルサイズを縮小します
  5. Google XML Sitemaps:This plugin improves SEO using sitemaps for best indexation by search engines like Google, Bing, Yahoo and others
  6. JIN専用デザインプラグイン「CARAT」:JIN専用デザインプラグイン「CARAT」です
  7. Native Lazyload:Lazy-loads media using the native browser feature
  8. PS Auto Sitemap:Auto generator of a customizable and designed sitemap page
  9. Rich Table of Contents :「RTOC -Rich Table of Contents-」は誰でも簡単に目次の作成を行うことができる日本発の目次生成プラグインです
  10. SiteGuard WP Plugin:SiteGuard WP Pluginは、WordPressにインストールするだけで、セキュリティを向上させることができます
  11. Useful Blocks:痒いところに手がとどく、便利なブロックを集めたプラグインです
  12. WordPress Popular Posts:人気な投稿をサイト上に表示するカスタマイズ豊富なウィジェットです
  13. WP Revisions Control:Control how many revisions are stored for each post type
  14. ZEBLINE:スクロールでラインアニメーションが表示されます
  15. Widget Logic:WordPress の is_home 条件分岐タグでウィジェットをコントロールする

SWELLにおすすめなプラグインに変更

推奨プラグインと非推奨・不要・注意すべきプラグインについてを読んで、削除(停止)予定のプラグインは下記のとおり。

②Autoptimize ③Contact Form 7 ④EWWW Image Optimizer ⑥プラグイン「CARAT」 ⑦Native Lazyload ⑨Rich Table of Contents ⑩SiteGuard WP Plugin ⑫WordPress Popular Posts ⑭ZEBLINE ⑮Widget Logic

特にサイトスピードアップ対策は「SWELLテーマ側設定」に実装済み。遅延読み込みも、目次自動生成・人気記事表示もプラグイン不要で可能です。詳細は【完全版】SWELL爆速化【WebP・画像圧縮・第3者コード対策が必須】に書きましたので、あわせてお読みください。

Widget Logicプラグインと同等の機能も、「PC・スマホ表示分岐」を設定できます。

⑨:記事のメタディスクリプション

「SWELL CHILD」を有効化する前に「SEO SIMPLE PACK」をプラグイン導入して有効化しておけば、JINの記事投稿編集画面でメタディスクリプション入力しておけば、引き継げます。

SWELL公式サイトのテーマ乗り換え時にメタディスクリプションなどの設定をSEO SIMPLE PACKに引き継ぐ方法にて、「乗り換えサポート用プラグイン」の詳細を記載済み。

既存サイトのメタディスクリプション設定方法

例:【投稿】→【投稿一覧】→
【必読!】嫌われる勇気・幸せになる勇気【アドラー心理学をマコなり社長が解説!】のタイトルをクリックして、編集画面に入ったら1番下のディスクリプションへ。

メタディスクリプション例

本記事は、マコなり社長のYouTube動画30分を10分程度で読めるようにまとめました。アドラー心理学は論理性も高く、見える世界や感覚が一変するのは間違い無し。7つの習慣で言えば、「インサイドアウト」につながり、主体的な勇気ある人生になりますよ。

あいうえおLIFE

記事ごとにメタディスクリプションを入力してない場合は、SWELLにテーマ変更後でも大丈夫ですよ。

メタディスクリプションはSEOに効果ありますか?

メタディスクリプションは直接SEOに影響しないとGoogleが言及していますが、間接的には効果があり、適切なメタディスクリプションは「クリック率・滞在時間の向上」という2つのSEOに効果を与える要因があります。

引用:AFFILI-NOTE

以上9つの既存サイト内容をGoogleドキュメントでバックアップ(メモ)をとっていきましょう。

まとめ | JINからSWELL引き継ぐ前にアナログでメモ

JINからSWELL引き継ぎ前にアナログでメモ
JINからSWELL引き継ぎ前にアナログでメモ

今日はJINからSWELLへテーマ変更するのにバックアップの取り方で悩む人に向けて、下記を解説しました。

  • 既存サイトのバックアップはFTPソフトやバックアッププラグインでとる
  • 既存サイト内容のバックアップ(メモ)は9項目
あいうえおLIFE

丸ごとバックアップにおすすめなFTPソフトやバックアッププラグインの詳細や、手動でバックアップ(メモ)する9項目の具体的内容が理解できますね。

既存サイトに施したカスタマイズや設定内容を引き継ぎつつ、安心してSWELLへテーマ変更できること間違いなし。無事にバックアップやメモが取れたあとは、SWELLへテーマ変更する手順を実行していきましょう。

【14個の手順】JINからSWELLへテーマ変更(移行・乗り換え)のやり方に書きましたので、所要時間3時間を確保してくださいね。

今日は最後までお読みいただき、ありがとうございました!

スポンサーリンク

タップできるもくじ