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

テーマ変更お知らせ
お知らせ(2020/09/26追記)

当ブログのWPテーマを AFFINGER から THE SONIC に変更しました。

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

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

  

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

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

 

こちらの記事では僕のような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

画像に alt 属性が指定されていません。ファイル名: AFFINGER-01.jpg

  

AFFINGER

画像に alt 属性が指定されていません。ファイル名: AFFINGER-02.jpg

  

THE SONIC

画像に alt 属性が指定されていません。ファイル名: THE-SONIC-01-scaled.jpg

  

THE SONIC

画像に alt 属性が指定されていません。ファイル名: THE-SONIC-02.jpg
目次に戻るテキストリンク
マロン

マロン

マロンです。読書と勉強が大好き!覚えたことをシンプルに、そしてイメージしやすいようにまとめてご紹介しています。

FOLLOW

カテゴリー:
関連記事