AFFINGER6：メインカラーとサイトデザインの変更方法【初心者向け】

メインカラーの変更方法

AFFINGER6ではサイトのヘッダーやフッターなどのメインとなる色を一括して変更することができます。

変更できるカラーパターンは１３種類あります。

メインカラーはサイトの雰囲気に大きく影響するので、最初に設定しておくことがお勧めです。

メインカラーは「AFFINGER6管理」→「全体設定」で設定することが可能です。

赤（エレガント）	青（ビジネス）
緑（ナチュラル）	オレンジ（元気）
ピンク（可愛い）	グレー（ダーク）
赤（やさしい）	青（やさしい）
緑（やさしい）	オレンジ（やさしい）
ピンク（やさしい）	グレー（やさしい）
リセット（カラー未設定）

カラーパターン：赤（エレガント）

カラーパターン：青（ビジネス）

カラーパターン：緑（ナチュラル）

カラーパターン：オレンジ（元気）

カラーパターン：ピンク（可愛い）

カラーパターン：グレー（ダーク）

カラーパターン：赤（やさしい）

カラーパターン：青（やさしい）

カラーパターン：緑（やさしい）

カラーパターン：オレンジ（やさしい）

カラーパターン：ピンク（やさしい）

カラーパターン：グレー（やさしい）

カラーパターン：リセット（カラー未設定）

メインカラーを決定したら次にデザインパターンを設定しましょう。

デザインパターンの変更方法

デザインパターンでサイトのざっくりとした雰囲気を変更することができます。

デザインパターンは７種類（EX版限定を含む）あり、「AFFINGER6管理」→「全体設定」で設定することが可能です。

デフォルト（グラデーション横）

ビジネス（グラデーション縦）

フラット（シンプル）

キューティー（ストライプ）

ブログ（初心者おすすめ）

EX（限定※チェックボックスがシンプルバージョンに変更）

リセット（設定なし※カラー含む）

デザインパターン：デフォルト（グラデーション横）

※　カラーパターン青（ビジネス）設定での表示例になります。

デザインパターン：ビジネス（グラデーション縦）

デザインパターン：フラット（シンプル）

デザインパターン：キューティー（ストライプ）

デザインパターン：ブログ（初心者おすすめ）

デザインパターン：EX（限定※チェックボックスがシンプルバージョンに変更）

デザインパターン：リセット（設定なし※カラー含む）

コンテンツが無い状態のサンプル表示なので、デザインの違いがわかりにくかもしれません。

実際にAFFINGER６を使用している方は自分のブログで実際に試してみた方が解りやすいと思います。

ただし、作成した記事数が多い方は一度設定した全体設定のカラーやデザインパターンは変更しないことをお勧めします。

全体設定でカラーを変更しても個別で色を設定した箇所などの色は変わりません。

その為、変更前までは違和感がなかった部分を新しいカラーに合わせて変更する必要がでてくる可能性があります。

また、デザインパターンでも特に「見出し」のデザイン変化に伴って「ん～。違和感があるな。」と思うことが多いです。

記事数が多いと修正するのが大変になるので、初期の段階で全体設定のカラーやデザインパターンを確定してその後は変更しないことをお勧めします。

サイトのカラーやデザインについて自分でカスタマイズするのもいいですが、テンプレートを利用すると簡単にオシャレなサイトを作成することができます。

AFFINGER6では数種類のデザイン済みデータをテンプレートとして利用することができます。

デザイン済みデータはこんな感じです。

デザイン済みデータを設定するならサイトを作成した初期の段階で設定したほうがいいです。

別記事でデザイン済みデータを設定する方法を詳しく解説していますので、そちらを参考にしてみてください。

デザイン済みデータの他にAFFINGER6ではデザインカードというテンプレートも利用できます。

デザインカードについてはこちらの記事をご覧になってください。

AFFINGER6の使い方

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6：関連記事