設定方法

グローバルメニューのアニメーション設定方法

CARATではグローバルメニューのカスタマイズをPC時とSP時で複数追加しています。

より見やすく、それでいてタップしやすいデザインを目指して作成しました。

りょうた
りょうた
今までのよりよりみやすくなったと思うよ!

それでは設定方法をご説明します。

PC時のグローバルメニューの設定方法

WordPressの管理画面より「外観」→「カスタマイズ」→「サイトデザイン設定」まで飛んでいただくと、「グローバルメニューのホバーアニメーション」こんな表示が出てくるかと思います。

ここまできたら画像のように「パターン1」をラジオボタンで選択するとPC時のグローバルナビの下層ページの表示がガラッと変わるかと思います。

スマホ時のグローバルメニュー

横からスライドしてくるメニュー(CARATスタイル1)

スマホ時のグローバルメニューは比較的俗に言う「ハンバーガーメニュー」に当たる部分です。

ここも先ほどと同じようにカスタマイザーの「サイトデザイン設定」まで飛んでいただくと「ハンバーガーメニューのカスタマイズ」と出てくると思います。

ここで「CARATスタイル1」を選択するとスマホ時の開閉アニメーションやハンバーガーメニューの下に「MENU」といった文字が付与され、メニューが横から表示されるようになります。

りょうた
りょうた
背景色も真っ白だからすごく見やすくなったね!

ふわっと広がるメニュー(CARATスタイル2)

「CARATスタイル2」は今までのアニメーションとは全くアニメーションをしてくれます。

スマホの中心からフワッと広がるメニューになっているため、ダイナミックな印象を与えつつ、画面全体に広がるためよりメニューが見やすくなります。

また背景色も自由に変えることができるため、自分のサイトカラーに合わせて配色を選ぶことができます。

りょうた
りょうた
サイトの印象をガラッと変えることができるかも!

CARATスタイル2の背景色の設定方法

ハンバーガーメニューカスタマイズで「CARATスタイル2」を選んでいる時だけ、適用できる背景色があります。

WordPressの管理画面より「外観」→「カスタマイズ」→「カラー設定」まで飛んでいたくと、「ハンバーガーメニューの背景色」という項目が見つかるかと思います。

ここで任意のカラーに設定し保存していただくと、背景色が自動的に変わるようになっています。

りょうた
りょうた
ここの設定は忘れないようにしよう!

導入時の注意事項(PCのみ)

グローバルメニューのホバーアニメーションはデザインの都合上、全てのヘッダーデザインに対応しているわけではございません。

2019年 3月現在で対応しているのはヘッダーデザイン3とヘッダーデザイン4のみです。

他のヘッダーを設定している場合、設定を変更しても変化はございませんので予めご了承ください。

りょうた
りょうた
他のヘッダーデザインは随時追加していくよ!

 

WordPressテーマ「JIN」専用デザインプラグイン『CARAT』

「CARAT」は大人可愛いを追求した女性向けデザインプラグインです。

WordPressテーマ「JIN」の機能性と「CARAT」のデザインでより読み手に感動を与えるプラグインを作りました。

「自分のブログが好き」

そんな人が1人でも増えてくれたらと心から願っています。