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

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

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

WING(アフィンガー5)で「メニューのカラー」の色を変更する方法

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

WING(アフィンガー5)で「メニューのカラー」の色を変更する方法をご紹介します。

具体的には WING(アフィンガー5) ヘッダーメニュー、サイドメニューウィジェット、スマートフォン、スマホ追加メニュー、スマホ追加メニュー2、スマホミドルメニュー、スマホフッターメニューなどのメニュー全般の色変更が可能です。

外観カスタマイズへ進む

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

ヘッダーメニュー

ヘッダーのメニュー色を設定できます。

  1. 背景色
  2. 背景色(グラデーション上部)
  3. ボーダー上下色
  4. ボーダー左右色
  5. ボーダー右色
  6. 文字色

ボーダーの上下左右など細かい色設定が可能です。

 

  1. グラデーションを横向きにする
  2. 第一階層メニューを太字にする(サイドメニュー連動)
  3. メニューの横幅を100%にする
  4. メニューの上下に隙間を作る
  5. 下層ドロップダウンメニュー背景色
  6. 背景画像
    背景画像をメニューにも設定できます

サイドメニューウィジェット

外観⇒ウィジェットで設定できるサイドバーメニューの色設定です

  1. 背景色
    第一階層メニューの色です
  2. 背景色(グラデーション上部)
  3. ボーダー色
  4. 文字色
  5. グラデーションを横向きにする
  6. 第一階層Webアイコン
    アイコンの形を設定できます
  7. アイコン色
  8. 第二階層以下Webアイコン
  9. アイコン色

以下、背景画像を設定できます

左余白と、上下の余白を設定できます。

  1. 第二階層の文字色
  2. 第二階層の下線色
  3. 背景色

以下、背景画像を設定できます

 

スマートフォン

スマホ用メニューの色設定です。

  1. スライドメニューボタン背景色
  2. スライドメニューアイコン色
  3. スライドメニューバー背景色
  4. スライドメニューバー背景色(グラデーション上部※向きはヘッダーエリア連動)

  1. スライドメニュー内背景色
  2. スライドメニュー内のテキストリンク色
  3. スライドメニュー内リンクのボーダー色
  4. メニューのWebアイコンを非表示
    矢印などのアイコンを消します
  5. 表示パターンB(スクロール追尾)
    ヘッダーメニューがスクロールしても追尾するようにします

スマホ追加メニュー、スマホ追加メニュー2

AFFINGER管理⇒メニュー⇒スマホ用スライドメニュー から追加できる「スマホ追加メニュー」の色設定です。

スマホミドルメニュー

AFFINGER管理⇒メニュー⇒スマホ用スライドメニュー から追加できる「スマホミドルメニュー」の色設定です。

スマホフッターメニュー

外観⇒メニュー⇒スマートフォンフッター用メニュー から追加できる「スマホフッターメニュー」の色設定です。

 

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

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

ネコティーチャー

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

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

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