AFFINGER６のカッコいい着せ替えを色変更してイメージを変える！

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER6を購入すると使えるデザイン済データ。デザイン済データとは一般でいう着せ替えなのですが、デザインがシンプルで使いやすいです。

そのまま使いたいのですが、ちょっと気になることがあります。それは、他の購入者と被らないかということ。

そこで、AFFINGER6（アフィンガー）の着せ替えデザインを自分好みにする色変更のやり方をお伝えしていきます。

ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

AFFINGER６（アフィンガー）の基になる着せ替え

実際変更の色が気に入らなくても、自分で「色変更する」ことでイメージを変えあなたのオリジナルになりますので、ぜひ試してみてください。

AFFINGER６着せ替え　Tidy2

全体の雰囲気に高級感がただようデザインです。相性の良い淡いピンクと水色がカッコいいです。

出典：AFFINGER6

AFFINGER6着せ替え　cloud

白基調でどんなジャンルにもテクニカルに合うデザイン。無料テーマと一線を画しているのは、全体的な高級感のあるレイアウトと、スライダーのヘッダーの角をとることによって柔らかなイメージも感じられます。

出典：AFFINGER6

AFFINGER6着せ替え　MUKU

スライダーの背景に大胆に黒のラインがあるデザイン。ブログページにメリハリがでてくるので記事のサムネイル等も目立ちます。

出典：AFFINGER6

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

AFFINGER　着せ替えの色変更イメージ

どのデザインの色変更をするか見たところで次は完成図をお見せします。まずは、イメージを膨らませてみてください。

↓　クリックで拡大します。

ヘッダーグラデーションで背景黒に変更

背景を黒にすることで、印象が強めに変わります。黒は好き嫌いがありますが、ヘッダー画像を夜景などにするとグッとカッコよくなります。

↓　クリックで拡大します。

全体的に茶色系に変更

ヘッダー画像のチョコケーキを基本にして全体の色を設定してみました。差し色として鮮やかなピンクも合いますし、全体の色を抑えている分、派手な色のパーツや画像も映えます。

このページで作るデザイン例

基本の色とかはご自身の好みに合わせていただくと良いですが、ここではグラデーションなどを追加してデザインを構成していきます。

出典：AFFINGER6（MUKUアレンジ）

AFFINGER６（アフィンガー）着せ替えの色変更　「インストール」

AFFINGER6のデザイン済データーの導入には、プラグインのインストールが必要です。デザインによっては、2つのプラグインが必要ですが、おなじ動作なので難しくはありません。

以下の記事を参考にしてインストールをしてみてください。

関連記事【徹底解説】AFFINGER６のデザイン済みデーターの使い方と導入のコツ！

AFFINGER６（アフィンガー）着せ替えの色変更　1.「Tidy2」

Tidyに関しては以前トップページの5パターンの変更を記事にしています。基本形の作り方を確認していただき、マスターできれば以下のようないろんな色変更が可能なのでぜひ見てください。

↓　クリックで拡大します。

AFFINGER６（アフィンガー）着せ替えの色変更　2.「MUKU」

デザイン済データの中でもシンプルなcloud。白基調なのでこのまま使ってもオシャレなのですが、逆の色合いにしてみましょう。

手順は以下の通りです。

1. ヘッダーの画像・・・夜景の画像
2. ヘッダー上部色をグラデーションにする
3. フッター部分をグラデーションにする
4. タイトルテキスト

上記の4ステップでMUKUの左デザインが右のようになります。

2-1「ヘッダーの画像変更」

このデザイン変更では、ヘッダースライドショーの後ろに夜景の画像を挿入しています。スライドショーにカーソルを持っていくと透過して画像の全貌がうっすら見えるようになっています。

特に設定しなくても良いのですが、カッコよくなるのでおすすめです。

▼　外観　⇒　カスタマイズ　⇒　基本エリア設定　⇒　headerエリア

header（ヘッダー+メニュー+ヘッダー画像エリア）全体に配置する背景画像ですと文章がありますので、その下に画像を新規追加します。

どんな画像でも良いのですが、横長のものがきれいに収まります。

両脇に間隔があきますので、画像を100％にします。

• ヘッダー背景の横幅を100%にするにチェック

2-2「ヘッダー上部をグラデーションにする」

基本の色は白ですが、もう少し派手にしたい人などは色を追加するかグラデーションもきれいなので使ってみましょう。

MUKUの場合には、スライダーの背景ラインがあるので、パープルとかピンクでもセンス良く収まります。

▼　外観　⇒　カスタマイズ　⇒　　基本エリア設定　⇒　ヘッダーエリア

色番号は参考ですので、好きな色を合わせながら設定してみてくださいね。

• 背景色・・・#f0e68c
• 背景色（グラデーション上部）・・・#66cdaa
• ヘッダー背景の横幅を100%にする・・・チェック
• グラデーションを横向きにする・・・チェック

2-3「フッター部分をグラデーションにする」

フッター部分もヘッダーとあわせてグラデーションにしていきます、こちらの色もヘッダーと合わせてもいいですし、単色でも見やすいです。もちろんシンプルなままでもOK。

▼　外観　⇒　カスタマイズ　⇒　　基本エリア設定　⇒　フッターエリア

• フッターテキスト・・・#ffffff
• 背景色・・・#f0e68c
• 背景色（グラデーション上部）・・・#66cdaa
• フッターの背景色を100%にする

2-4「タイトルテキスト」（必要な時）

タイトルテキストは黒になっていますので、ヘッダーを濃いグラデーションした場合には見えづらくなります。

そこで、テキストカラーを変更する方法をお伝えしておきます。

▼　外観　⇒　カスタマイズ　⇒　　基本エリア設定　⇒　ヘッダーエリア

下にスクロールしていき「サイトタイトルとキャッチフレーズの文字色」の部分のパレットに以下の色コードもしくは白に設定します。

• #ffffff

AFFINGER６（アフィンガー）着せ替えの色変更基本

ここからは、着せかえを導入してからの一般的な変更のやり方をお伝えしていきます。この手段を知ることによって、細かな部分は着せ替えの設定を使っておきたいけれども、ほんの少し自分の好みに近づけたい時などには使える方法です。

1. ヘッダー画像を入れる
2. ヘッダー部分のグラデーション設定
3. ヘッダー下のメニュー色設定
4. サイドバーのタイトルを水玉に
5. フッターの色変更

全部設定すると上記のようなデザインになります。

AFFINGER６着せ替えの色変更　3-1　「ヘッダー画像を入れる」

ヘッダー画像を入れてセンス良く見せるコツは、ヘッダー画像に使われている「色」を上部のグラデーションなどに持ってくると見た目にスッキリします。

今回のヘッダー画像は画像ACというサイトからダウンロードしています。（「スイーツ」と検索すればでてきます。）

▼　外観　⇒　カスタマイズ　⇒　ヘッダー画像

現在のヘッダーの部分に画像を新規追加にします。画像を選ぶとちょうど良い範囲で切り取りができますのでそのまま「切取り」にしてください。

（もちろん、そのままでも大丈夫です）

AFFINGER６着せ替えの色変更　3-2　「ヘッダー部分のグラデーション設定」

ここでもグラデーションにしていきます。茶色となると結構どんな色でも合いますので、あまり使ったことのない色でも冒険してみてください。

▼　外観　⇒　カスタマイズ　⇒　　基本エリア設定　⇒　ヘッダーエリア

• 背景色・・・#bfa46f
• 背景色（グラデーション上部）・・・#dcd3b2
• ヘッダー背景の横幅を100%にする
• グラデーションを横向きにする

AFFINGER６着せ替えの色変更　3-3「ヘッダー下のメニュー色設定」

ヘッダー下に配置した、グローバルメニューの背景色の変更です。

▼　外観　⇒　カスタマイズ　⇒　各種メニュー設定　⇒　PCヘッダーメニュー

• 背景色・・・#ffbf49
• 背景色（グラデーション上部）・・・#f0e68c
• ボーダー上下色・・・#f5deb3
• ボーダー左右色・・・#f5deb3
• グラデーションを横向きにする
• メニューをセンター寄せにする
• メニューの横幅を100%にする

AFFINGER６着せ替えの色変更　3-5「スライダー背景」

スライダー部分の背景は白ですが、ちょっとぼんやりしたイメージになってしまう場合があります。そこで、背景色を変更してみます。

▼　外観　⇒　カスタマイズ　⇒　　基本エリア設定　⇒　ヘッダー画像設定/下ウィジェット

ヘッダーエリア下の「ヘッダーエリア下の背景色」を変更

• ヘッダーエリア下の背景色・・・#acd68f

AFFINGER６着せ替えの色変更　3-6「フッターの色変更」

フッターもヘッダーとほぼ同じ色ですが、ちょっとぼんやりしたので引き締める色を使っています。

▼　外観　⇒　カスタマイズ　⇒　　基本エリア設定　⇒　フッターエリア

• フッター文字色・・・#ffffff
• 背景色・・・#dcd3b2
• 背景色（グラデーション上部）・・・#5a544b

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

記事を取得できませんでした。記事IDをご確認ください。

初心者だからこそWordpress有料テーマ を使うべき理由