この記事のタイトルとURLをコピーする

アフィンガー5の全体カラー設定|配色ツールを使って好きな色をより美しく

 

「アフィンガーを買ったけど、難しくて全然わからない…」

アフィンガーにはたくさんの機能があって最初はわかりにくいです。

 

まず最初にやることといえば、サイトの『全体カラー設定』です。

アフィンガーにはデフォルトでカラーパターンが複数ありますが、僕は好きな色を使いたかったので自分で選びました。

 

こちらの記事では、僕のようなWordPress初心者でも簡単にカラー設定ができた方法をご紹介しています。

いちいちカラーコードから探すなんてことはしないので大丈夫です。

 

2019年2月5日追記

記事中で説明しているカラーは現在のブログカラーとは違っています。

 

『MATERIAL DESIGN』の『Color Tool』が超簡単

 

『MATERIAL DESIGN』の『Color Tool』がすごく簡単で便利です。

好きな色を選ぶと、「基本色」「薄い色」「濃い色」の3色を教えてくれます

 

この3色教えてくれるのがポイントです。

アフィンガーで『全体カラー設定』をするときの、「一番濃い色」「少し薄い色」「とても薄い色」の3色にそのまま使えるからです。

 

>>>『MATERIAL DESIGN』の『Color Tool』

 

 

まず上の写真の右側にある『Color Tool』を選びます。

 

 

次に上の写真にある『GOT IT』を選びます。

このあとから色を選ぶ作業になります。

感覚的にパッと選ぶだけで使えるので大丈夫です。

 

色(基本色)を選ぶ

 

カラーパレットから好きな色(基本色)を選びます。

上の写真では丸印で囲んである紫色を選びました。

色を選ぶと、カラーパレットの下に3色が表示されます。

 

  • 選んだ基本色
  • 薄い色
  • 濃い色

 

コードも表示されているのでメモをしておきます。

コピペでもOKです。

 

このように、最初に好きな色を選ぶだけで、その色に加えて『薄い色』『濃い色』の計3色を教えてくれます。

あとはこの3色をアフィンガーに設定するだけです。

 

ほかにも画面の左側に表示される「サンプル」が便利です。

スライド式で全部で6パターン表示されますが、実際に配色した感じが見れるので参考になります。

 

アフィンガーへ反映

 

アフィンガー5では上の『全体カラー設定』で、「キーカラー」「メインカラー」「サブカラー」と3色入力するだけでOKです。

「外観」>「カスタマイズ」>「全体カラー設定」と進みます。

 

  • キーカラー → 濃い色
  • メインカラー → 選んだ色
  • サブカラー → 薄い色

これだけでサイト全体を一瞬で美しくかえてくれます。

 

すごく簡単で楽しかったので、つい何色も試してしまって2時間くらい遊んでいました。

アフィンガーに最初からあるカラーパターン以外を使いたいときは、これで簡単に設定できます。

 

注意ポイント

  • 全体カラー設定がうまくいかないときもあります。
  • そのときは公式マニュアルにある「確認ポイント」を見てください。

 

公式サイトの説明


(出典:アフィンガー公式

 

設定がうまくいかないときは、上の説明を試してみるといいかもしれません。

ほかにも「よくある質問」が参考になるかもしれませんので、次の記事を読んでみてください。

 

公式 購入後のテーマなどに関するご相談フォーム

 

目次にもどる



ワンクリックで自動で3色

もし自分で色を選んでいたら、センスがないのできっと失敗していたハズです…。

便利なネットに本当に助けてもらいました。

 

公式のマニュアルにもわかりやすい説明があったので、お時間があるときにぜひ。

読もう読もうと思いながらも、なかなか読む気にならないですけど…。

 

 

この記事のタイトルとURLをコピーする


-ブログ関係

© 2019 ろんぶりライフ