初心者向け〜アフィンガー公式デザインカード［FLAT版］を簡単設定する手順ガイド

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

 

AFFINGER公式デザインカード「FLAT」は、大胆なビジュアルとすっきりした配色が印象的です。

スタイリッシュかつ視認性に優れ、読者を引き込む導入に最適で、トップページでしっかり魅せたい方におすすめのデザインです。

 

 

実はAFFINGER公式デザインカード「FLAT」、パパッと設定できちゃうの知っていましたか？

最近できた「AFFINGER公式デザインカード」だったら大体3工程でデザイン設定ができちゃうんです。

 

今回は、公式AFFINGERデザインカード（FLATデザイン）の設定・その後の設定を説明します。

 

簡単なので、ぜひ設定してみてくださいね。

（すでにあるブログにデザインを反映したい方は、もしもの時のために初めにバックアップを忘れずに行ってください♪）

 

 

 

公式AFFINGERデザインカード（BASIC）をインポート

まずは、公式AFFINGERデザインカードで（BASIC）デザインをインポートします。

AFFINGERデザインカードはコチラ

 

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

AFFINGERデザインカードページ下の方にある、「購入者済みの方はコチラからダウンロード」をクリック。

その後ログイン。

arrow_downward

ダウンロードボタンがでるので、お好みの（FLAT）AFFINGERデザインカードをダウンロード。

 

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

プラグイン→プラグインのアップロード→ダウンロードした「公式AFFINGERデザインカード」を選択。→今すぐインストール。→「プラグインを有効化」ボタンをクリック。

 

step
3AFFINGERデザインカードをセット

ワードプレス横のメニューに「AFFINGERデザインカード」のメニューがでます。
「AFFINGERデザインカード」ページで「デザインをセットする」をクリック。
これで初期デザインが設定できました。

 

では、デザインデータをインポート後の設定をしていきましょう。

 

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

メニューの元となるカテゴリーを作成していきます。

「投稿」→「カテゴリー」をクリック。
ブログのカテゴリーにしたい「名前」「スラッグ」を入力後、「新規カテゴリーを追加」をクリック。
（※まずは2〜3個作成しておきましょう。）

 

 

メニューを作成

メニューを作成していきます。

 

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

1. 「外観」→「メニュー」をクリック。
2. 「新しいメニューを作成しましょう。」クリック。
3. メニュー名に新しい名前を付けます。

 

step
2メニューの位置をきめる

メニューの位置「ヘッダーメニュー」「サイドメニュー」「スマホスライドメニュー」にチェックを入れる。
「メニューを作成」ボタンをクリック。

 

step
3メニューに入れる内容を選ぶ

1. メニューに表示したい「カテゴリー」などを、左にある「メニュー項目を追加」から入れます。
2. メニューに入れたい「カテゴリー」にチェックを入れる。→「メニューに追加」ボタンをクリック。
3. 「メニューを保存」をクリック。

これでメニューはできました。

 

ヘッダーバナーを作成する

ヘッダーバナーを設定していきます。

バナーがあると、ブログを読まれる方が何を主に書いているブログかが一目でわかるようになりますし、誘導しやすいのでオススメです。

step
1AFFINGER管理ページの「ヘッダー下/おすすめ」へ

1. 「外観」→「AFFINGER管理」→「AFFINGER管理」をクリック。
2. AFFINGER管理ページの「ヘッダー下/おすすめ」をクリック。

 

step
2ヘッダーバナー項目の箇所を設定

ヘッダーバナー項目の箇所を設定。（最大4つまで設定できます）

1. 画像のURL下にある「アップロード」をクリックして、画像を設定。
2. 「テキスト」箇所に、メニューで作成した「メニュー名」を記載。
3. 「サブテキスト」箇所は、お好みで入れましょう。
4. ページ一番下にある「Save」ボタンをクリックして保存しておきましょう。

※画像をアップロードしても、管理画面の画像は変わりませんが、最後に「Save」ボタンを押して保存すれば変わりますのでご安心を。

※リンク先URLはこの後設定するので、とりあえずはそのままにしておきます。

 

step
3バナーのリンク先を指定する

バナーのリンク先を指定していきます。

1. 「投稿」→「カテゴリー」をクリック。
2. カテゴリーページの、さきほど指定した各「スラッグ」をメモしておきましょう。

arrow_downward

例えば、猫が好きな事「スラッグ：what-cats-like」であれば、自分のブログURLに「/what-cats-like」をプラスしたのが、カテゴリーページのURLになります。

自分のブログが「https://nekosuki.com」だったら、スラッグ「/what-cats-like」を足して「https://nekosuki.com/what-cats-like」になります。

arrow_downward

 

step
4バナーのリンク先を指定する

1. 1. カテゴリーページのURLの用意ができたら、先ほどの「外観」→「AFFINGER管理」→「AFFINGER管理」→AFFINGER管理ページの「ヘッダー下/おすすめ」で、「リンク先URL」をそれぞれ記載していきます。
   2. 最後に、ページ一番下にある「Save」ボタンをクリックして保存します。

※カテゴリーページのURLで、カテゴリーページに行かない場合は、パーマーリンクを一度保存してみましょう。

「設定」→「パーマーリンク」→パーマーリンクページで「変更を保存」をクリック。

 

 

TOPイメージを作成する

TOPページのTOPイメージ部分を設定していきます。

 

「外観」→「カスタマイズ」→「ヘッダー画像」をクリック。

※ヘッダー画像ページで、「現在のヘッダー」か「ヘッダー画像エリア」のどちらかで設定していきます。

arrow_downward

1. 現在仮の「ヘッダー画像エリア」が設定されているので、緑色部分の「画像が設定済み」をクリック。
2. お好みの画像を設定します。

もしくは、設定した「ヘッダー画像」の画像を削除して、「現在のヘッダー」の画像を設定してもOKです！

「現在のヘッダー」の画像であれば、画像を何種かランダムで表示できるようになります。

 

 

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

では、プロフィールカード（サイト管理者紹介）部分を設定していきましょう。

 

step
1プロフィールカードをカスタマイズする

1. 「外観」→「カスタマイズ」をクリック。
2. 「オプション（その他）」→「プロフィールカード」をクリック。

 

step
2ヘッダー画像、アバター画像を設定する

ヘッダー画像、アバター画像の「画像を選択」の箇所をクリックして、それぞれの画像を設定していきます。
ヘッダー画像（横型が良い感じ）、アバター画像（150px以上の正方形の画像が良いです）

 

step
3プロフィールカードのボタンを設置する

プロフィールページにいくボタンを設置

1. まだプロフィールページができていないなら「URL」には「#」を入れておきましょう。（ボタンが表示されます。）
2. ボタンに表示させるテキストを入力。「テキスト」には「詳しくはコチラ」などお好みのテキストを書きます。
3. 初期設定では赤っぽいピンクのボタンが表示するのでボタンの色を変えます。
   「背景色（上部）」の色部分をクリック。→色の隣の数字は「#333」にします。
   Basic-Blackっぽい黒っぽいグレーのボタンになりました。
4. すべて終わったら、一番上のボタン「公開」ボタンをクリック。

これでプロフィールカードは完成です。

（※プロフィールページができたら、URL部分には、プロフィールページのURLを入れましょう。）

 

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

プロフィールカードと連動している、プロフィールページを作成していきます。

せっかくプロフィールカードを設定しているので、プロフィールページを作成していきます。

プロフィールページを作成方法はコチラの記事で↓

 

これで大体の初期設定はできました。

広告収入（googleアドセンス）、アフィリエイト目的でブログを作成しているのであれば、「お問い合わせ」「プライバシーポリシー」ページが必要です。

ではこの後は「お問い合わせ」「プライバシーポリシー」ページも作成していきます。

 

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

広告収入を目的としているのであれば、お問い合わせページ、プライバシーポリシーを固定ページで作成します。

広告収入を得るのは、ブログに「お問い合わせ」「プライバシーポリシー」ページが必須です。

 

お問い合わせページの作成方法はコチラの記事で↓

お問合せフォームはブログに必要？［Googleアドセンス承認をもらうためには必要です！］

続きを見る

 

プライバシーポリシーページの作成方法はコチラの記事で↓

プライバシーポリシーはブログに必要ない！？いえいえ。副業ブログには必要です！

続きを見る

 

公式AFFINGERデザインカード（FLAT）の初期設定完成！

これで、公式AFFINGERデザインカード（FLAT）の初期設定は完成。

後はバンバン記事を書いていけばOKです！

TOPページに表示される上部のスライドメニューも記事を書けば勝手に表示されます♪

 

AFFINGER6（アフィンガー6）の購入を検討中の方は、限定特典を使うのもあり

のんどりデザイン限定フォーマット（AFFINGER6（アフィンガー6）仕様）Firsty-4種を無料でプレゼント。

AFFINGER6（アフィンガー6）版「のんどりデザイン簡易カード済デザインフォーマット」、「Firsty　シリーズ（4種類）」のデザインフォーマットを特典としてお渡ししています。

「Firstyシリーズ（4種類）」は、TOPページとカテゴリーページの記事一覧を「簡易カード化」済み。

・Firstly-Blue　・Firstly-Chocolate　・Firstly-Water　・ Firstly-Mint

（※「First-4種類」は、「カスタムAFFINGERデザインカード」「デザイン済みデータ」の設定が選べます。オススメは、最短7分設定「カスタムAFFINGERデザインカード」です!）

 

簡単にできるレイアウトフォーマットでAFFINGER6（アフィンガー6）のデザイン幅をぜひ広げてください。

（※色は男性でも女性でも使いやすい色使いで設定済みです。※画像は含みません。）

 

また最初は、なかなか記事が書けないのに、記事が6記事以上ないとアフィリエイト会員登録ができなくて歯がゆい思いをした自身の経験から、人気6カテゴリー（975記事）のスターターベース記事もお渡ししています。

最初は記事がうまく書けないのに、ASP（アフィリエイト提供会社）にも登録できないイライラを軽減！

また、スターターベース記事の使い方もブロックエディター・クラシックエディターそれぞれの詳しい説明もつけました。今後ブログ記事を書く練習としても使用していただけます。

 

のんどりデザインでは、何も分からないところからはじめた自分の経験より特典をつけています。

 

＼のんどりデザイン限定特典付き／
AFFINGER6［ACTION］> >

詳しくは↓

「アフィンガー6はできることがおおい？」3年間使った感想のまとめ［特典付き］

続きを見る

 

まとめ

AFFINGERデザインカードは、3工程ぐらいで初期デザインが反映できます。

今回は公式AFFINGERデザインカードのFLATの設定方法を記事にしました。

良ければ参考にしてください。

 

BASICの設定方法はコチラ↓

10分で分かる公式AFFINGERデザインカード［BASIC版］〜その後の設定まで

続きを見る

 

関連記事

AFFINGER6は初心者には難しいといわれるが本当か？

続きを見る

AFFINGER6記事作成パーツ一覧まとめ［クラシックエディタ（ブロック）バージョン］

続きを見る

AFFINGER6ブロックエディタで簡易設定できるパーツ

続きを見る

アフィリエイトブログって何を書けばいい？-NGジャンルはできれば避ける-

続きを見る