[最新版]AFFINGER5のデザイン済みデータを適用する方法

AFFINGER5(アフィンガー5)を使っているブログにデザイン済みデータを実際に適用してみました。

AFFINGER6を3ヶ月間使ってみた感想とAFFINGER5との違い

他の解説ブログで紹介されている手順が古くて設定するのに若干手間取ったので、本記事では最新の情報で解説します。

\ デザイン済みデータでデザインの着せ替え可能 /

目次

AFFINGER CLOSETにユーザ登録

AFFINGER CLOSETのユーザ登録

AFFINGERのデザイン済みデータを利用するなら「AFFINGER CLOSET」のユーザ登録を行います。

無料のユーザ登録することで、デザイン済みデータのダウンロードと、デザイン済みデータを使うために必要なデータ引継ぎプラグイン(LITE)のダウンロードが可能となります。

AFFINGERのテーマ本体をダウンロードするSTINGER STOREのユーザとは別になります。

3つの無料プラグインをインストール

デザイン済みデータを使ってブログデザインを着せ替えるには3つの無料プラグインが必要となります。

必要なWordPressのプラグインは下記3つです。いずれも無料で利用できます。

3つのうちデータ引き継ぎプラグインは、アフィンガー専用のプラグインになるので、他の2つとはインストール方法が異なります。

そして、デザイン済みデータの使い方を解説している記事を見ると、このデータ引き継ぎプラグインについて情報が古い記事が多いです。

データ引き継ぎプラグインは以前まで有料版しかありませんでしたが、今は一部機能を簡易化した無料版があります。

データ引き継ぎプラグインを使わない解説記事も見受けられますが、デザイン済みデータを配布しているAFFINGER CLOSETでも無料版のデータ引き継ぎプラグインを使う事を紹介しています。これを使わないと期待したデザインになりません!

Google検索上位の記事を見てみると、アフィンガー公式サイトの内容をコピーしてるだけで、実際に自分のブログにデザイン済みデータを適用したことが無いんじゃないかと思う記事もありました。

Customizer Export/Importのインストール方法は、他のプラグインと同じで、WordPressのプラグイン新規追加で「Customizer Export/Import」と入力して行います。

Customizer Export/Importのインストール
Customizer Export/Importのインストール

インストール後は有効化を忘れずに行ってください。

Widget Importer & Exporterプラグインも同様にインストールして有効化します。

Widget Importer & Exporterプラグインのインストール
Widget Importer & Exporterプラグインのインストール

データ引継ぎプラグイン(LITE)のインストールは、下記リンク先からプラグインのZIPファイルをダウンロードして行います。

https://affingers-closet.com/data-export-lite/

データ引継ぎプラグイン(LITE)のダウンロード
データ引継ぎプラグイン(LITE)のダウンロード

ダウンロードしたZIPファイル(st-migrator-lite.zip)をWordPressのプラグインアップロード機能を使ってインストールします。

インストールが完了すると、AFFINGER5管理メニュー内にデータの引き継ぎ(LITE)が表示されます。

デザイン済みデータをダウンロードする

デザイン済みデータを自分のブログに反映させるため、AFFINGER CLOSETからデータをダウンロードします。

今回は、AFFINGERが公式に作成したNOTE.2020というシンプルでシックなデザインを使ってみました。

デザイン済みデータ「NOTE.2020」
デザイン済みデータ「NOTE.2020」

このデザインを適用するため、3つのファイルをダウンロードします。

ダウンロードするのは下記3つのファイルです。

  • カスタマイザーファイル(拡張子が.dat)
  • ウィジェットファイル(拡張子が.wie)
  • テーマ管理ファイル(拡張子が.json)
AFFINGER5のデザイン済みデータは3つのファイルで構成される

3つのプラグインを使ってデザイン済みデータを適用

先程ダウンロードした3つのファイルを3つのプラグインを使って適用していきます。

因みに、デザイン済みデータを適用する前のブログデザインは以下のようにAFFINGER5の初期状態でした。

デザイン済みデータ適用前のデザイン
デザイン済みデータ適用前のデザイン

まず、カスタマイザーの設定を行います。

WordPressの外観-カスタマイズを開いたあとに「エクスポート/インポート」を選択します。

外観カスタマイズメニューのエクスポート・インポート機能を使う

参照ボタンを押して、ダウンロードしておいたカスタマイザーファイルを指定し、インポートします。

次にウィジェットファイルを適用します。

WordPressの画面でツールを開いて、「Widget Importer & Exporter」を選択します。

「Widget Importer & Exporter」の画面で参照ボタンを押して、ダウンロードしたウィジェットファイルを指定し、ウィジェットをインポートします。

拡張子が.wieのウィジェットファイルをインポート
拡張子が.wieのウィジェットファイルをインポート

インポートが完了すると、インポート結果が表示されます。特にエラー表示がなければ問題ありません。

ウィジェットファイルのインポート結果

最後に、データ引継ぎプラグイン(LITE)を使ってテーマ管理ファイル(拡張子が.json)をインポートします。

データ引継ぎプラグイン(LITE)を使ってテーマ管理ファイルをインポート
データ引継ぎプラグイン(LITE)を使ってテーマ管理ファイルをインポート

これでAFFINGER5のデザイン済みデータの適用は完了です。

デザイン済みデータ適用後のブログデザインを確認すると、こんな感じです。

ヘッダーカード1,2,3の部分は、別途AFFINGER5のおすすめヘッダーカード機能で設定する必要があります。

以上、AFFINGER5のテーマを使っている場合に利用できるデザイン済みデータの適用手順について解説してきました。

デザイン済みデータを適用すれば、デモサイトに近いサイトをすぐに構築できます。

一方で、細部の設定は自分で行う必要があります。

私自身の経験では、他のテーマではこういったデザインの着せ替え機能は無いと思うので、これが基本無料で利用できるのはアフィンガーを利用するメリットの1つですね👍

\ デザイン済みデータでデザインの着せ替え可能 /

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