【AFFINGER6旧版】公式デザインカードFLATの設定方法と導入後の作業

当サイトでは、実際に購入または使用した商品・サービスのみレビューしています。

記事更新日：2026-07-18

AFFINGER6公式デザインカード「FLAT」は、大きなメインビジュアルと、その下に並ぶヘッダーバナーが印象的なデザインでした。

トップページで写真を大きく見せながら、カテゴリーや読んでほしいページへ誘導しやすい構成です。

この記事では、AFFINGER6用「FLAT」のデザインカードを反映する方法から、カテゴリー・メニュー・ヘッダーバナー・TOP画像・プロフィールなど、導入後に設定しておきたい項目までを順番に紹介します。

AFFINGER6を現在も使用していて、

• FLATの設定方法を確認したい
• デザインカードを入れたあと、何を設定すればよいか分からない
• ヘッダーバナーやTOP画像を自分のブログ用に変更したい
• まず記事を書ける状態まで整えたい

という方は、旧版の設定記録として参考にしてください。

なお、デザインカードを運用中のブログへ反映すると、既存の設定が上書きされる場合があります。作業前に必ずバックアップを取ってください。

AFFINGER6公式デザインカード「FLAT」をインポート

まずは、AFFINGER6公式デザインカード「FLAT」をインポートします。

FLATは、大きなメイン画像と複数のヘッダーバナーを組み合わせた、すっきりしたホームページ型のデザインです。色違いも用意されていました。

このデータと手順はAFFINGER6専用です。AFFINGER7のデザインカードには使用できません。

AFFINGER6用デザインカードの公式案内を見る

step
1AFFINGER6用デザインカードをダウンロード

公式案内ページの下部にある、購入者向けのダウンロード案内からログインします。

使用したいFLATの色を選び、デザインカードのzipファイルをダウンロードします。

step
2AFFINGER6用デザインカードをインストール

WordPress管理画面から、次の順番で進みます。

1. 「プラグイン」→「新規プラグインを追加」をクリック
2. 「プラグインのアップロード」をクリック
3. ダウンロードしたzipファイルを選択
4. 「今すぐインストール」をクリック
5. インストール後に「プラグインを有効化」をクリック

zipファイルは解凍せず、そのままアップロードします。

step
3「デザインをセットする」をクリック

WordPress管理画面に追加された「AFFINGERデザインカード」を開き、「デザインをセットする」をクリックします。

これで、AFFINGER6の初期デザインが反映されます。

デザインを読み込んだだけでは、サンプル用の画像や文字が入った状態です。

ここから、カテゴリー・メニュー・画像・プロフィールなどを、自分のブログ用に変更していきます。

メニューの元になるカテゴリーを作成

まずは、メニューやヘッダーバナーのリンク先として使用するカテゴリーを作成します。

「投稿」→「カテゴリー」をクリックし、ブログで使用するカテゴリーの「名前」と「スラッグ」を入力します。

入力できたら、「新規カテゴリーを追加」をクリックします。

最初は、ブログの主な内容に合わせて2〜4個ほど用意しておけば十分です。

メニューを作成

作成したカテゴリーを使って、ヘッダーなどに表示するメニューを作成します。

step
1新しいメニューを作成して名前をつける

「外観」→「メニュー」をクリックします。

「新しいメニューを作成しましょう。」をクリックし、分かりやすいメニュー名を入力します。

step
2メニューの表示位置を決める

メニューを表示したい場所にチェックを入れます。

この記事では、次の位置を設定しています。

• ヘッダーメニュー
• サイドメニュー
• スマホスライドメニュー

チェックを入れたら、「メニューを作成」をクリックします。

step
3メニューに表示する内容を選ぶ

左側の「メニュー項目を追加」から、表示したいカテゴリーなどにチェックを入れます。

「メニューに追加」をクリックし、並び順を整えたら「メニューを保存」をクリックします。

これで、基本的なメニュー設定は完了です。

AFFINGER6 FLATのヘッダーバナーを設定

FLATでは、メイン画像の下に複数のヘッダーバナーが並びます。

ここを自分のカテゴリーやおすすめページに合わせて変更すると、ブログの内容がひと目で分かりやすくなります。

step
1AFFINGER管理の「ヘッダー下／おすすめ」を開く

「AFFINGER管理」→「AFFINGER管理」→「ヘッダー下／おすすめ」の順に開きます。

step
2バナー画像・テキストを設定

ヘッダーバナーは最大4つまで設定できます。

各バナーで、次の項目を変更します。

• 画像：「アップロード」から設定
• テキスト：カテゴリー名やページ名を入力
• サブテキスト：必要に応じて入力

設定後は、ページ下部の「Save」をクリックして保存します。

step
3カテゴリーのスラッグを確認

「投稿」→「カテゴリー」を開き、先ほど作成したカテゴリーのスラッグを確認します。

たとえば、ブログURLが

`https://nekosuki.com`

カテゴリーのスラッグが

`what-cats-like`

の場合、カテゴリーURLは次のようになります。

`https://nekosuki.com/what-cats-like`

step
4バナーのリンク先URLを設定

「ヘッダー下／おすすめ」の各バナーにある「リンク先URL」へ、カテゴリーURLや誘導したいページのURLを入力します。

設定後は、忘れずに「Save」をクリックしてください。

カテゴリーURLを開いても表示されない場合は、「設定」→「パーマリンク」を開き、内容を変えずに「変更を保存」をクリックすると改善することがあります。

AFFINGER6 FLATのTOP画像を変更

FLATの印象を大きく左右する、トップページ上部のメイン画像を変更します。

step
1カスタマイザーの「ヘッダー画像」を開く

「外観」→「カスタマイズ」→「ヘッダー画像」の順に開きます。

step
2自分のブログに合う画像へ変更

ヘッダー画像の設定画面で、「現在のヘッダー」または「ヘッダー画像エリア」から画像を変更します。

スマートフォン用に別画像を用意したい場合は、「スマホヘッダー画像」にも画像を設定します。

大きな画像はブログの第一印象になります。記事のジャンルや、ブログで伝えたい雰囲気に合う画像を選びましょう。

プロフィールカード（サイト管理者紹介）を作成

次に、サイドバーへ表示するプロフィールカードを設定します。

step
1プロフィールカードの設定画面を開く

「外観」→「カスタマイズ」→「オプション（その他）」→「プロフィールカード」の順に開きます。

step
2ヘッダー画像とアバター画像を設定

プロフィールカードに表示する画像を設定します。

• ヘッダー画像：横長の画像
• アバター画像：150px以上の正方形画像

step
3プロフィールページへ移動するボタンを設定

プロフィールページがまだ完成していない場合は、URL欄に一時的に「#」を入力しておけます。

ボタンのテキストには、「詳しくはこちら」など、内容が分かる言葉を入れます。

必要に応じてボタンの色を変更し、最後に「公開」をクリックします。

プロフィールページが完成したら、「#」を実際のプロフィールページURLに変更してください。

AFFINGER6のプロフィールカードに文章を入れる

プロフィールカードへ自己紹介文を表示したい場合は、WordPressのプロフィール情報を入力します。

「ユーザー」→「プロフィール」を開き、「プロフィール情報」に表示したい文章を入力します。

入力後、「プロフィールを更新」をクリックします。

プロフィールページを作成

プロフィールカードから移動するプロフィールページを、固定ページで作成します。

プロフィールページには、ブログを始めた理由、発信している内容、管理人についてなどを書いておくと、読者にブログのことを伝えやすくなります。

WordPressのプロフィールページを作成する方法はこちら

お問い合わせ・プライバシーポリシーページを作成

ブログを運営するなら、お問い合わせページとプライバシーポリシーページも用意しておきましょう。

特に、Googleアドセンスやアフィリエイトを利用する場合は、ブログ運営者への連絡手段や、アクセス解析・広告などに関する方針を掲載しておくことが大切です。

お問い合わせフォームの作成方法はこちら

ブログのプライバシーポリシーについてはこちら

AFFINGER6公式デザインカード「FLAT」の初期設定完成

これで、AFFINGER6公式デザインカード「FLAT」の基本的な初期設定は完了です。

記事を投稿すると、トップページの記事一覧や上部のスライド部分にも少しずつ記事が表示され、ブログらしい形になっていきます。

最初から細かな部分まで完璧に仕上げる必要はありません。まずは記事を書ける状態を作り、運営しながら少しずつ自分好みに調整していけば大丈夫です。

現在AFFINGER7を検討中の方へ｜のんどりデザイン限定特典

のんどりデザインでは、AFFINGER7を当サイトから購入された方へ、オリジナルの「カスタムAFFINGERデザインカード」を特典としてご用意しています。

のんどりデザイン限定のカードも、AFFINGER7公式デザインカードと同じ仕組みを使用しています。

用意されたデータを読み込んだあとは、「デザインをセットする」を1クリックするだけで、ブログの初期デザインを反映できます。

難しいコードを追加したり、トップページや配色を一つずつ設定したりする必要はありません。

Firstly・Nuafyを各4色、合計8種類から選べます

• Firstlyシリーズ：4色
• Nuafyシリーズ：4色

同じデザインでも色によってブログの印象はかなり変わります。

爽やか、落ち着いた、やわらかい、かわいいなど、合計8種類から好みのデザインと色を選ぶだけで、目指したいブログの雰囲気に近づけやすくなります。

3記事程度からでもブログ全体がさまになりやすい

ブログを始めたばかりの頃は記事数が少ないため、トップページや記事一覧がどうしても寂しく見えやすいですよね。

のんどりデザイン限定のデザインカードは、3記事程度からでもブログ全体がある程度さまになるように作っています。

AFFINGER7では、そのままだとカード型にならないTOPページやカテゴリーページの記事一覧も、簡易カード風に整えています。

導入後の「やるべき設定」もマニュアルで確認できます

デザインカードで初期デザインを反映したあとも、ブログ名、画像、カテゴリー、メニュー、プロフィールなどは、自分のブログに合わせて変更する必要があります。

そこで特典には、カスタムAFFINGERデザインカード導入後に設定しておきたい項目を、順番に解説したマニュアルも用意しています。

「1クリックでデザインは入った。でも、次に何をすればいいの？」という状態になりにくいよう、ブログ公開までの作業を進めやすくしています。

まとめ｜FLATはAFFINGER6用の旧デザインカードです

この記事では、AFFINGER6公式デザインカード「FLAT」の導入方法と、反映後に行うカテゴリー・メニュー・ヘッダーバナー・TOP画像・プロフィールなどの設定を紹介しました。

AFFINGER6のデザインカードは、プラグインをインストールし、「デザインをセットする」をクリックすることで初期デザインをまとめて反映できる仕組みでした。

現在もAFFINGER6を使用している方は、旧版の設定記録として参考にしてください。

なお、現在販売されているAFFINGER7では、AFFINGER7専用のデザインカードプラグインと専用データを使用します。

この記事で紹介したBASIC・FLATなどのAFFINGER6用カードは、AFFINGER7の公式カードには含まれていません。

これからAFFINGERを購入する方や、AFFINGER7で初期デザインを設定する方は、現在の公式デザインカードから選んでください。

AFFINGER7公式デザインカード12種類の特徴と選び方を見る

関連記事

【AFFINGER6旧版】公式デザインカードBASICの設定方法

AFFINGER7を検討している方へ｜約5年使った本音レビュー