ブログ運営半年で月20万超の元サラリーマンブロガーなつです。
AFFINGER5、6を購入すると使えるデザイン済データ。デザイン済データとは一般でいう着せ替えなのですが、デザインがとにかくセンスが良いです。
そのまま使いたいのですが、ちょっと気になることがあります。それは、特徴的なデザインだけに他の購入者と被らないかということ。
ブログを作ってライバルチェックをしている時に全く同じデザインが出てきたらな～んかヤダ！って方向けにこの記事を書きました。
AFFINGER5（アフィンガー）の着せ替えの色変更のやり方をお伝えしていきます。
2021年7月、AFFINGER5（WING）からAFFINGER6（ACTION）にパワーアップして変更されました！
詳しくはコチラの記事で確認できます。
※AFFINGER5をベースに機能を若干変更したものがAFFINGER6です。
（AFFINGER5は今現在販売されていません）
※ AFFINGER5（WING） ⇒ 改訂版・AFFINGER6（ACTION）
EXは、「上位版」です。（通常版より高機能となります）
AFFINGER5、6（アフィンガー）の基になる着せ替え
今回は、AFFINGER5で特に特徴的なデザイン済データ3つの色変更をしていきます。実際変更の色が気に入らなくても、自分で「色変更する」ことでイメージを変えあなたのオリジナルになりますので、ぜひ試してみてください。
AFFINGER5着せ替え Tidy（ピンクと水色のグラデーションがカッコいいデザイン）
色合いもさることながら全体の雰囲気に高級感がただようデザインです。相性の良い淡いピンクと水色がカッコいいです。
出典：AFFINGER5
AFFINGER5着せ替え NOTE.2020（超シンプルなんにでも使える）
白基調でどんなジャンルにもテクニカルに合うデザイン。無料テーマと一線を画しているのは、全体的な高級感のあるレイアウトと、スライダーのヘッダー。
出典：AFFINGER5
AFFINGER5着せ替え HappyDiary 2020（かわいくて親近感がある）
これは、見た人すべてがハッピーになれる感じがするデザイン。ヘッダー背景にドットをあしらいさらに可愛さアップ。これだけでもAFFINGER5の元をとれるくらい可愛い。
出典：AFFINGER5
速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。
⇒ 詳しくはコチラをご覧ください。
※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。
AFFINGER5（アフィンガー）着せ替えの色変更 完成図
どのデザインの色変更をするか見たところで次は完成図をお見せします。まずは、イメージを膨らませてみてください。
↓ クリックで拡大します。
NOTE.2020を背景黒に変更
背景を黒にすることで、印象が強めに変わります。
↓ クリックで拡大します。
HappyDiary 2020を茶色系に変更
甘すぎずちょっとビターチョコのイメージで作ってみました。大人のスイーツとか高級感を出したい時にはこの色合いは面白いかも。
AFFINGER5（アフィンガー）着せ替えの色変更 「インストール」
AFFINGER5のデザイン済データーの導入には、プラグインのインストールが必要です。デザインによっては、2つのプラグインが必要ですが、おなじ動作なので難しくはありません。
以下の記事を参考にしてインストールをしてみてください。
AFFINGER5（アフィンガー）着せ替えの色変更 1.「Tidy」
Tidyに関しては以前トップページの5パターンの変更を記事にしています。基本形の作り方を確認していただき、マスターできればいろんな色変更が可能なのでぜひ見てください。
↓ クリックで拡大します。
ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー）の公式ページを確認する
※今なら、5大購入特典をお付けしています！
※ AFFINGER6（ACTION）は AFFINGER5（WING）の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。
AFFINGER5（アフィンガー）着せ替えの色変更 2.「NOTE.2020」
デザイン済データの中でも一番シンプルなNOTE.2020。白基調なのでこのまま使ってもオシャレなのですが、逆の色合いにしてみましょう。
手順は以下の通りです。
- ヘッダーをスライダーで表示
- 背景・・・黒
- ヘッダーの背景・・・夜景の画像
- ヘッダー上部色をグラデーションにする
- フッター部分をグラデーションにする
- タイトルテキスト・・・白
- サイドバーテキスト・・・白
AFFINGER5着せ替えの色変更 2-1「ヘッダーをスライダーで表示」
NOTE.2020をインストールした直後にはヘッダーにはなにもありません。ヘッダー画像部分にスライダーを入れる作業をします。
▼ AFFINGER5管理 ⇒ ヘッダー
記事がすでに数記事入っていればスライダーになりますので、記事スライドショー設定の部分、「ヘッダーに記事をスライドショーで表示する」にチェックを入れ「SAVE」をクリックします。
AFFINGER5着せ替えの色変更 2-2「背景・・・黒」
本文の背景を白から黒に変更します。もし暗くなりすぎると思ったら別の色を入れても良いですし、画像を背景にもできるので、細かな模様のフリー画像などを使っても面白いです。
フリー画像は以下の記事で確認ください。
背景を黒にする
AFFINGER5にはいろんな部分にカラー変更のパレットがあります。最初は少しだけわかりづらいですが、慣れればすぐにできます。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ 背景色
背景色の部分をブラックに変更します。（#000000）
AFFINGER5着せ替えの色変更 2-3「ヘッダーの背景・・・夜景の画像」
このデザイン変更では、ヘッダースライドショーの後ろに夜景の画像を挿入しています。スライドショーにカーソルを持っていくと透過して画像の全貌がうっすら見えるようになっています。
特に設定しなくても良いのですが、カッコよくなるのでおすすめです。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ headerエリア
header（ヘッダー+メニュー+ヘッダー画像エリア）全体に配置する背景画像ですと文章がありますので、その下に画像を新規追加します。
どんな画像でも良いのですが、横長のものがきれいに収まります。
AFFINGER5着せ替えの色変更 2-4「ヘッダー上部色をグラデーションにする」
全体的に黒になると印象が暗くなりますので、ヘッダー上部にはグラデーションを持ってきました。これは黒にしても良いですし、黒とグレーなどにすると神秘的な雰囲気にもなりますのでここで調整しましょう。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ ヘッダーエリア
- 背景色・・・#009393
- 背景色（グラデーション上部）・・・#a863bf
- ヘッダー背景の横幅を100%にする・・・チェック
- グラデーションを横向きにする・・・チェック
訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！
※ AFFINGER6（ACTION）は AFFINGER5（WING）の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。
AFFINGER5着せ替えの色変更 2-5「フッター部分をグラデーションにする」
フッター部分もグラデーションにしていきましょう。こちらの色もヘッダーと合わせてもいいですし、今回は少しだけ色を変化させています。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ フッターエリア
- フッターテキスト・・・#ffffff
- 背景色・・・#1899a3
- 背景色（グラデーション上部）・・・#47ad5e
- フッターの背景色を100%にする
AFFINGER5着せ替えの色変更 2-6「タイトルテキスト・・・白」
タイトルテキストは黒になっていますので、ヘッダーを今回のように青のグラデーションした場合には見えづらくなります。
そこで、テキストカラーを白に変更します。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ ヘッダーエリア
下にスクロールしていき「サイトタイトルとキャッチフレーズの文字色」の部分のパレットに以下の色コードもしくは白に設定します。
- #ffffff
AFFINGER5着せ替えの色変更 2-7「サイドバーテキスト・・・白」
サイドバーのテキストも黒になっていますので白に変更をします。たとえば雰囲気を見てピンクにするなどでも面白いと思います。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ サイドバー
- サイドの文字色（一部カラーの強制変更）・・・#ffffff
AFFINGER5（アフィンガー）着せ替えの色変更 3.「HappyDiary 2020」
黄色とブルーの対象的な色が心地よさを表現しているこのデザインですが、あまりにしっくりしている色合いなので、片方だけ色を変えてしまうとちょっとバランスが悪くなってしまいます。
そこで、全体に茶色を入れその他の派手な色でも合うようにしてみます。
- ヘッダー画像を入れる
- ヘッダー部分のグラデーション設定
- ヘッダー下のメニュー色設定
- サイドバーのタイトルを水玉に
- フッターの色変更
訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！
※ AFFINGER6（ACTION）は AFFINGER5（WING）の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。
AFFINGER5着せ替えの色変更 3-1 「ヘッダー画像を入れる」
ヘッダー画像は茶色っぽいもの、赤に近いものならOKです。茶色に近い色を入れていきましょう。今回のヘッダー画像は画像ACで「スイーツ」と検索すればでてきます。
▼ 外観 ⇒ カスタマイズ ⇒ ヘッダー画像
現在のヘッダーの部分に画像を新規追加にします。画像を選ぶとちょうど良い範囲で切り取りができますのでそのまま「切取り」にしてください。
（もちろん、そのままでも大丈夫です）
AFFINGER5着せ替えの色変更 3-2 「ヘッダー部分のグラデーション設定」
ここでもグラデーションにしていきます。茶色となると結構どんな色でも合いますので、あまり使ったことのない色でも冒険してみてください。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ ヘッダーエリア
- 背景色・・・#bfa46f
- 背景色（グラデーション上部）・・・#dcd3b2
- ヘッダー背景の横幅を100%にする
- グラデーションを横向きにする
AFFINGER5着せ替えの色変更 3-3「ヘッダー下のメニュー色設定」
▼ 外観 ⇒ カスタマイズ ⇒ [+]メニューのカラー設定 ⇒ PCヘッダーメニュー
- 背景色・・・#726250
- 背景色（グラデーション上部）・・・#9e9478
- ボーダー上下色・・・#726250
- ボーダー左右色・・・#9e9478
- ボーダー右色・・・#f4426b
AFFINGER5着せ替えの色変更 3-4「サイドバーのタイトル見出しを水玉に」
サイドバーの見出しはストラップになっていますが、今回ヘッダーとフッターを地味にしたので、水玉にしました。
この水玉は、AFFINGER5で配布される透過型の画像です。
▼ 外観 ⇒ カスタマイズ ⇒ [+]各テキストとhタグ ⇒ ウィジェットタイトル（サイドバー）
- 文字色・・・#9f563a
- 背景色・・・#ffe567
- 背景色（グラデーション上部）・・・#ffec91
- ウィジェットタイトルの基本スタイル・・・なし
- 背景画像・・・ドットの透過画像
AFFINGER5着せ替えの色変更 3-5「フッターの色変更」
フッターもヘッダーとほぼ同じ色ですが、ちょっとぼんやりしたので引き締める色を使っています。
▼ 外観 ⇒ カスタマイズ ⇒ 基本エリア設定 ⇒ フッターエリア
- フッター文字色・・・#ffffff
- 背景色・・・#dcd3b2
- 背景色（グラデーション上部）・・・#5a544b
↓ 当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！
初心者だからこそWordpress有料テーマ を使うべき理由
無料テーマを使うことで時間の無駄遣いをしていませんか？
- 思い通りのデザインにできない
- なかなか稼げない
- アクセス数が増えない
こんな悩みを抱えていませんか？
稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。
Wordpressの有料テーマができる５つのこと
- 検索上位を目指せる
- 見た目が綺麗でおしゃれになる
- 機能が豊富で出来ることが多い
- マニュアルなどのサポート
- 有名ブロガーも有料テーマを使っている
これまでにあげた5つの有料テーマの特徴を説明していきます。
1. 検索上位を目指せる
ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。
- 情報の信頼性
- ユーザーへの役立つ情報であるか？
- スマホ・PCなどでストレスなく使える
などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。
2. 見た目が無料テーマ以上に綺麗になる
シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。
有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。
出典：AFFINGER5（アフィンガー5）
3. 機能が豊富でできることが多い
今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。
4. マニュアルなどのサポート
なにかわからないことがあった場合、詳しく記載しているものがあるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。
5. 有名ブロガーも多数使用
稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。
もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。
カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。
おすすめ！WordPressテーマ
「ACTION（AFFINGER6）」
- 高機能の最新テーマで大人気
- デザイン変更でいろんな用途に使える
- マニュアル完備
- 各パーツがプロに作ってもらったみたいにアレンジ可能
- バナーや囲い枠スライダーなど特殊なものが簡単に作れる。
⇒ 違いについてはコチラの記事でどうぞ。
ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！