WORDPRESS

AFFINGER5で「スマホ用スライドメニュー」の色とデザイン設定をカスタマイズする手順【WordPressブログ】

AFFINGER5で「スマホ用スライドメニュー」の色とデザイン設定をカスタマイズする手順 アイキャッチ



今回は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

「スマホ用スライドメニュー」のカスタマイズ手順

をご紹介していきたいと思います

まず「スマホ用スライドメニュー」とは…

affinger-customize-slide-menu-20200302_1-06

↑ この左上のアイコンのこと(オレンジで囲ってるとこ!)

affinger-customize-slide-menu-20200302_1-10

例えばデザインパターンを変更することで…

affinger-customize-slide-menu-20200302_2-05

↑ こんな風に、アイコンの下に「MENU」という文字を加えたりすることもできます

で、今回のカスタマイズとは、「スマホ用スライドメニュー」の…

  • 色の設定
  • デザイン&配置の設定

この2つに大きくわけられます

そして「WING(AFFINGER5)」の場合、これらのカスタマイズは超簡単です

ちなみに!

今回の「カスタマイズ」の前に、そもそもスマホ用スライドメニューを「作成」する手順については ↓ をどうぞ♪

AFFINGER5で「スマホ用スライドメニュー」を作成する手順 アイキャッチ
AFFINGER5で「スマホ用スライドメニュー」を作成する手順【WordPressブログ】

続きを見る

それではさっそく見ていきましょー🐥

このブログのWordPress環境

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

【スマホ用スライドメニュー編】AFFINGER5におけるカスタマイズ手順

「色設定」をカスタマイズする【カスタマイズ画面から】

pc-work-202001_04

まずは、カスタマイズ画面を開きましょう(下記手順です)

affinger-customize-slide-menu-20200302_1-01

↑ WordPress管理画面 > 外観 > カスタマイズ をクリックします

affinger-customize-slide-menu-20200302_1-02

↑ 左側の一覧から、「メニューのカラー設定」をクリックします

affinger-customize-slide-menu-20200302_1-03

↑ つづいて、また左側の一覧から「スマホスライドメニュー」をクリックします

affinger-customize-slide-menu-20200302_1-04

↑ こちらの「スライドメニューボタン背景色」~「スライドメニューバー背景色(グラデーション…)」までの項目で、スライドメニューの色設定ができます

今回は一例として…

affinger-customize-slide-menu-20200302_1-05

↑「スライドメニューアイコン色」だけ、ネイビー系の色に変更してみます

このネイビー系の具体的なカラーコードは、「#1001b2」です

そのほかの項目は、初期設定のまま!

改めてスマホの画面上で見てみると…

affinger-customize-slide-menu-20200302_1-06

↑ 左上に、三本線の「スライドメニューアイコン」が表示されました🐥

このアイコンをタップすると…

affinger-customize-slide-menu-20200302_1-07

↑ こんな感じで左側からメニューがスライド表示されます

ちなみにこのスライドメニュー内も、好きな配色にカスタマイズ可能です

同じ「スマホスライドメニュー」設定画面から、下の方にある…

affinger-customize-slide-menu-20200302_1-08

↑ こちらの「スライドメニュー内の…」から始まる3つの項目で、自由にカスタマイズしましょう

今回は一例として…

affinger-customize-slide-menu-20200302_1-09

↑ こんなふうに指定してみました

具体的なカラーコードは…

  • テキストリンク色:#515151(ダークグレー系)
  • ボーダー色:#1001b2(ネイビー系)
  • 背景色:#f7f7f7(トップグレー系)

この通りです

改めてスマホの画面で見てみると…

affinger-customize-slide-menu-20200302_1-10

↑ こんな感じになりました

これで、スライドメニューの色設定もOKです🐥

今度は、このスライドメニューの表示パターンをカスタマイズしていきましょう

これも一瞬!

「デザイン&配置設定」をカスタマイズ【AFFINGER5 管理から】

pc-work-202001_05

スライドメニューのデザインや配置の変更は、「AFFINGER5 管理」ページから行えます

affinger-customize-slide-menu-20200302_2-01

↑ WordPress管理画面 > AFFINGER5 管理 > AFFINGER5 管理 をクリックしましょう

affinger-customize-slide-menu-20200302_2-02

↑ 左側の一覧から、「メニュー」タブをクリックします

affinger-customize-slide-menu-20200302_2-03

↑ こちらの「スマホ用スライドメニュー」という場所で、デザインパターンや配置を自由に選びましょう

ちなみに一例として、僕の場合はいつも…

affinger-customize-slide-menu-20200302_2-04

↑ この アイコン下に「MENU」「CLOSE」を追加する にチェックを入れてます

そのほかは初期設定のまま!

改めてスマホで確認してみると…

affinger-customize-slide-menu-20200302_2-05

↑ アイコンの下部に「MENU」という表示が加わって、よりわかりやすいデザインになりました

今回の「スマホ用スライドメニューをカスタマイズする手順」の解説は、これで以上となります

お疲れさまでした♪

あずき🐥

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

今なら超時短ツール「タグ管理プラグイン」の無料配布キャンペーン中!

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2020 あずきのぶろぐ