★このサイトにはPRが含まれます★

★この記事にはPRが含まれます★

WING(アフィンガー5)初級編

WING(アフィンガー5)でサイト全体の色を簡単に設定する方法

投稿日:2018年4月25日 更新日:

WING(アフィンガー5)でサイトの色設定をする方法をご紹介します。

WING(アフィンガー5)では、アフィンガー4と同じく、かなり細かい色設定をする事が出来ます。

超大量の設定項目がありますが、全てを設定する必要はありません。

今回は、ざっくりした色設定をしたい方のために、その方法をご紹介します。

WING(アフィンガー5)でサイトの色を簡単に選択したい

グレー系、ピンク系など、ざっくりとした色設定をしたい!という方にはこちらの方法がおすすめです。

WordPress管理画面⇒AFFINGER5管理 と進みます。

  1. デザイン をクリック
  2. カラーパターンでざっくりした色を選べます。
  3. デザインパターンでグラデの有り無し、などを選べます。
  4. カスタマイザー用CSSをstyleで表示します。
    ここにチェックを付けソースを見ると、下画像のようにCSSが物理的に出力されるようです。

    よく分からなければチェックせずにいればOK
  5. サイドバーのカテゴーリンクに簡易デザイン適応(※階層表示未対応)にチェックを入れるとサイドバーのカテゴリーリンクに簡易デザインが適応されます。
  6. SAVEで保存します。

ここまでで、簡単な設定は終わりですが、ヘッダーに色味が適応されているところが気になる…などありましたら、さらに下記の設定をしてみましょう。

もうちょっと細かく設定する

WordPress管理画面⇒外観⇒カスタマイズ⇒全体カラー設定 と進みます。

キーカラーなどに先ほど「カラーパターン」で選んだ色が入っていると思います。

「(1)全体的に反映:有効化すると「デフォルト」表示のカラー変更ができなくなります」を選択すると、ヘッダーやサイドバーのにも選んだ色が適用されます。

デフォルトでは、この状態です。

  1. キーカラーでグラデの濃い部分などを選べます
  2. メインカラーでグラデの薄い部分などを選べます
  3. サブカラーで「サイドバーメニュー」の背景カラーなど薄い色を選べます
  4. テキストで、メニューのテキストの色などを選べます

「AFFINGER5管理」よりも詳細に色を変更したい場合は、ここで設定するとよいでしょう。

 

(2)「デフォルト」表示の一部メニューのみに反映 を選ぶと、ヘッダーや見出し背景などに色は適用されなくなります。

 

デフォルトでは、「使用しない(管理画面で選択したカラーが初期値になります)」になっているので、この画面で色を選びたい場合は、ほかの項目を選択しましょう。

 

「リセット」ボタンでカラーを初期値に戻せます。

 

以上の方法でWING(アフィンガー5)でサイト全体の色を簡単に設定する事ができます。

購入特典「オリジナル子テーマ」付きアフィンガー5

最新版WING(アフィンガー5)に対応した、オリジナル子テーマ付き購入特典は上記のページをご参照ください。
  • この記事を書いた人
アバター画像

ネコティーチャー

WordPressのカスタマイズが好きです。 魔改造したりプラグインやテーマを作ったりしています。

-WING(アフィンガー5)初級編
-, , , , ,

Copyright© WING(アフィンガー5)カスタマイズ講座 , 2024 All Rights Reserved.