この記事では「AFFINGER6(アフィンガー6)」に、デザイン済みデータを反映させるための手順を詳しく解説しています。
デザイン済みデータは、初心者でも容易に美しいデザインを反映できるアフィンガー専用データです。
このデータ設定は慣れれば簡単ですが、初回は操作に戸惑うことがあります。
そこで今回は、初心者向けにデザイン済みデータの適用手順を詳しく解説していきます。
この記事を書いた専門家
![](https://the-affinger.com/wp-content/uploads/2022/07/IMG_0409.jpg)
2017年よりWordPressを使ったサイト作成を開始。
今まで購入したWordPressの有料テーマは、「AFFINGER・SWELL・SANGO・STORK・JIN・THE THOR 」の計6つ。
テーマを弄り倒し、マニュアルにも載っていないような組み合わせを見つけることによろこびを感じている。
今では企業向けにホームページ制作も請け負っています。(※WordPress使用)
AFFINGER6 のデザイン済みデータは全部で11種類
通常のAFFINGER6用
![](https://the-affinger.com/wp-content/uploads/2024/05/image-14.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-15.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-16.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-17.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-18.png)
AFFINGER6 EX用
![](https://the-affinger.com/wp-content/uploads/2024/05/image-19.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-20.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-21.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-22.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-23.png)
![](https://the-affinger.com/wp-content/uploads/2024/05/image-24.png)
今回は、シンプルなデザインでどんなサイトでも合いそうな「Separate」を反映させたいと思います。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-20.png)
デザイン済みデータの準備
デザイン済みデータをダウンロードする
1.まずは、下記URLから「デザイン済みデータ配布ページ(β)」へ行きます。
⇒https://on-store.net/design-sample-affinger5/
2.利用規約のチェックボックス3つにチャックを入れます。
※ここにチェックを入れると、デザイン済みデータのダウンロードボタンが有効になります。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-25.png)
3.反映したいデザイン済みデータの[ダウンロード]ボタンをクリック。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-26.png)
4.任意の場所にダウンロードします。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-27.png)
5.ファイルは圧縮されているので、フォルダ内で解凍してください。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-46.png)
※ZIPファイルの解凍方法については割愛します。わからない方は「ZIPファイル 解凍方法」でググってください。
ダウンロードしたzipファイルを解凍すると、以下のデータが含まれています。インストールする際は、拡張子を間違えないようにしてください。
データ | ファイルの拡張子 |
---|---|
カスタマイザー 用 | .dat |
ウィジェット 用 | .wie |
テーマ管理 用 | .json |
データインポート用プラグインのインストール
![](https://the-affinger.com/wp-content/uploads/2024/05/インポート用プラグインのインストール.webp)
デザイン済みデータをインポートするために必要なプラグインは以下の3つです。
- 「カスタマイザー」:Customizer Export/Import(無料)
- 「ウィジェット」:Widget Importer & Exporter(無料)
- 「テーマ管理」:データ引継ぎプラグイン(有料)
「Customizer Export/Import」と 「2Widget Importer & Exporter」は、事前にダウンロードする必要はありません(※WordPress内から簡単にインストールできます)。
「データ引継ぎプラグイン」は、アフィンガー専用の有料プラグインです(購入、ダウンロードが必要です)。
プラグインのインストール手順
1・左メニューの、①「プラグイン」⇒ ②「新規プラグインを追加」をクリック
![](https://the-affinger.com/wp-content/uploads/2024/05/image-40.png)
2.右上の検索窓に、プラグイン名を入力する。
![](https://the-affinger.com/wp-content/uploads/2020/05/cap.1588298193.png)
3.①「Customizer Export/Import」と入力すると、プラグインが表示されるので、②[今すぐインストール]をクリック。
![](https://the-affinger.com/wp-content/uploads/2020/05/cap.1588298252.png)
4.インストールが完了したら「有効化」をクリックし、プラグインを有効化する。
![](https://the-affinger.com/wp-content/uploads/2020/05/cap.1588298331.png)
5.「Widget Importer & Exporter」も同じ手順で、「インストール」~「有効化」まで完了させます。
![](https://the-affinger.com/wp-content/uploads/2020/05/cap.1588298375.png)
データ引継ぎプラグインについて
データ引継ぎプラグインのみ有料(2,980 円)です。
データ引継ぎプラグインは「STINGER STORE」から購入できます。
データ引継ぎプラグイン購入ページはこちら
データ引継ぎプラグインのインストール手順
左メニューの「プラグイン」を開き、「新規プラグインを追加」をクリック。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-28.png)
①「ファイルを選択」をクリックし、データ引継ぎプラグインのZIPファイル(st-migrator.zip)を選択。
②「今すぐインストール」をクリックする。
![](https://the-affinger.com/wp-content/uploads/2020/05/cap.1588318321.png)
「プラグインを有効化」をすればインストール完了です。
![](https://the-affinger.com/wp-content/uploads/2020/05/cap.1588318385.png)
デザイン済みデータのインポート手順
![](https://the-affinger.com/wp-content/uploads/2024/05/デザイン済みデータのインポート手順.webp)
カスタマイザー用データをインポートする
外観をカスタマイズする設定のデータをインポートします。
「カスタマイズ」は、ヘッダー、フッター、サイドバー、カテゴリー、見出しデザインなどのカスタマイズが可能です 。
1.左メニューの「①外観」⇒ 「②カスタマイズ」をクリック。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-29.png)
2.左メニューの一番下にある「エクスポート / インポート」を開く。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-30.png)
3.「インポート」の下にある「ファイルを選択」をクリックし、デザイン済みデータを保存した場所を開く。
ここでインポートするファイルの拡張子は.datです。
![](https://the-affinger.com/wp-content/uploads/2020/05/cap.1588298602.png)
4.「.dat」ファイルを選択。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-42.png)
5.「画像ファイルをダウンロードしてインポートしますか?」 にチェックを入れ、「インポート」をクリックすれば完了です。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-43.png)
※間違えて違うデータをインポートしてしまったとき
デザイン済みデータを複数ダウンロードしていた場合、違うデザインのデータを間違ってインストールしてしまうことがあります。
そんなときは、以下の手順で引き継いだカスタマイザーのデータをリセットしましょう。
1.左メニューの「全体カラー設定」を開く。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-31.png)
一番下にある「リセット」をクリックすると、インポートに失敗したデザインデータがクリアされます。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-32.png)
ウィジェット用データをインポートする
ウィジェットの設定データをインポートします。
検索、管理者紹介、サイドバーメニュー、カテゴリー……など
1.左メニューの「ツール」⇒「Widget Importer & Exporter」をクリック。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-33.png)
2.[ファイルを選択]をクリックし、ウィジェット用のwieファイルを選択。
3.ファイルを選択したら次に[ウィジェットをインポート]をクリック。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-35.png)
4.インポート結果が表示されればインポート完了です。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-36.png)
テーマ管理の設定をインポート
1.左メニューの「AFFINGER 管理」⇒「データの引継ぎ」をクリック。
※データ引継ぎプラグインをインストール ⇒ 有効化すると、「AFFINGER 管理」に「データの引継ぎ」が追加されています。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-37.png)
2.「ファイルを選択」をクリックし、保存しているテーマ管理用データファイル「theme.json」を選択。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-38.png)
3.「インポート」をクリックすれば完了です。
![](https://the-affinger.com/wp-content/uploads/2024/05/image-39.png)
まとめ
僕は普段から、既にデザインされたテンプレートを使って、自分の好みに合わせてアレンジを加えています。
こうすることで、キレイにカスタマイズできるだけでなく、時間も大幅に節約できるんです。
もちろん、一からデザインをカスタマイズするのも楽しいのですが、細部にこだわり過ぎると、なんだか途方に暮れてしまうことがあります。
僕が目指すのは、複雑な操作をすることなく、初めから美しいデザインを手軽に使うこと。
AFFINGER6のデザイン済みデータは、そんな僕のニーズを満たしてくれています。
ぜひこのツールを使ってみて、あなたのウェブサイトも素敵にデコレーションしてみてくださいね。
当サイトにもオリジナルデザイン済みデータがあるよ。
当サイト限定デザイン済みデータをチェック!