こんにちは！なぎさです(*‘∀‘)
ご訪問ありがとうございます！
この度、このブログのワードプレステンプレートをアフィンガー5からＪＩＮへ変更しました。
このテーマの変更について、私が下準備した点と、変更後に後悔（ちょっとだけ大変だったこと）を、ご紹介したいと思います。
Contents
ＷＰのテーマをアフィンガー５からＪＩＮへ変更する前に準備したこと
アフィンガー５のままのブログのバックアップをとる→プラグイン「ＢａｃｋＷＰup」をインストール。有効化してブログのバックアップをとる。
ＦＦＦＴＰ（ＦＴＰファイルソフト）で、バックアップファイルをパソコンに保存。
ＪＩＮを今までのワードプレスにインストールする。
ライブプレビューを見ながら、デザインやカラーの設定をする。
ある程度いいかなと思ったら、ＪＩＮを有効化する。
細かい設定やデザインが壊れていないか、確認する。
アフィンガー5からＪＩＮへ変更することによって、引き継げないこと
ヘッダー・フッター・サイドバー、ウィジェット、HTML・CSSは全て初期設定になる。
グーグルアナリティクス・グーグルサーチコンソール・グーグルアドセンスコードの設定がはずれる。
アフィンガー5独自のボタン設定で作ったもの（ブログカード・会話風吹き出し）は、ただのHTMLコードとして記事に表示される。
有料・無料含めてワードプレスなら必ずついているボタン設定で表示させているもの（項目ボタン、太字、見出しなど）はアフィンガー5からJINのデザインのものに、そのまま変わる。
無効になるプラグインが出てくる可能性がある。
アイキャッチ画像のリサイズが必要になる（アイキャッチ画像の大きさがバラバラで表示される）。
私の場合は
ヘッダー・フッター・サイドバー、ウィジェット、HTML・CSSは全て初期設定になった。
グーグルアナリティクスの設定がはずれていた。
アドセンスコードはそのままだった。
アフィンガー5で作ったブログカードや会話調吹き出しは、ただのHTMLコードになって記事中に表示された。
太字、項目ボタンは引き継がれ、JINのデザインになっていた。ただし、大文字は反映されなかった。
アイキャッチ画像のサイズがバラバラに表示されていた。
プラグインはもともと使っているものが、反映されて残っていた。
JINを導入後に行ったこと
JIN購入後に送られてくるJIN導入後のおすすめ設定にそって、一つ一つ設定していきました。
ただ、そのまま引き継がれているものも、多かったのでそれほど設定しなおさなければいけないものは、ありませんでした。
JIN導入後の、おすすめ設定マニュアルには下記のようなものになっていました。
「Classic Editor」をインストール
サイトタイトルを設定
サブタイトルを設定
ディスクリプションを設定
ピックアップ
コンテンツマガジン
インフォメーションバー
スマホスライドメニュー
スマホフッターメニュー
目次（TOC）のデザイン設定
OGP設定
プラグインのインストール
テーマ移行した人がやりたいこと！
サイトタイトルに変更がないかチェックしよう
サムネイル画像サイズを揃えよう
古いタグは置きかえよう
J I N公式マニュアルより引用
新しくJINを使い始める人がやっておきたいこと
実際にＪＩＮを私のゴミブログを使って、インストールしてみました。
一つずつやっていきましょう。
ワードプレスのダッシュボードを開きます。
左端の黒い帯から、ペンキを塗る時のハケみたいなのを選びます。
ポイントしたところより右あたりに、テーマというのが出てきますので、「テーマ」を選びます。
画面が切り替わったら、少し上に方にある「新規追加」を選びます。
今はまだアフィンガー５のままになっています。
「ファイルを選択」を選び、テーマのアップロードを開き、自分のパソコンにダウンロードしておいた、「ＪＩＮ」のZipファイルを選びます。
＊今回はスマホで操作したWPのダッシュボードをスクショしています。
パソコンの画面と雰囲気が少しちがいます。
ここでの注意点として、ＪＩＮのZipファイルを、自分のパソコンに入っているファイルフォルダーの中に格納しておくと、ＪＩＮのZipファイルがすんなりインストールでないことがあります。
ＪＩＮのテーマファイルを万が一、変なふうにいじってしまった時のために、保存用のＪＩＮのZipファイルを自分のパソコンのデータファイルのわかりやすいところに格納し、コピーしたものをパソコンのデスクトップに貼っておいておくといいです。
ＪＩＮのZipファイルのオリジナルのものを保存しておく意味と、ＪＩＮのZipファイルがＰＣのファイルのあんまり奥まったところに格納されていると、ＪＩＮのZipファイルがワードプレスにインストールできません。
今回はJ I Nの子テーマ を用いて、デモンストレーションしています。
J I Nをインストールしても、すぐに有効化してはいけません。
次に「ライブビュー」と言う、表示を押します。
有効化する前に、おおまかなデザインを設定します。
何もしなければ、この画面になります。
サイト基本設定、サイトデザイン設定、カラー設定、ヘッダー設定、ヘッダー画像設定、フッター設定、トップページ設定と順番に設定していきます。
こだわりのある部分は、後でいくらでも直せるので、ここではおおまかにやります。
ＳＥＯタイトルとサブタイトル、ブログのタイトルを入力します。
前のブログのままの表示でかまわなければ、変更する必要はありません。
はじめてＪＩＮでワードプレスを構築する人は、必ず入力してください。
次にサイトデザインに移ります。
必ず赤枠で囲ってあるボタンで戻ってください。
ここではサイトデザインを、「スタイル１」で設定します。
好みが分かれるので、後で変更してみましょう。
続いて、サイドバーのデザインと記事エリアのデザインを選んでいきます。
こちらも好みが分かれるので、ここでは「スタイル１」を選びます。
フッターデザイン選択、フッターのカラム選択、グローバルメニューのデザイン選択、ＰＣ用グローバルメニューの文字サイズも後で直せますので、今回はそのままの設定にします。
今度はカラー設定をしていきます。
好きなカラーを選びます。
この時、テーマ カラーとフッターカラー、スマホ用と同じ色にしたいので、カラーコードをコピーしてメモ帳やワードなどに貼り付けておくと便利です。
別々のカラーにしたい人は、もちろん不要ですが、あまり色を使いすぎると統一感のない、ユーザーにとって居心地の悪いブログになってしまいます。
ここでは、カラーコード#f2c337をコピーして自分のパソコンのワードに貼りつけました。
次にアクセントカラー、背景色、ヘッダー背景色、タイトルの文字色、メニューの文字色を設定します。
次にメニューの背景色、タイトルの文字色、メニューの文字色、メニューの背景色SNSのボタン色、フッターの文字色、フッターの背景色を設定します。
そもそもまだメニューを作っていないので、この辺りは飛ばしてもかまいません。
次にリンクの色、リンクにマウスを合わせた時の色、サイトの文字色、スマホ専用メニューの文字色、スマホメニューの背景色、インフォメーションバーの背景色を設定します。
次にヘッダー設定から、関連記事までを設定します。
この辺は後でゆっくり直せばいいので、今回は見送ります。
最後に有効化します。
こんな感じになりました。
やらなくても、引き継がれているものもありましたが、当然インフォメーションバーやフッターメニュー、ウィジェットなどは一からやり直しです。
ただ、アフィンガー5の時に、固定メニューも５つ作ってありましたので、ダッシュボードのカスタマイズからウィジェット画面に入り、新しくメニューを追加するだけでした。
今までやったことがなかったディスクリプションの設定と、JINの特徴的な機能である「コンテンツマガジン」の設定をやり、サムネイル画像がバラバラになっていたので、アイキャッチ画像をリサイズし設定しなおしました。
バラバラになったサムネイル画像は、Regenerate Thumbnailsという、プラグインを導入して有効化すると、揃うこともあるようです。
このサムネイル画像の揃え方も、JINの導入後のおすすめ設定マニュアルに書いてありましたが、私の場合はRegenerate Thumbnailsを導入しても、どうしようもないくらい、もともとのサムネイルの画像サイズがバラバラでしたので、あきらめてひたすらサムネイル画像のリサイズを行いました。
86記事あったので、1日ではできず、３日間かけてやりました。
アフィンガー5の時に、アフィンガーに実装されているブログカードボタンで作ったブログカードは、当然ただのHTMLコードで記事中に表示されていました。
すごくかっこわるいので、こちらは最優先で削除しました。
ここでアフィンガー5とJINを比べた時の、メリットとデメリットを比較したいと思います。
アフィンガー5のメリットとデメリット
- アフィンガー5ではカスタマイズ次第で、個性的なブログにすることが可能。
- あまり初心者向けではないので、いくら個性を出したくても、多くの人はやり方さえもわからなく、みんな同じような見た目のブログになる。
- アフィリエイター向きの機能がそろっているが、ブログのデザインが少しかたい。
- 光るボタンや動く文字など、ユーザーの視覚にアプローチするアフィンガー5独特の機能を実装している。
- 自分でカスタマイズして、ヘッダーや見出しなどをグラデーションにすると、何ともいえないビミョーな色合いになる（むしろ基本設定の方がかっこいい）。
- 内部のSEO対策が万全である。
- アドセンスコードやグーグルアナリティクスのグローバルサイトタグをPHPの編集なして、所定の広告枠にコピペするだけで、反映される。
＊個人的感想です。
JINのメリットとデメリット
- カスタマイズやデザインの変更が簡単。デザインが苦手な人にも、デモサイトが用意されていて、そのままWPにインポートして使える。
- カチッとした雰囲気にも、やわらかい雰囲気にも変更できる。ただ、アフィンガー5のような尖ったデザインにはならない。
- ＷＰ初心者向きであるが、バリバリのアフィリエイター向きではない。
- PHP編集なして、アドセンスコードやグーグルアナリティクスのグローバルタグ、ASP広告コードを所定の場所にコピペすれば反映される。
- 作成が面倒な免責事項とプライバシーポリシーの固定ページが実装されていている。
- 豊富なボックスデザイン・ボタンデザインが用意されていて、記事をカラフルに装飾できる。
- JINは一般的に、他の有料テンプレートより動作が重たいと言われている（私にはまだ特に重たいという実感はありません）。
- 内部のSEO対策ばっちり。SNSと連携させると、さらに楽しい。
＊もちろん個人的感想です。
WPテンプレートをアフィンガー5からJINへ変更した後は！？まとめ
WPにJINをインストールして、これからはじめてWPブログを構築するという人には、やるべきことはたくさんあります。
無料のワードプレステンプレートでいちいちHTMLコードをコピペしてきたり、プラグインを導入しないと、実現不可なこともＪＩＮならあっという間にできてしまいます。
初心者なのに、いちいち自分でコーディングするわずらわしさを考えたら、初心者だからこそ有料テンプレートでWPを構築すべきです。
特にJINは最高だと思います。
アフィンガー5の時に、一生懸命貼り付けたブログカードや、会話調のふきだしが全部無駄になってしまったのは残念ですが、良い勉強になりました。
結果的に、アフィンガー5の時のブログより、カチッとした雰囲気からやわらかく女の子らしい雰囲気になりました（やっている本人、おばさんだけどね）。
最後までお付き合いいただき、ありがとうございました。
