デザインカードは何度でも変更できる？

別のデザインデータを読み込んで、デザインを変更することは可能です。ただし、適用するたびに既存の設定が上書きされる場合があります。何度も変更する場合は、その都度バックアップを取ってから作業しましょう。

すでに記事があるサイトでも利用できる？

既存サイトで利用する場合は注意が必要です。公式では、デザインカードは原則としてサイトの初期状態で利用することを想定しています。すでに運営しているサイトでは、カスタマイザーやウィジェットなどの設定が上書きされるため、バックアップを取ったうえで慎重に利用してください。

デザインカードで記事や画像は削除される？

デザインカードは主にテーマのデザイン設定を反映するためのプラグインです。ただし、すべてのコンテンツが影響を受けないと保証されているわけではありません。特にトップページ生成やメニュー上書きなどは、既存設定に影響します。万が一に備えて、データベースやアップロードファイルを含むサイト全体のバックアップを取っておきましょう。

AFFINGER6用のデザインカードも使える？

AFFINGER6用の旧デザインカードは、AFFINGER7専用デザインカードとは仕組みが異なります。そのため、AFFINGER7では必ず専用プラグインと専用デザインデータを利用してください。

デザインカード適用後もカスタマイズできる？

はい。デザインカードで設定したデザインをベースに、ロゴや画像、カラー、メニューなどを変更できます。ただし、サンプルデザインに含まれる追加CSSなどが影響する場合もあるため、カスタマイズ後はパソコンとスマートフォンの両方で表示を確認しましょう。

AFFINGER7デザインカードの使い方！簡単にサイトデザインを変更する方法

「AFFINGER7のデザインを簡単に変更したい」

「デザインカードプラグインの使い方がわからない」

「設定を変更すると、今までのデザインは消えてしまうの？」

このような疑問を持っていませんか？

AFFINGER7には、あらかじめ用意されたデザインを簡単にサイトへ反映できる「AFFINGER7デザインカードプラグイン」があります。

通常、WordPressでサイトデザインを整えるには、カラーやレイアウト、ウィジェットなどを一つずつ設定する必要があります。

しかし、デザインカードを使えば、用意されたデザインデータを読み込むことで、サイトの基本的なデザインをまとめて設定できます。

特に、WordPressを始めたばかりで「どこからカスタマイズすればよいかわからない」という方に便利な機能です。

ただし、注意点もあります。

デザインカードを適用すると、すでに設定しているデザインやウィジェットなどが上書きされる場合があります。

そのため、利用する前に仕組みとバックアップ方法を理解しておくことが大切です。

この記事では、AFFINGER7デザインカードの導入方法からデザインの変更手順、注意点、バックアップ方法まで初心者向けに詳しく解説します。

この記事でわかること

AFFINGER7デザインカードでできること
AFFINGER6版との違い
デザインカードのダウンロード・導入方法
デザインを適用する6つのステップ
デザイン変更前のバックアップ方法
反映されない場合の対処法

これからAFFINGER7でサイトを作成する方は、ぜひ参考にしてください。

AFFINGER7のデザインカードとは？

AFFINGER7デザインカードは、あらかじめ用意されたデザインデータを読み込むことで、WordPressサイトの基本的なデザインを設定できる専用プラグインです。

AFFINGER7はカスタマイズ性に優れたWordPressテーマですが、その分、初心者は設定項目の多さに迷うことがあります。

デザインカードを利用すれば、細かい設定を一つずつ変更しなくても、好みのデザインをベースにサイトを作成できます。

デザインカードでできること

デザインカードでは、主に以下の設定をまとめて反映できます。

設定項目	内容
カスタマイザー	カラーやサイト各部のデザイン
AFFINGER管理	テーマのデザイン関連設定
ウィジェット	サイドバーなどのパーツ
トップページ	サンプルに応じた固定ページの生成
メニュー	デザインに合わせたメニュー設定
追加CSS	サンプルに必要な装飾設定

※利用できる設定項目はデザインデータによって異なります。

例えば、ブログ向けのデザインを選べば、カラーやレイアウトなどの基本設定をまとめて反映できます。

もちろん、デザイン適用後にロゴや画像、カラーなどを自分好みに変更することも可能です。

デザインカードは、サイトデザインを完成させる機能というよりも、カスタマイズの土台を作るための機能です。

細かいデザイン設定に時間をかけず、ブログ記事の作成に集中したい初心者の方にも向いています。

AFFINGER7には、デザインカード以外にも記事装飾やランキング、トップページ編集など、便利な機能が数多く用意されています。

テーマ全体の特徴や機能を確認したい方は、以下の記事も参考にしてください。

▶ AFFINGER7完全ガイド｜特徴・機能・購入方法を解説

AFFINGER6版とAFFINGER7版の違い

AFFINGER6にもデザインカードプラグインがありましたが、AFFINGER7ではデザインの導入方法が変更されています。

主な違いは次のとおりです。

比較項目	AFFINGER6版	AFFINGER7版
対応テーマ	AFFINGER6	AFFINGER7
導入方法	デザイン別のプラグインを利用	共通プラグインと専用データを利用
デザインデータ	旧仕様	AFFINGER7専用
トップページ	旧仕様に準拠	対応データで生成を選択可能
メニュー	旧仕様に準拠	上書きの有無を選択可能

AFFINGER7では、デザインカードプラグイン本体をインストールした後、好みのデザインデータを読み込む仕組みになっています。

そのため、AFFINGER6用のデザインカードをAFFINGER7でそのまま利用することはできません。

必ずAFFINGER7専用のプラグインとデザインデータを使用しましょう。

デザインカードの利用に追加料金は必要？

AFFINGER7デザインカードプラグインは、AFFINGER7の商品内の特典フォルダ、または購入ユーザー限定ページから入手できます。

対象となるAFFINGER7購入ユーザーであれば、デザインカードプラグインを別途購入する必要はありません。

ただし、公式では商品価格外の付属サービスとして提供されており、配布内容や仕様が変更される場合があります。

利用する際は、最新の公式情報を確認してください。

デザインカードを使う前に確認したい3つの注意点

AFFINGER7デザインカードは便利な機能ですが、利用する前に確認しておきたいことがあります。

特に、すでにブログを運営している方は注意が必要です。

① 既存のデザイン設定が上書きされる

最も重要なのは、デザインカードを適用すると既存の設定が上書きされることです。

例えば、次のような設定が変更されます。

ヘッダーやサイト全体のカラー
カスタマイザーの設定
AFFINGER管理の設定
サイドバーなどのウィジェット
ナビゲーションメニュー
トップページ関連の設定

つまり、現在のデザインに装飾を追加するのではなく、デザインカードの設定で置き換える処理が行われます。

また、管理画面には「一括リセット」というボタンがありますが、これはデザインカード適用前の状態へ戻す機能ではありません。

一括リセットを実行すると、対象の設定が削除または初期化されるため、元に戻す目的では使用しないでください。

すでに細かくデザインを調整している場合は、十分注意しましょう。

② デザイン変更前にバックアップを取る

デザインカードを利用する前には、バックアップを取っておくことをおすすめします。

バックアップがあれば、万が一設定が変更されてしまった場合にも復元を検討できます。

特に保存しておきたいのは、次の内容です。

WordPressのファイルとデータベース
カスタマイザーの設定
ウィジェットの設定
AFFINGER管理の設定
メニューやトップページの設定内容

可能であれば、現在の設定画面をスクリーンショットで保存しておくと安心です。

バックアップを取得していても、すべての設定が自動的に元へ戻るとは限りません。

サイト全体のバックアップと設定データの保存を組み合わせるとよいでしょう。

詳しい方法は、後半の「デザインカード適用前のバックアップ方法」で解説します。

③ 対応テーマと必要なファイルを確認する

デザインカードを利用するには、対応するAFFINGER7と専用のデザインデータが必要です。

次の項目を確認しましょう。

AFFINGER7を利用している
最新のテーマバージョンを利用している
AFFINGER7専用のデザインカードを利用する
AFFINGER6用のデータを混在させない
非対応のオリジナル子テーマを使用していない

公式では、オリジナル子テーマ「JET」を含む独自の子テーマとの併用は非対応とされています。

また、デザインカードは原則としてサイトの初期状態で利用することを想定しています。

すでに多くの記事を公開しているサイトでは、可能であればテスト環境で動作を確認してから利用しましょう。

AFFINGER7をインストールしたばかりの方へ

デザインカードを利用する前に、AFFINGER7の基本的な設定も確認しておきましょう。

WordPressの初期設定からAFFINGER管理の基本設定まで、初心者向けにまとめています。

▶ AFFINGER7の初期設定ガイド｜最初にやるべき設定を解説

AFFINGER7デザインカードの使い方【6ステップ】

ここからは、実際にデザインカードを利用してサイトデザインを変更する方法を解説します。

基本的な流れは次の6ステップです。

デザインカードプラグインをダウンロードする
WordPressにインストール・有効化する
好みのデザインデータをダウンロードする
デザインデータをアップロードする
トップページ・メニューの設定を選択する
デザインを適用して表示を確認する

それぞれ順番に見ていきましょう。

デザインカードプラグインをダウンロードする

最初に、AFFINGER7デザインカードプラグインをダウンロードします。

プラグインは、次の場所から入手できます。

AFFINGER7の商品内にある特典フォルダ
AFFINGER7購入ユーザー限定ページ
AFFINGER7EX購入ユーザー限定ページ

購入時にダウンロードした商品フォルダ、または購入ユーザー限定ページを確認してください。

プラグイン本体のファイル名は、次のとおりです。

st-design-card.zip

このZIPファイルをWordPressへインストールします。

ファイルは解凍せず、そのまま使用してください。

WordPressにインストール・有効化する

次に、ダウンロードしたプラグインをWordPressへインストールします。

WordPress管理画面を開き、次の順番で操作してください。

「プラグイン」をクリック
「プラグインを追加」をクリック
「プラグインのアップロード」をクリック
「ファイルを選択」をクリック
st-design-card.zipを選択
「今すぐインストール」をクリック
「プラグインを有効化」をクリック

これで、デザインカードを利用する準備が整いました。

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

プラグインをインストールしたら、次は好みのデザインデータをダウンロードします。

AFFINGER7では、プラグイン本体とデザインデータが分かれています。

そのため、プラグインを有効化するだけではサイトのデザインは変更されません。

公式のサンプル一覧ページから、好みのデザインを選択してください。

▶ AFFINGER7デザインカード用データ一覧（公式サイト）

公式ページには、デザインのサンプルと、それぞれに含まれる設定項目が掲載されています。

主な項目は次のとおりです。

カスタマイザー
ウィジェット
トップページ
メニュー
追加CSS

サンプルによって含まれる内容が異なるため、デザインの見た目だけでなく、どの設定が反映されるのかも確認しておきましょう。

好みのデザインが見つかったら、専用のZIPファイルをダウンロードします。

デザインデータをアップロードする

続いて、ダウンロードしたデザインデータをWordPressに読み込みます。

WordPress管理画面から「AFFINGERデザインカード」の管理画面を開いてください。

管理画面を開いたら、次の順番で操作します。

「ファイルを選択」をクリック
ダウンロードしたデザインデータのZIPファイルを選択
「保存」をクリック

ここで選択するのは、STEP1でインストールしたプラグイン本体ではありません。

STEP3でダウンロードしたデザインデータです。

2つのZIPファイルを間違えないようにしましょう。

なお、「一括リセット」ボタンは既存設定を初期化する機能です。

通常のデザインデータ読み込みでは、必要性を理解しないまま押さないでください。

トップページ・メニューの設定を選択する

デザインデータを読み込んだら、トップページとメニューの設定を確認します。

デザインカードには、主に次の選択項目があります。

「TOPページを生成する」

チェックを入れると、対応するデザインデータからトップページ用の固定ページが生成されます。

生成される固定ページ名は、公式では「AFFINGERデザイン TOPページ（default）」と案内されています。

トップページをサンプルデザインに合わせて作成したい場合に利用します。

ただし、すでにトップページを作成している場合は、既存のトップページ設定が上書きされるため注意してください。

また、トップページ用データが含まれていないデザインでは、この項目を選択できません。

「メニューを上書きする」

チェックを入れると、デザインに応じたメニュー設定が反映されます。

場合によっては、ダミーメニューが作成されることがあります。

デザイン適用後は、メニューを確認して自分のサイトに合わせて再設定しましょう。

初めてブログを作成する場合は、サンプルデザインのトップページやメニューを利用すると、設定しやすくなります。

一方、すでにサイトを運営している場合は、既存ページやメニューへの影響を確認してから選択してください。

デザインを適用して表示を確認する

最後に、デザインカードの設定を反映します。

実行前に、次の項目を確認してください。

バックアップを取っている
正しいデザインデータを選択している
トップページ生成の設定に問題がない
メニュー上書きの設定に問題がない

確認が完了したら、「デザインをセットする」をクリックします。

これで、選択したデザインデータがサイトに反映されます。

設定が完了したら、実際のサイトを開いて表示を確認してください。

特にチェックしておきたいのは、次の項目です。

トップページが正しく表示されているか
ヘッダーや背景のカラーが変わっているか
サイドバーが正しく表示されているか
メニューの内容に問題がないか
スマートフォンで正しく表示されているか

デザインが反映されていても、画像やメニューなどはサンプルの状態になっている場合があります。

必要に応じて、自分のサイトに合わせて調整しましょう。

公式の操作画面も確認したい方はこちらをご覧ください。

▶ AFFINGER7デザインカードプラグインの使い方（公式マニュアル）

デザインカード適用後に確認したい設定

デザインカードを適用したら、サイトの内容に合わせてカスタマイズしていきましょう。

サンプルデザインをそのまま利用するのではなく、ロゴや画像、メニューなどを変更することで、オリジナルのサイトに仕上げられます。

特に、次の3つを確認することをおすすめします。

トップページや記事ページの表示を確認する

まずは、トップページと記事ページの表示を確認します。

トップページ生成機能を利用した場合は、WordPress管理画面の「固定ページ」から生成されたページを確認できます。

「AFFINGERデザイン TOPページ（default）」という固定ページがある場合は、そのページを編集してください。

例えば、次の項目を変更しましょう。

トップページの見出し
サンプルの文章
画像やバナー
おすすめ記事へのリンク
カテゴリーへのリンク

また、記事ページの見出しやボックスなどの表示も確認しておきましょう。

デザインカードを適用した後は、サンプルの内容を自分のブログに合わせて変更することが大切です。

トップページをもっと自由に編集したい方へ

AFFINGER7では、マイブロックなどの機能を活用してトップページを自由にカスタマイズすることもできます。

おすすめ記事やカテゴリー、バナーなどを配置し、オリジナルのトップページを作成したい方は、以下の記事を参考にしてください。

▶ AFFINGER7でトップページを自由にカスタマイズする方法

ヘッダー・メニュー・ウィジェットを調整する

次に、サイトのヘッダーやナビゲーションメニューを確認します。

デザインカードを適用すると、メニューがサンプルデータに変更される場合があります。

例えば、ブログであれば次のようなメニューが考えられます。

ホーム
ブログカテゴリー
おすすめ記事
プロフィール
お問い合わせ

WordPress管理画面の「外観」→「メニュー」などから、メニューの内容と表示場所を確認しましょう。

また、デザインカードによってウィジェットが自動挿入される場合があります。

「外観」→「ウィジェット」を開き、サイドバーやフッターの表示内容を確認してください。

不要なサンプルウィジェットは削除し、必要なものを追加しましょう。

ロゴ・画像・カラーを自分好みに変更する

最後に、ロゴや画像、サイトカラーを調整します。

デザインカードに設定されている画像は、自分のサイトに合わせて差し替えることをおすすめします。

公式では、一部のサンプルに外部サービス「Lorem Picsum」の画像が使用されていると案内されています。

自分のサイトで使用する場合は、オリジナル画像や利用許可のある素材へ変更しましょう。

また、ヘッダーのカラーやロゴを変更するだけでも、サイト全体の印象が大きく変わります。

ヘッダーを自分好みに変更したい方へ

AFFINGER7では、サイトロゴやヘッダー画像、ナビゲーションメニュー、背景色などを細かく設定できます。

詳しい操作方法は、以下の記事で解説しています。

▶ AFFINGER7のヘッダーをカスタマイズする方法｜ロゴ・色・画像・メニュー設定

なお、デザインによっては「追加CSS」に専用のCSSが設定されている場合があります。

デザインを大きく変更する際は、不要なCSSが残っていないかも確認しておきましょう。

デザインカード適用前のバックアップ方法

AFFINGER7デザインカードを使う前には、バックアップを取ることが重要です。

特に、すでに記事を公開しているサイトでは、現在の設定を保存しておきましょう。

ここでは、主なバックアップ方法を紹介します。

WordPressサイト全体をバックアップする

まずは、WordPressサイト全体をバックアップしておくことをおすすめします。

主なバックアップ対象は次の2つです。

WordPressのファイル
WordPressのデータベース

両方を保存しておくことで、万が一の際にサイト全体の復旧を検討できます。

バックアップ方法には、レンタルサーバーのバックアップ機能やWordPress用バックアッププラグインなどがあります。

ただし、バックアップを作成するだけでは十分とはいえません。

保存したファイルが利用できることや、復元方法を事前に確認しておくことも大切です。

カスタマイザー・ウィジェットなどの設定を保存する

デザインカード利用前のバックアップ方法として、次のプラグインを利用します。

バックアップ対象	プラグイン
カスタマイザー	Customizer Export/Import
ウィジェット	Widget Importer & Exporter
AFFINGER管理	データ引継ぎプラグイン（別売）

これらのプラグインを利用することで、対象となる設定を個別に保存できます。

ただし、すべての設定やコンテンツを完全に復元できるわけではありません。

カスタマイザーのバックアップ

「Customizer Export/Import」は、WordPressカスタマイザーの設定データを保存するためのプラグインです。

WordPress管理画面の「プラグインを追加」から検索し、インストール・有効化してください。

その後、カスタマイザー内のエクスポート機能を利用して設定データを保存します。

「Customizer Export/Import」を有効化するとカスタマイズ画面に「エクスポート/インポート」の項目が追加されます。

「エクスポート/インポート」項目の「書き出し」をクリックするとカスタマイザーの設定を保存（バックアップ）することができます。

ウィジェットのバックアップ

「Widget Importer & Exporter」は、WordPressのウィジェット設定を保存するためのプラグインです。

インストール・有効化したら、ウィジェットのエクスポート機能を利用して設定データを保存してください。

「Widget Importer & Exporter」を有効後、ウィジェット画面に「インポート/エクスポート」が表示されます。

「ウィジェットのエクスポート」をクリックするとウィジェットの設定を保存（バックアップ）することができます。

AFFINGER管理のバックアップ

AFFINGER管理の設定は、公式の別売「データ引継ぎプラグイン」を利用して保存する方法があります。

ただし、このプラグインはWordPressサイト全体をバックアップするものではありません。

あくまでAFFINGER管理の設定データを保存するためのものです。

利用する場合は、現在の対応状況や提供条件を公式サイトで確認してください。

「データ引継ぎプラグイン」を有効化するとAFFINGER管理メニューに「データの引き継ぎ」項目が追加されます。

「データの引き継ぎ」画面の「エクスポート」をクリックするとAFFINGER管理の設定を保存（バックアップ）することができます。

バックアップから元の状態に戻す際の注意点

バックアップがあっても、ワンクリックですべての設定が元に戻るとは限りません。

例えば、カスタマイザーだけを復元しても、ウィジェットやメニューが完全に戻らない場合があります。

また、デザインカード管理画面の「一括リセット」は、適用前のデザインへ戻す機能ではありません。

元の状態へ戻すためには、バックアップから必要な設定を復元するか、手動で再設定する必要があります。

そのため、デザインカードを利用する前には、復元に必要な情報がそろっているか確認しておきましょう。

デザインカードが反映されない・変更できないときの対処法

デザインカードを利用しても、思ったように表示されない場合があります。

そのような場合は、次の項目を確認してください。

デザインカードが表示されない場合

まずは、デザインカードプラグインが正しくインストールされているか確認しましょう。

WordPress管理画面の「プラグイン」→「インストール済みプラグイン」を開き、該当プラグインが有効になっているか確認します。

また、以下の点もチェックしてください。

AFFINGER7が有効になっているか
st-design-card.zipをインストールしたか
AFFINGER7専用のプラグインを利用しているか
テーマが最新バージョンになっているか

AFFINGER6用の旧デザインカードを使用していないかも確認しましょう。

デザインを適用しても見た目が変わらない場合

デザインを適用しても表示が変わらない場合は、キャッシュの影響などが考えられます。

まずはブラウザを再読み込みしてください。

それでも変化が確認できない場合は、次の項目をチェックしましょう。

ブラウザのキャッシュを削除する
キャッシュ系プラグインの設定を確認する
サーバー側のキャッシュを確認する
正しいデザインデータを読み込んでいるか確認する
カスタマイザーや追加CSSを確認する

なお、デザインデータによっては、トップページやメニューのデータが含まれていない場合があります。

そのため、サンプル画像と完全に同じ表示にならないこともあります。

適用前のデザインに戻したい場合

デザインカードを適用した後に、以前のデザインへ戻したくなることもあります。

その場合は、事前に取得したバックアップを利用する方法があります。

バックアップがない場合は、必要な設定を手動で調整し直すことになります。

特に注意したいのが、「一括リセット」の扱いです。

一括リセットを実行しても、デザインカード適用前の状態には戻りません。

設定を初期化する機能なので、元に戻すための操作として利用しないでください。

AFFINGER7デザインカードのよくある質問

ここでは、AFFINGER7デザインカードに関するよくある疑問をまとめました。

デザインカードは何度でも変更できる？: 別のデザインデータを読み込んで、デザインを変更することは可能です。

ただし、適用するたびに既存の設定が上書きされる場合があります。

何度も変更する場合は、その都度バックアップを取ってから作業しましょう。
すでに記事があるサイトでも利用できる？: 既存サイトで利用する場合は注意が必要です。

公式では、デザインカードは原則としてサイトの初期状態で利用することを想定しています。

すでに運営しているサイトでは、カスタマイザーやウィジェットなどの設定が上書きされるため、バックアップを取ったうえで慎重に利用してください。
デザインカードで記事や画像は削除される？: デザインカードは主にテーマのデザイン設定を反映するためのプラグインです。

ただし、すべてのコンテンツが影響を受けないと保証されているわけではありません。

特にトップページ生成やメニュー上書きなどは、既存設定に影響します。

万が一に備えて、データベースやアップロードファイルを含むサイト全体のバックアップを取っておきましょう。
AFFINGER6用のデザインカードも使える？: AFFINGER6用の旧デザインカードは、AFFINGER7専用デザインカードとは仕組みが異なります。

そのため、AFFINGER7では必ず専用プラグインと専用デザインデータを利用してください。
デザインカード適用後もカスタマイズできる？: はい。デザインカードで設定したデザインをベースに、ロゴや画像、カラー、メニューなどを変更できます。

ただし、サンプルデザインに含まれる追加CSSなどが影響する場合もあるため、カスタマイズ後はパソコンとスマートフォンの両方で表示を確認しましょう。