「アフィンガーを買ったけど、難しくて全然わからない…」
アフィンガーにはたくさんの機能があって最初はわかりにくいです。
まず最初にやることといえばサイトの『全体カラー設定』があります。
アフィンガーにはデフォルトでカラーパターンが複数ありますが、僕は好きな色を使いたかったので自分で選びました。
こちらの記事では僕のようなWordPress初心者でも簡単にカラー設定ができた方法をご紹介しています。
いちいちカラーコードから探すことはしないので大丈夫です。
タップできる目次（もくじ）
『MATERIAL DESIGN』の『Color Tool』が超簡単
『MATERIAL DESIGN』の『Color Tool』がすごく簡単で便利です。
好きな色を選ぶと、
- 基本色
- 薄い色
- 濃い色
の3色を教えてくれます。
この3色教えてくれるのがポイントです。
アフィンガーで『全体カラー設定』をするときの「一番濃い色」「少し薄い色」「とても薄い色」の3色にそのまま使えるからです。
参考『MATERIAL DESIGN』の『Color Tool』
上の写真にある『GOT IT』を選びます。
このあとは色を選ぶ作業になります。
感覚的にパッと選ぶだけで使えるので大丈夫です。
色（基本色）を選ぶ
最初にカラーパレットから好きな色（基本色）を選びます。
上の写真では丸印で囲んである『紫色』を選びました。
色を選ぶと『カラーパレット』の下に3色が表示されます。
- 選んだ基本色
- 薄い色
- 濃い色
コードも表示されているのでメモをしておきます。
コピペでもOKです。
このように最初に好きな色を選ぶだけで、その色に加えて『薄い色』『濃い色』の計3色を教えてくれます。
あとはこの3色をアフィンガーに設定するだけです。
ほかにも画面の左側に表示される「サンプル」が便利です。
スライド式で全部で6パターン表示されますが、実際に配色した感じが見れるので参考になります。
アフィンガーへ反映
アフィンガー5では上の『全体カラー設定』で「キーカラー」「メインカラー」「サブカラー」と3色入力するだけでOKです。
外観 ＞ カスタマイズ ＞ 全体カラー設定 と進みます。
- キーカラー：濃い色
- メインカラー：選んだ色
- サブカラー：薄い色
これだけでサイト全体を一瞬で美しくかえてくれます。
すごく簡単で楽しかったので、つい何色も試してしまって2時間くらい遊んでいました。
アフィンガーに最初からあるカラーパターン以外を使いたいときはこれで簡単に設定できます。
- 全体カラー設定がうまくいかないときもあります。
- そのときは公式マニュアルにある「確認ポイント」を見てください。
AFFINGER公式サイトの説明
カラー設定がうまくいかないときは、上の説明のとおり保存してから再度設定をしてみるといいかもしれません。
ワンクリックで自動で3色
もし自分で色を選んでいたらセンスがないのできっと失敗していたハズです…。
便利なネットに本当に助けてもらいました。
公式のマニュアルにもわかりやすい説明があるので時間があるときに一通り目を通しておくといいと思います。
ボリュームがあるのでなかなか読む気にならないかもしれませんが…。
【参考】AFFINGER と THE SONIC でつくったブログをご紹介
僕は AFFINGER と THE SONIC をメインで使っています。
参考にトップページの雰囲気がわかるように写真でご紹介します（パソコン画面のスクショです）。
画像をクリックするとジャンプするので、遊びに来ていただけるとうれしいです。
AFFINGER
AFFINGER
THE SONIC
THE SONIC
