今回は、
AFFINGERのデザインを変えたいけれど、設定項目が多くてどこから触ればいいか迷っている。
という問題を解決します。
AFFINGERのデザインを変える2つの道
デザインを変える道は、大きく分けて2つあります。
1つは、公式のデザインデータで丸ごと着せ替える方法です。
もう1つは、今のデザインに部品を足して仕上げる方法です。
- 丸ごと着せ替える → 公式のデータを読み込んで、一気にベースのデザインを設定する
- 部品を足して仕上げる → 今のデザインに案内バナーや区切りなどを追加して、自分らしさを出す
この両方を組み合わせるのが、いちばん早く理想のブログに近づく方法です。
いま販売されているAFFINGER7には、専用のプラグインとデータが用意されています。
AFFINGER7のデザインカード（公式の18種）
AFFINGER7には、公式の「AFFINGER7デザインカード」プラグインがあります。
これを使うと、用意されたデータを読み込んで、1クリックで初期デザインを設定できます。
データは全部で18種類あります。
公式の一覧でそれぞれのサンプルサイトを見てから選べます。
できること
- 1クリックで着せ替え → プラグインでデータを読み込むだけで、全体のデザインが整います。
- 好みのデザインを選べる → 18種類のサンプルから、自分のブログに合うものを見つけられます。
使う前に知っておくこと
使う前に、いくつか注意点があります。
- AFFINGER7専用 → 前の「AFFINGERデザインカード」とはデータも方法も違います。
- 設定が上書きされる → カスタマイザー、AFFINGER管理、ウィジェット、メニューの設定が上書きされます。
- 元に戻すには設定し直しが要る → 運用中のサイトで使うなら、先に控えを取ってください。
- 子テーマとは一緒に使えない → オリジナル子テーマ（「JET」を含む）とは一緒に使えません。基本はサイトの初期状態で使う想定です。
- 完全に同じ見た目にはならない → 動画やサンプル画像は一部含まれません。
入れたあとに自分で自由にカスタマイズして使います。
控えを取る方法は以下のとおりです。
- カスタマイザー → Customizer Export/Import を使う
- ウィジェット → Widget Importer & Exporter を使う
- AFFINGER管理 → データ引継ぎプラグイン（別売）を使う
使い方の流れ
- プラグインの入手 → AFFINGER7の商品の中の特典フォルダか、購入者限定ページからダウンロードする
- 有効化 → プラグインを入れて有効化する
- データの準備 → 公式の一覧から好きなデータをダウンロードする
- 設定の保存 → 管理画面の「AFFINGERデザインカード」でファイルを選んで保存する
- デザインのセット → 必要なら「TOPページを生成する」「メニューを上書きする」を選び、「デザインをセットする」を押す
AFFINGER6を使っている人へ
AFFINGER6の「デザイン済みデータ（11種）」は、公式ページでの配布が終了しています。
これからAFFINGER6でデザインを変える場合は、AFFINGER6専用の「AFFINGERデザインカード」プラグインを使います。
これはAFFINGER7用のプラグインとは別物です。
購入者限定ページからデザインごとのプラグインを入手して有効化します。
「デザインをセットする」を押すと、カスタマイザーやウィジェットなどがセットされます。
EX版専用のデザインを使うには、AFFINGER6 EX版が必要です。
すぐ下の反映手順は、すでにデータを手元に持っている人向けに残しています。
AFFINGER6 のデザイン済みデータは全部で11種類
通常のAFFINGER6用
AFFINGER6 EX用
今回は、シンプルなデザインでどんなサイトでも合いそうな「Separate」を反映させたいと思います。
デザイン済みデータの準備
デザイン済みデータをダウンロードする
１．まずは、下記URLから「デザイン済みデータ配布ページ（β）」へ行きます。
⇒https://on-store.net/design-sample-affinger5/
２．利用規約のチェックボックス3つにチャックを入れます。
※ここにチェックを入れると、デザイン済みデータのダウンロードボタンが有効になります。
３．反映したいデザイン済みデータの［ダウンロード］ボタンをクリック。
４．任意の場所にダウンロードします。
５．ファイルは圧縮されているので、フォルダ内で解凍してください。
※ZIPファイルの解凍方法については割愛します。わからない方は「ZIPファイル 解凍方法」でググってください。
ダウンロードしたzipファイルを解凍すると、以下のデータが含まれています。インストールする際は、拡張子を間違えないようにしてください。
| データ | ファイルの拡張子 |
|---|---|
| カスタマイザー 用 | .dat |
| ウィジェット 用 | .wie |
| テーマ管理 用 | .json |
データインポート用プラグインのインストール
デザイン済みデータをインポートするために必要なプラグインは以下の３つです。
- 「カスタマイザー」：Customizer Export/Import（無料）
- 「ウィジェット」：Widget Importer & Exporter（無料）
- 「テーマ管理」：データ引継ぎプラグイン（有料）
「Customizer Export/Import」と 「2Widget Importer & Exporter」は、事前にダウンロードする必要はありません（※WordPress内から簡単にインストールできます）。
「データ引継ぎプラグイン」は、アフィンガー専用の有料プラグインです（購入、ダウンロードが必要です）。
プラグインのインストール手順
１・左メニューの、①「プラグイン」⇒ ②「新規プラグインを追加」をクリック
２．右上の検索窓に、プラグイン名を入力する。
３．①「Customizer Export/Import」と入力すると、プラグインが表示されるので、②［今すぐインストール］をクリック。
４．インストールが完了したら「有効化」をクリックし、プラグインを有効化する。
５．「Widget Importer & Exporter」も同じ手順で、「インストール」～「有効化」まで完了させます。
データ引継ぎプラグインについて
データ引継ぎプラグインのみ有料（2,980 円）です。
データ引継ぎプラグインは「STINGER STORE」から購入できます。
データ引継ぎプラグイン購入ページはこちら
データ引継ぎプラグインのインストール手順
左メニューの「プラグイン」を開き、「新規プラグインを追加」をクリック。
①「ファイルを選択」をクリックし、データ引継ぎプラグインのZIPファイル（st-migrator.zip）を選択。
②「今すぐインストール」をクリックする。
「プラグインを有効化」をすればインストール完了です。
デザイン済みデータのインポート手順
カスタマイザー用データをインポートする
外観をカスタマイズする設定のデータをインポートします。
「カスタマイズ」は、ヘッダー、フッター、サイドバー、カテゴリー、見出しデザインなどのカスタマイズが可能です 。
１．左メニューの「①外観」⇒ 「②カスタマイズ」をクリック。
２．左メニューの一番下にある「エクスポート / インポート」を開く。
３．「インポート」の下にある「ファイルを選択」をクリックし、デザイン済みデータを保存した場所を開く。
ここでインポートするファイルの拡張子は.datです。
４．「.dat」ファイルを選択。
５．「画像ファイルをダウンロードしてインポートしますか？」 にチェックを入れ、「インポート」をクリックすれば完了です。
※間違えて違うデータをインポートしてしまったとき
デザイン済みデータを複数ダウンロードしていた場合、違うデザインのデータを間違ってインストールしてしまうことがあります。
そんなときは、以下の手順で引き継いだカスタマイザーのデータをリセットしましょう。
１．左メニューの「全体カラー設定」を開く。
一番下にある「リセット」をクリックすると、インポートに失敗したデザインデータがクリアされます。
ウィジェット用データをインポートする
ウィジェットの設定データをインポートします。
検索、管理者紹介、サイドバーメニュー、カテゴリー……など
１．左メニューの「ツール」⇒「Widget Importer & Exporter」をクリック。
２．［ファイルを選択］をクリックし、ウィジェット用のwieファイルを選択。
３．ファイルを選択したら次に［ウィジェットをインポート］をクリック。
４．インポート結果が表示されればインポート完了です。
テーマ管理の設定をインポート
１．左メニューの「AFFINGER 管理」⇒「データの引継ぎ」をクリック。
※データ引継ぎプラグインをインストール ⇒ 有効化すると、「AFFINGER 管理」に「データの引継ぎ」が追加されています。
２．「ファイルを選択」をクリックし、保存しているテーマ管理用データファイル「theme.json」を選択。
３．「インポート」をクリックすれば完了です。
着せ替えのあとに足す仕上げの部品
公式のデザインデータを入れたあとに、案内バナーや区切りなどの「部品」を足すのがおすすめです。
ほかのAFFINGERのサイトと見た目が分かれて、グッと自分らしくなります。
この記事の中でも、その部品が実際に動いています。
付いてくる案内バナー
画面を動かしても付いてくる案内を作れます。
バナーやボタンとして使えます。
形は6つから選べます。
iPhoneの画面の下の端をよけます。
PCとスマホで出し分けることもできます。
動く波・斜め・三角の区切り
セクションの境目を、動く波や斜めの線、下へ差し込む三角にできます。
カスタムHTMLブロックに貼るだけで、画面の端から端まで広げるか、記事の幅に収めるかを選べます。
この記事はサイドバーのあるページなので、すぐ下の波は記事の幅で動いています。
光る玉の看板
光る玉を並べて、文字や図形を描くことができます。
マウスを近づけると近くの玉が光ります。
スマホでは指でなぞった所が光ります。
斜めの2色背景
全幅のグループの背景を、色の境目が斜めに横切る2色にできます。
これはAFFINGERのグループブロックの「追加CSS」の欄に貼ります。
見出しや文章は、いつものブロックのまま上に置けます。
4つの部品のPCとスマホでの見え方は、以下の画像のような感じです。
部品の作り方：設定を選ぶ → コピー → 貼る
これらの部品は、ブラウザで開く「工房」で設定を選ぶだけで作れます。
パソコンのブラウザで開くHTML1枚のツールです。
コードを書く必要はありません。
- 設定を選ぶ → 工房を開き、好きな形や色を選ぶ
- コピー → 画面に出たコードをコピーする
- 貼る → 記事のカスタムHTMLブロック（または追加CSS）に貼る
体験版で、設定と見本は無料で触れます。
コードの表示とコピーは製品版の機能です。
4つの部品のできることや貼る場所、値段は以下のとおりです。
| 工房 | できること | 貼る場所 | 値段（円） |
|---|---|---|---|
| 追従バナー | 付いてくる案内 | HTML | 3,980 |
| 境界線 | 波・斜め・三角 | HTML | 1,980 |
| 発光ドット | 光る玉の看板 | HTML | 2,980 |
| 斜め背景 | 斜めの2色 | 追加CSS | 980 |
| 4本まとめて | 上の4つ | － | 7,980 |
- 追従バナー工房：体験版で試す／BOOTH で買う
- 境界線デザイン工房：体験版で試す／BOOTH で買う
- 発光ドット工房：体験版で試す／BOOTH で買う
- 斜め背景工房：体験版で試す／BOOTH で買う
- 4本まとめて：BOOTH で買う
この4つの工房は、当サイトのプレミア特典（EX環境セット・STRATEGY PACK3・分析プラグインセットの購入特典）にも入っています。
AFFINGER7本体だけをお持ちの方は、上のBOOTHから単体で買えます。
デザインが反映されないとき
公式の説明にもありますが、デザインが反映されないときは以下がよくある原因です。
- AFFINGER6のデータを使っている → デザインカードはAFFINGER7専用で、AFFINGER6のデータとは別物です。
- 子テーマを使っている → オリジナル子テーマ（JETを含む）を使っていると使えません。
- 画像がそのまま → サンプルの画像や動画は入らないので、自分の画像に差し替える必要があります。
まとめ
AFFINGERのデザインを変えるには、2つの道を組み合わせるのがいちばん早いです。
- 丸ごと着せ替える → 公式のデザインデータで全体のベースを整える
- 部品を足して仕上げる → 案内バナーや区切りを足して、ほかのサイトと見た目を分ける
- 工房を活用する → コード不要で、設定を選んで貼るだけで部品を作る
設定項目が多くて迷っていた人も、この手順ならスムーズに進められます。
まずは公式の着せ替えから試して、少しずつ部品を足してブログを育ててみてください。
